按需引入<!DOCTYPE html>
<html lang="zh
-CN">
<head>
<meta charset="UTF
-8">
<meta name="viewport" content="width=device
-width, initial
-scale=1.0">
<title>
Ant Design Vue 纯HTML项目示例</title>
<!
-- 引入
Ant Design Vue的CSS
-->
<link rel="stylesheet" href="https://unpkg.com/
ant-design-vue@3.2.21/dist/
antd.css">
<!
-- 引入
Ant Design X
Vue的CSS
-->
<link rel="stylesheet" href="https://unpkg.com/
ant-design-x
-vue@1.0.0/dist/
antdx.css">
<!
-- vue3引入
-->
<script src="https://unpkg.com/dayjs/dayjs.min.js"></script>
<script src="https://unpkg.com/dayjs/plugin/customParseFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekday.js"></script>
<script src="https://unpkg.com/dayjs/plugin/localeData.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekOfYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/weekYear.js"></script>
<script src="https://unpkg.com/dayjs/plugin/advancedFormat.js"></script>
<script src="https://unpkg.com/dayjs/plugin/quarterOfYear.js"></script>
<!
-- vue3
-->
<script src="https://unpkg.com/
vue@3/dist/
vue.global.js"></script>
<!
-- antdv
-->
<script src="https://cdn.jsdelivr.net/npm/
ant-design-vue@4.2.6/dist/
antd.min.js"></script>
<!
-- antdxv
-->
<script src="https://cdn.jsdelivr.net/npm/
ant-design-x
-vue@1.2.7/dist/index.umd.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
const { createApp, ref, computed } =
Vue;
const { Button } =
antd;
const { Bubble, XProvider } =
antdx;
createApp({
template: `
<AXProvider :theme="{
algorithm: myThemeAlgorithm,
}">
<div :style="{
padding: '24px',
backgroundColor: bgColor,
}">
UMD
<AXBubble content="hello bubble"></AXBubble>
<AButton type="primary" @click="setLightTheme">Light</AButton>
<AButton type="primary" @click="setDarkTheme">Dark</AButton>
</div>
</AXProvider>
`,
setup() {
const { theme } =
antd;
const bgColor = ref("white");
const myThemeAlgorithm = ref(theme.defaultAlgorithm);
const setLightTheme = () => {
myThemeAlgorithm.value = theme.defaultAlgorithm;
bgColor.value = "white";
};
const setDarkTheme = () => {
myThemeAlgorithm.value = theme.darkAlgorithm;
bgColor.value = "#141414";
};
return {
myThemeAlgorithm,
bgColor,
setLightTheme,
setDarkTheme
};
}
})
.use(XProvider)
.use(Button)
.use(Bubble)
.mount("#app");
</script>
<style>
.container {
max
-width: 1200px;
margin: 24px auto;
padding: 0 16px;
}
.search
-form {
margin
-bottom: 24px;
padding: 16px;
background
-color: #f5f5f5;
border
-radius: 4px;
}
.user
-table {
margin
-top: 16px;
}
.mb
-6 {
margin
-bottom: 24px;
}
.mt
-2 {
margin
-top: 8px;
}
</style>
</body>
</html>
扫一扫
723
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
