Ant Design of Vue 开发中遇到问题

野性酷女 2021-09-07 05:58 974阅读 0赞

一.Ant Design of Vue

1. [官网地址][Link 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() {
    
                    }
                })

![20210414142242289.png][]

（2）表单组件

1. 重置表单验证

<a-form-model ref="form" ></a-form-model>
    // 表单重置
    reset() {
    	if (this.$refs['form']) {
    		this.$refs['form'].resetFields()
    	}
    },

2.[日期DatePicker\]：\[antdv: DatePicker\] value provides invalidate moment time. If you want to set empty value, use null instead.][DatePicker_antdv_ DatePicker_value_provides invalidate moment time. If you want to set empty value_ use_null_instead.]

<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'
          },

[Link 1]: https://www.antdv.com/docs/vue/introduce-cn/
[20210414142242289.png]: /images/20210813/3bb18ece23f1418abc09e7cdb3544d3b.png
[DatePicker_antdv_ DatePicker_value_provides invalidate moment time. If you want to set empty value_ use_null_instead.]: https://www.it610.com/article/1295342694918332416.htm