一.Ant Design of Vue
1. 官网地址
2.安装
npm install ant-design-vue --save
A.全局引入
import ant from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css';
Vue.use(ant)
注意:全局引入时,babel-plugin-import 里配置 需要删除,否则会报错"ant not defined "
B.按需加载
安装:npm i babel-plugin-import --save-dev
babel.config.js
"plugins": [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: "css" }
]
]
使用:
<template>
<a-button type="primary">Button</a-button>
</template>
<script>
import { Button } from 'ant-design-vue';
export default {
components:{ AButton:Button },
};
</script>
还可以使用 全局引入需要的组件,如,创建utils/components_use.js
/**
* 该文件是为了按需加载,剔除掉了一些不需要的框架组件。
* 减少了编译支持库包大小
* @author yubaoshan
* 当需要更多组件依赖时,在该文件加入即可
*/
import Vue from 'vue'
import { ConfigProvider,Layout,Input,InputNumber,Button,Switch,Radio,Checkbox,Select,
Card, Form,Row,Col,Modal,Table,Tabs,Icon,Badge,Popover,Dropdown,List,Avatar,Breadcrumb,
Steps,Spin, Menu,
Drawer,Tooltip, Alert, Tag,Divider,DatePicker, TimePicker,Upload,Progress,Skeleton,
Popconfirm, message, notification,TreeSelect, Tree, Transfer,
Empty,PageHeader, Descriptions,Result} from 'ant-design-vue'
// import VueCropper from 'vue-cropper'
Vue.use(ConfigProvider)
Vue.use(Layout)
Vue.use(Input)
Vue.use(InputNumber)
Vue.use(Button)
Vue.use(Switch)
Vue.use(Radio)
Vue.use(Checkbox)
Vue.use(Select)
Vue.use(Card)
Vue.use(Form)
Vue.use(Row)
Vue.use(Col)
Vue.use(Modal)
Vue.use(Table)
Vue.use(Tabs)
Vue.use(Icon)
Vue.use(Badge)
Vue.use(Popover)
Vue.use(Dropdown)
Vue.use(List)
Vue.use(Avatar)
Vue.use(Breadcrumb)
Vue.use(Steps)
Vue.use(Spin)
Vue.use(Menu)
Vue.use(Drawer)
Vue.use(Tooltip)
Vue.use(Alert)
Vue.use(Tag)
Vue.use(Divider)
Vue.use(DatePicker)
Vue.use(TimePicker)
Vue.use(Upload)
Vue.use(Progress)
Vue.use(Skeleton)
Vue.use(Popconfirm)
// Vue.use(VueCropper)
Vue.use(notification)
Vue.use(TreeSelect)
Vue.use(Tree)
Vue.use(Transfer)
Vue.use(Empty)
Vue.use(PageHeader)
Vue.use(Descriptions)
Vue.use(Result)
Vue.prototype.$confirm = Modal.confirm
Vue.prototype.$message = message
Vue.prototype.$notification = notification
Vue.prototype.$info = Modal.info
Vue.prototype.$success = Modal.success
Vue.prototype.$error = Modal.error
Vue.prototype.$warning = Modal.warning
这样的组件就直接使用
<template>
<a-button type="primary">Button</a-button>
</template>
<script>
export default {
};
</script>
二.问题
默认框架没有引用Cascader组件,需要自己手动引用,引用方式:
打开/src/core/lazy_use.js
,
import {
...
Cascader
} from 'ant-design-vue'
...
Vue.use(Cascader)
这样在Vue页面上就能直接使用<a-cascader />
标签了
三. 组件的使用
(1).弹出框
this.$confirm({
title: '提示',
content: (h) => (
<div style="font-size:15px">
缴纳税额为:¥<span style="color:red;">100元</span>,请确认是否完成缴款此操作
</div>
),
onOk() {
}
})
(2)表单组件
1. 重置表单验证
<a-form-model ref="form" ></a-form-model>
// 表单重置
reset() {
if (this.$refs['form']) {
this.$refs['form'].resetFields()
}
},
<a-date-picker @change="onChange" :default-value="date" :format="dateFormat" style="width: 100%" v-model="date" />
return {
date: moment(this.record.create_date, 'YYYY-MM-DD'),
dateFormat: 'YYYY-MM-DD'
},