<!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@4.2.6/dist/antd.css">
-->
<!
-- 引入Ant Design X Vue的CSS
-->
<!
-- <link
rel="stylesheet" href="https://cdn.
jsdelivr.net/npm/ant
-design
-x
-vue@1.2.7/dist/index.css">
-->
<link href="../assets/css/slh.min.css"
rel="stylesheet">
<!
-- vue3引入
-->
<script src="https://unpkg.com/day
js/day
js.min.
js"></script>
<script src="https://unpkg.com/day
js/plugin/customParseFormat.
js"></script>
<script src="https://unpkg.com/day
js/plugin/weekday.
js"></script>
<script src="https://unpkg.com/day
js/plugin/locale
Data.
js"></script>
<script src="https://unpkg.com/day
js/plugin/weekOfYear.
js"></script>
<script src="https://unpkg.com/day
js/plugin/weekYear.
js"></script>
<script src="https://unpkg.com/day
js/plugin/advancedFormat.
js"></script>
<script src="https://unpkg.com/day
js/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="../
js/index.umd.min.
js"></script>
</head>
<body>
<div id="app">
</div>
<script>
const { createApp, ref, computed,CSSProperties } = Vue;
const { Button, Flex, Avatar } = antd;
const { Bubble, XProvider } = antdx;
createApp({
template: `
<Flex
gap="middle"
vertical
>
<Bubble
placement="start"
content="Good morning, how are you?"
:avatar="{ icon: h(UserOutlined), style: fooAvatar }"
/>
<Bubble
placement="start"
content="What a beautiful day!"
:styles="{ avatar: hideAvatar }"
:avatar="{}"
/>
<Bubble
placement="end"
content="Hi, good morning, I'm fine!"
>
<template #avatar>
<Avatar
:icon="h(UserOutlined)"
:style="barAvatar"
/>
</template>
</Bubble>
<Bubble
placement="end"
content="Thank you!"
:styles="{ avatar: hideAvatar }"
:avatar="{}"
/>
</Flex>
`,
setup() {
const { theme } = antd;
const fooAvatar: CSSProperties = {
color: '#f56a00',
backgroundColor: '#fde3cf',
};
const barAvatar: CSSProperties = {
color: '#fff',
backgroundColor: '#87d068',
};
const hideAvatar: CSSProperties = {
visibility: 'hidden',
};
return {
CSSProperties,
};
}
})
.use(XProvider)
.use(Button)
.use(Flex)
.use(Avatar)
.use(Bubble)
.mount("#app");
</script>
<style>
/* 可以添加一些自定义样式 */
</style>
</body>
</html>
本文介绍如何使用JavaScript为HTML元素设置属性值。通过示例展示如何创建一个<a>标签并为其设置data-rel属性。
扫一扫
6694
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
