如何在vue中使用ant-design-vue组件
作者:Onemorelight95 时间:2024-05-02 16:32:47
在vue中使用ant-design-vue组件
官方地址:Ant Design Vue
1. 安装
首先使用vue-cli创建项目,然后进入项目,使用npm安装ant-design-vue
库:
npm i --save ant-design-vue@next
然后在package.json
文件中的dependencies
中看见刚刚下载的库:
2. 引入组件库
然后在main.js
中引入,注意要按照顺序:
# 引入组件库
import ant from 'ant-design-vue'
# 引入样式表
import 'ant-design-vue/dist/antd.css'
引入顺序如图所示:
接着需要use该组件库的句柄:
然后在要使用的vue文件中也引入组件库,比如我要在项目默认的App.vue
中使用组件库:
import 'ant-design-vue/dist/antd'
3. 使用
3.1 按钮样式
直接将代码复制到component
标签中即可,要注意component
标签中只能允许有一个根标签。
3.2 导航栏样式
可以选择颜色的导航栏
<template>
<div>
<a-switch :checked="mode === 'vertical'" @change="changeMode" />
Change Mode
<span class="ant-divider" style="margin: 0 1em" />
<a-switch :checked="theme === 'dark'" @change="changeTheme" />
Change Theme
<br />
<br />
<a-menu
style="width: 256px"
v-model:openKeys="openKeys"
v-model:selectedKeys="selectedKeys"
:mode="mode"
:theme="theme"
>
<a-menu-item key="1">
<template #icon>
<MailOutlined />
</template>
Navigation One
</a-menu-item>
<a-menu-item key="2">
<template #icon>
<CalendarOutlined />
</template>
Navigation Two
</a-menu-item>
<a-sub-menu key="sub1">
<template #icon>
<AppstoreOutlined />
</template>
<template #title>Navigation Three</template>
<a-menu-item key="3">Option 3</a-menu-item>
<a-menu-item key="4">Option 4</a-menu-item>
<a-sub-menu key="sub1-2" title="Submenu">
<a-menu-item key="5">Option 5</a-menu-item>
<a-menu-item key="6">Option 6</a-menu-item>
</a-sub-menu>
</a-sub-menu>
<a-sub-menu key="sub2">
<template #icon>
<SettingOutlined />
</template>
<template #title>Navigation Four</template>
<a-menu-item key="7">Option 7</a-menu-item>
<a-menu-item key="8">Option 8</a-menu-item>
<a-menu-item key="9">Option 9</a-menu-item>
<a-menu-item key="10">Option 10</a-menu-item>
</a-sub-menu>
</a-menu>
</div>
</template>
<script>
import { defineComponent, reactive, toRefs } from 'vue';
import {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
} from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const state = reactive({
mode: 'inline',
theme: 'light',
selectedKeys: ['1'],
openKeys: ['sub1'],
});
const changeMode = checked => {
state.mode = checked ? 'vertical' : 'inline';
};
const changeTheme = checked => {
state.theme = checked ? 'dark' : 'light';
};
return { ...toRefs(state), changeMode, changeTheme };
},
components: {
MailOutlined,
CalendarOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>
顶部导航栏
<template>
<a-menu v-model:selectedKeys="current" mode="horizontal">
<a-menu-item key="mail">
<template #icon>
<mail-outlined />
</template>
Navigation One
</a-menu-item>
<a-menu-item key="app" disabled>
<template #icon>
<appstore-outlined />
</template>
Navigation Two
</a-menu-item>
<a-sub-menu>
<template #icon>
<setting-outlined />
</template>
<template #title>Navigation Three - Submenu</template>
<a-menu-item-group title="Item 1">
<a-menu-item key="setting:1">Option 1</a-menu-item>
<a-menu-item key="setting:2">Option 2</a-menu-item>
</a-menu-item-group>
<a-menu-item-group title="Item 2">
<a-menu-item key="setting:3">Option 3</a-menu-item>
<a-menu-item key="setting:4">Option 4</a-menu-item>
</a-menu-item-group>
</a-sub-menu>
<a-menu-item key="alipay">
<a href="https://antdv.com" rel="external nofollow" target="_blank" rel="noopener noreferrer">
Navigation Four - Link
</a>
</a-menu-item>
</a-menu>
</template>
<script>
import { defineComponent, ref } from 'vue';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons-vue';
export default defineComponent({
setup() {
const current = ref(['mail']);
return {
current,
};
},
components: {
MailOutlined,
AppstoreOutlined,
SettingOutlined,
},
});
</script>
3.3 表单样式
内联登录栏
<template>
<a-form
layout="inline"
:model="formState"
@finish="handleFinish"
@finishFailed="handleFinishFailed"
>
<a-form-item>
<a-input v-model:value="formState.user" placeholder="Username">
<template #prefix><UserOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
</a-input>
</a-form-item>
<a-form-item>
<a-input v-model:value="formState.password" type="password" placeholder="Password">
<template #prefix><LockOutlined style="color: rgba(0, 0, 0, 0.25)" /></template>
</a-input>
</a-form-item>
<a-form-item>
<a-button
type="primary"
html-type="submit"
:disabled="formState.user === '' || formState.password === ''"
>
Log in
</a-button>
</a-form-item>
</a-form>
</template>
<script>
import { UserOutlined, LockOutlined } from '@ant-design/icons-vue';
import { defineComponent, reactive } from 'vue';
export default defineComponent({
setup() {
const formState = reactive({
user: '',
password: '',
});
const handleFinish = values => {
console.log(values, formState);
};
const handleFinishFailed = errors => {
console.log(errors);
};
return {
formState,
handleFinish,
handleFinishFailed,
};
},
components: {
UserOutlined,
LockOutlined,
},
});
</script>
来源:https://blog.csdn.net/qq_49723651/article/details/123847947
标签:vue,ant-design-vue,组件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
TensorFlow实现Batch Normalization
2023-02-03 05:20:15
![](https://img.aspxhome.com/file/2023/8/79718_0s.png)
Python+OpenCV图像处理——实现轮廓发现
2023-12-12 23:30:31
![](https://img.aspxhome.com/file/2023/5/97505_0s.png)
python产生模拟数据faker库的使用详解
2022-05-25 22:43:35
修改并编译golang源码的操作步骤
2024-05-02 16:26:23
![](https://img.aspxhome.com/file/2023/8/130708_0s.jpg)
Django+python服务器部署与环境部署教程详解
2023-01-29 15:16:22
![](https://img.aspxhome.com/file/2023/9/81669_0s.png)
在ASP.NET 2.0中操作数据之四:使用ObjectDataSource展现数据
2024-05-13 09:15:45
![](https://img.aspxhome.com/file/2023/8/126198_0s.png)
Python内建类型int源码学习
2023-07-02 19:22:15
![](https://img.aspxhome.com/file/2023/0/59150_0s.png)
JSP组件commons-fileupload实现文件上传
2023-07-03 03:16:01
Python 中 -m 的典型用法、原理解析与发展演变
2023-07-09 17:11:40
![](https://img.aspxhome.com/file/2023/0/87550_0s.jpg)
Python for 循环语句的使用
2023-10-29 14:51:12
完美解决pycharm 不显示代码提示问题
2022-03-18 19:28:00
![](https://img.aspxhome.com/file/2023/9/105579_0s.jpg)
pandas 实现 in 和 not in 的用法及使用心得
2021-10-23 12:25:07
![](https://img.aspxhome.com/file/2023/8/120368_0s.png)
格式化数字ASP,PHP版
2009-01-19 14:17:00
Go语言实现互斥锁、随机数、time、List
2024-04-25 15:11:24
深入了解Golang中的格式化输出
2024-04-26 17:35:27
aspjpeg 半透明描边的实现函数
2008-12-17 12:02:00
![](https://img.aspxhome.com/file/UploadPic/200812/17/17_172743_1-89s.jpg)
深入解析Vue源码实例挂载与编译流程实现思路详解
2024-05-11 09:11:41
![](https://img.aspxhome.com/file/2023/3/126533_0s.png)
Vue为何弃用Ajax,选择Axios?ajax与axios的区别?
2024-04-30 10:38:52
Python 转换文本编码实现解析
2022-07-15 15:58:49
Python爬虫Scrapy框架IP代理的配置与调试
2022-09-19 08:20:26
![](https://img.aspxhome.com/file/2023/0/94110_0s.png)