ant-design vue,ant-design-vue是什么
本文主要介绍Ant-Design-Vue的快速入门指南，有很好的参考价值。希望对大家有帮助。如有错误或不足之处，请不吝赐教。
目录
前言NO.1如何自定义表单组件的表单验证规则表单Echo提交表单NO.2表格)NO.3 Spin组件封装优化结论
前言
开发一个后台管理系统，公司选择了Yan off the charts的Ant-Design-Vue作为整个项目的UI库，但谁曾想，黑暗中的坑一个接着一个，文档也没有那么细致，可能习惯element-ui的挖掘者也未必能很好的适应。本文将带你学习如何高效地使用Ant-Design-Vue。
NO.1 表单组件
首先，我们来说说最常用的表单组件的正确姿势：
先来看官方一段话述：
第一，我们不建议在表单中使用双向绑定。相同的数据可能在多个地方使用。如果使用双向绑定，那么数据修改会同时同步到所有组件，但这不是我们想要的。当表单提交成功、失败或被确认时，您应该同步数据。使用非双向绑定的表单，您将拥有控制数据修改/同步的最大权限。
第二，如果不使用表单的自动验证/收集功能，也就是不使用v-decorator修饰的组件，仍然可以使用v-model。
看了官方的建议，我们愉快地用v-decorator来修饰输入组件，代码如下：
表单项目
a输入
Placeholder=账号
V-decorator= [account ，{rules: [{required: true，white space: true，message:请输入您的登录帐户 }]]
/
/a表单项目
划重点：
v-decorator中的Account可以理解为input的名称值，下面的{}对象可以配置验证规则、初始值等参数。这里需要注意的是，使用v-decorator的组件不能使用v-model，也不能设置值和其他与值相关的属性，否则会报错。
V-decorator会自动将表单中的数据收集到表单对象中，所以不要忘记将以下代码添加到数据中：
形式：这个。$form.createForm(this)
模板上写着：
如何自定义表单校验规则
这里以确认密码为例：
a输入
type=password
V-decorator= [new _ password ，{rules: [{required: true，white space: true，message:请输入新密码 }，{validator: handlepass}]]
/
a输入
type=password
v-decorator=[ confirm _ password ，{rules: [{required: true，white space: true，message:请重复新密码 }，{ validator:handleConfirmPass }]]
/
这里我们使用validator checker来定制函数。
handlePass(规则，值，回调){
this.password=value
回调()；
},
handleConfirmPass(规则，值，回调){
if (this.password this.password！==值){
回拨(“与新密码输入不一致”)；
}
回调()；
},
注意这里必须调用callback()
这里的值是在相应的表单中输入的值，然后知道了这些，我们就可以编写自己的业务逻辑了。
图中显示了良好的结果：
表单回显
在编辑的时候，我们首先需要通过后端接口读取之前的数据，但是既然现在没有v-model，该怎么办呢？
可以在form对象中调用setFieldsValue直接设置后端返回的对象。如果是在mounted方法中，必须添加$nextTick，否则会抛出一个警告，说明我们在表单呈现之前就给出了数据。
如图所示：
图中的SetFieldsInitialValue是设置表单的初始值。如果表单中有重置按钮，则需要对其进行设置。reset按钮调用this.form.resetFields()来重置表单form。
这个setFieldsValue方法会将传递的对象的键与模板中v-decorator的第一个参数进行比较，并自动设置相应的值。
提交表单
添加html-type=submit 按钮后，点击会触发此方法。该方法会在验证表单中所有必填项正确后，自动帮助我们用v-decorator序列化表单中所有组件的值和名称，我们可以直接发送到后端。
NO.2 表格(Table)
我们的模板可以这样写：
Ant-design-vue的表格自带分页。接下来，我将逐一解释上图中的参数。columns是单元格信息，我们可以将其导出为数组，如下所示：
这里的标题是用户看到的文本，dataIndex要和后台传过来的字段一致，否则数据不会显示。其次，它还提供了customRender和scopedSlots来定制内容。这里，使用第一种方法，但值得一提的是如果使用的是slot-scope方式，在模板中定义一个点击事件，想要获取到当前行的数据时，一定一定不要加dataIndex属性，，否则将无法定义。
看一个使用scopedSlots的例子：
可以看到上面定义columns时给action没有加dataIndex
让我们继续看看什么是数据源。这是您传递给表的数据。
RowKey可以理解为时间循环所需的Key(必选)分页。初始化一个空对象滚动定义表并水平滚动。handleTableChange是分页数据更改时引发的事件。为了简化操作，我在这里封装了一个mixin。当页面中有表时，mixing mixin直接支持分页和拉取数据的逻辑。代码如下：
导出常量混合={
data() {
返回{
分页：{}，
数据：[]，
};
},
方法：{
handleTableChange(分页){
常量寻呼机={.this . pagination }；
pager . current=pagination . current；
this.pagination=pager
this.loadData({
page: pagination.current
});
},
async loadData(params={}) {
尝试{
const {data: table_data，total，per _ page }=await this . load method( flush in params？{第1页}:{第1页，params })；
常量分页={.this . pagination }；
pagination.total=total
pagination.pageSize=per _ page
params (pagination.current=1)中的“flush”；
this.data=table _ data
this.pagination=分页；
} catch (e) {
console . log(e)；
}
}
}
};
Flush用于识别是否插入或删除了新数据。如果是这样，我们就直接将page重置为1，返回第一页。
我们只需要在页面上使用以下几行代码：
从“@/api/api”导入{ get log }；
从“@/mixins”导入{ mixin }；
导出默认值{
名称：日志，
mixins: [mixin]，
data() {
返回{
列，
loadMethod: getLog
};
},
已安装(){
this . load data()；
}
};
其他类似的组件也可以直接重用这个逻辑。
NO.3 Spin组件
通常在后台管理系统中，全屏加载提示的掩膜层会出现在ajax请求过程中。在做这个功能的时候，想到了这个组件，然后去官方文档看操作方式如下图所示：
然后粘贴到代码里，各种操作，没有任何反应，有时候甚至有点错误。Spin组件肯定是有引入的，反正最后没用。无奈之下，我用他的风格写了一个Vue旋转插件：
让我们首先创建一个新的Loading.vue
模板
div v-if= show class= loading-container
div class=loading-mask/div
div class=正在加载-内容
A-spin提示=正在加载数据.size=大号
/旋转
/div
/div
/模板
脚本
导出默认值{
名称：正在加载，
道具：{
显示：布尔型，
},
data() {
返回{
}
}
}
/脚本
style lang=scss 范围。装载-集装箱{
位置：相对；
文本对齐：居中；
z指数：9999；装载-屏蔽{
位置：固定；
top:0；
底部：0；
左：0；
右：0；
背景色：rgba(0，0，0， 7)；
}。加载-内容{
位置：固定；
左：50%；
top:50%；
z指数：300；
transform: translate(-50%，-50%)；
文本对齐：居中；
颜色：# fff
}
}
/风格
然后创建新的Loading.js
从“Vue”导入Vue；
从导入loadingComponent。/loading . vue ；
const loading constructor=vue . extend(loading component)；
const instance=new loading constructor({
el: document.createElement(div )
});
instance.show=false//默认情况下隐藏
恒定载荷={
Show() {//显示方法
instance.show=true
document.body.appendChild(实例。$ El)；
},
Hide() {//隐藏方法
instance.show=false
}
};
导出默认值{
install() {
如果(！Vue。$loading) {
Vue。$loading=正在加载；
}
Vue.mixin({
已创建(){
这个。$loading=Vue。$加载；
}
});
}
};
然后在main.js中
从“@/components/Loading/Loading . js”导入加载；
Vue.use(加载)；
然后我们可以愉快地呼叫：
Vue。$ loading . show()；
打包优化
首先是使用官方快手提供的点播加载，这里就不赘述了。使用后，仍然存在以下问题：
Moment.js、lodash和dist of icon实际上占用了我们500KB的空间。这是无法忍受的，那我们该怎么办？
新网络包。IgnorePlugin(/^\.\/locale$/，/moment$/)，
让我们先忽略语言包，然后看看图标是如何优化的：
config.resolve .别名。set(@ )，resolve(src ))。set( @ ant-design/icons/lib/dist $ )，resolve(src/icon.js ))
我们还需要在src文件夹下添加一个icons.js文件。
//您自己的项目中使用的图标
从“@ ant-design/icons/lib/outline/user outline”中导出{默认为user outline }；
从“@ ant-design/icons/lib/fill/CloseCircleFill”中导出{默认为CloseCircleFill }；
从“@ ant-design/icons/lib/fill/InfoCircleFill”中导出{默认为InfoCircleFill }；
从“@ ant-design/icons/lib/fill/CheckCircleFill”中导出{默认为CheckCircleFill }；
我们还可以开启gzip压缩等。并使用DLL来优化我们的打包速度。这里不再赘述。社区里有很多类似的帖子。
结语
所以前两天ant-design-vue的使用感觉不是很舒服。现在我只能说真香。
其实用了这个UI库之后，你会发现表单forms的设计其实比v-model更好。以上是我的个人经验，希望大家给我们一个参考，多多支持。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。