嘿，AntDesignVue上手就掉坑

握风
188 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情

本文采用的ant-design-vue 版本为v1.5.0；其他版本可能略有不同，请知晓

身为一个后端，没事时候学一点前端的东西还是很有必要的，毕竟全栈，啥都要懂一点
学的精不精不说，起码上项目没啥问题就行
先能干活，然后边学边干，熟能生巧嘛

直接根据遇到的错误开始

表单组件报错：Cannot read property 'install' of undefined

js文件有问题？
于是看了下项目中package.json配置文件，看到antDesignVue版本1.4.12
而我看的文档是1.5.0+ image.png

不用想，直接升级本地的UI组件版本（可以直接手动修改package.json） image.png

删掉node_modules文件夹
终端运行命令npm i 或 npm install

这里说明一下上面的两条命令，npm i是简写的形式，我一般都偷懒用它。但是要细说，这两条命令其实还是有一点区别的，具体可自行查文档，普通使用没什么问题！掘金前端大佬多，我就不深入了...

上面执行完后，目录会多个node_modules文件夹
继续终端运行命令npm run serve，项目恢复正常

表单框textarea使用maxLength属性使用报错

<a-form-model-item label="评论" prop="textarea">
  <a-input @input="changeVal" 
              v-model="form.comment" 
              ref="textarea" type="textarea" 
              maxLength="60" 
              placeholder="请输入评论内容" 
              allowClear />
  <div class="textLimit">{{limitNum}} / 60</div>
</a-form-model-item>

这个报错看一下就知道啥意思了
解决办法：
在maxLength左侧加个英文冒号（这样引号就没有字符串的意思了，意思为动态绑定属性）
当然也可以把引号去掉，或者干脆在data中写一个变量（必须为数字类型的），maxLength右侧放一个变量名也行 image.png

经测试，项目正常运行

textarea验证报错

image.png

事实证明，这是一个低级错误

//html
<a-form-model-item label="评论" prop="textarea">
  <a-input @input="changeVal" v-model="form.comment" ref="textarea" type="textarea" :maxLength="60" 
           placeholder="请输入评论内容" allowClear />
</a-form-model-item>

//js
rules: {
  textarea: [
    { required: true, message: '请填写评论内容', trigger: 'blur' },
    { min: 1, max: 60, message: '最多60个字符', trigger: 'blur' }
  ]
},

看到问题没
prop、v-model、rules三者绑定的变量名居然不一致....
改一致后，恢复正常 image.png

使用FormModel和Form的一个报错：未充分理解两者的区别

使用FormModel时 1586242495000-21ed106d-4cc7-4503-bd12-e2f624943469.gif

发现问题没？

form表单数据会导致我comments数组中数据跟他同步，如果每次发言完清空表单（用resetFields()），那comments就增加了一个空对象，且再次填写表单时，comments中所有对象都会跟他同步，这也就是双向绑定导致的麻烦吧，这个效果并不是我想要的！

使用Form
这里会跟上面用法有点不一样
（1）textarea写法不一样
FormModel：使用 a-input 标签，添加属性 type="textarea"

<a-form-model-item label="评论" prop="comment">
  <a-input 
           @input="changeVal"
           v-model="form.comment"
           ref="textarea"
           type="textarea"
           :maxLength="60" 
           placeholder="请输入评论内容"
           allowClear />
</a-form-model-item>

Form：使用 a-textarea 标签

<a-form-item label="评论">
  <a-textarea
              :Rows="5"
              @input="changeVal" 
              :maxLength="60" 
              v-decorator="['comment',{rules:[{required:true,message:'请输入评论内容'},{min:3,max:60,message:'字数在3-60之间'}]}]"
              placeholder="请输入评论内容" 
              allowClear />
</a-form-item>

注：allowClear属性：当表单框非空时，右侧会多一个x，可用于快速清空表单框内容

（2）表单最外围标签中存储form（data集） 的属性名不同，且数据初始化方式不同
FormModel：:model 属性

<a-form-model ref="ruleForm" :rules="rules" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
...
</...

//数据初始化：直接写成对象形式即可
form: {
  name: '',
    comment: ''
},

Form：:form 属性

<a-form :form="form" :label-col="labelCol" :wrapper-col="wrapperCol">
....

//数据初始化
form: this.$form.createForm(this)

综上，没啥特别的需求，推荐使用Form，简单好用

好了，表单搞清楚了，再看看布局，基本就能做项目了....玩起来

最终小demo效果图 11.gif

这就算入门了

最后，想说：ant的框架还是很好的，最重要还支持响应式自适应

文末总结

其实很多人在接触一个框架或一个新的语言时，开始都尽善尽美，对自己要求非常高
导致没学几天，达不到自己目标或者越学越累，就放弃了
其实大可不必，不如学学古人，"好读书不求甚解"
如文中开头所说，先把项目跑起来，再慢慢细化，开始慢，后面就越来越快了
谁不是一步三个坑过来的，不要嫌弃自己菜，不学习才是真的菜

avatar
文章
阅读
粉丝