iview安装使用以及遇到的问题汇总（持续更新）

安装：

npm install iview --save

引入：

1.全局引用

import Vue from 'vue';
import iView from 'iview';
import 'iview/dist/styles/iview.css'  //iview的样式文件，必须引入
Vue.use(iView);

2.按需引入

// 在需要的地方按需引入
import Vue from 'vue';
import { Button, Table } from 'iview';
Vue.component('Button', Button);
import 'iview/dist/styles/iview.css'//需要在main.js中引入
Vue.component('Table', Table);

3.遇到的问题

Parsing error: x-invalid-end-tag

在使用iview的过程中都是参考官方文档，但是这里有个很大的坑，在我们看到的文档有英文版和中文版，中文版里给出的案例都是在线引用的方式的例子，而我们是在vue中作为项目引入的，所以不能参照中文版，这里推荐大家看英文版就好了，其次在引入iview后我们会发现在项目中使用Col和Input标签时，vscode的语法检查会报错，这里我先声明一下我用的eslint的检测以及vetur作为模板规范，和两款插件都会让iview的部分标签报错，这里给出解决办法

首先在.eslintrc.js中添加如下配置

'vue/no-parsing-error': [2, { 'x-invalid-end-tag': false }]

这句话会关闭eslint的语法报错，让我们执行npm run dev 时可以顺利通过

但是仅仅这样还是不够的，我们还有vetur这个模板格式化插件会报错，这里我们在文件->首选项->设置里找到setting.json这个配置文件，添加下面这行来关闭vetur的检查，到这里就可以了，我们还需要重新跑一下程序，并重新打开报错的文件，你会发现红色消失了。

"vetur.validation.template": false

第二个问题，main.js中引入iview后，运行项目报错，告诉我们iview未定义，看到错误的我一脸懵逼，上面不是清清楚楚定义好的吗，怎么就报错了，折腾了一番后发现是被官方文档坑了。

import iView from 'iview';

我们很自然的引入iview，但是文档告诉我们，我们还可以在.babelrc文件中通过配置来进行局部引入，我就很乖巧的也去配置了一下，结果可想而知，就产生了上面的问题，当我们确定全局引用时，这个配置文件我们是不需要的，因为它会引起冲突，所以这里还要请大家注意。

第三个问题，验证input输入框输入数值时验证数值上限和下限

在type='number'的格式下进行自定义验证规则：

      <FormItem label="数字验证"prop="threshold"><Input v-model="formValidate.threshold"type="number"placeholder="单位1dB"style="width:120px"></Input></FormItem>

在data中自定义验证规则：

const validateMobile = (rule, value, callback) => {if (parseInt(value) < 0) {callback(new Error('数值不能为负'))} else {callback()}}

然后在下面校验规则上添加自定义的规则

ruleValidate{threshold: [{ required: true, message: '输入数字', trigger: 'blur' },{ validator: validateMobile, trigger: 'blur' }]
}

第四个问题 在模态框中添加表单，更改模态框自己的点击行为，先验证表单，严重通过后在关闭模态框。

因为iview自带的模态框当点击取消或者确定按钮后，会默认将模态框的状态置为false，即取消模态框。
当我们想要在弹出框中加一些表单验证的话就需要先严重表单，再关闭模态框，于是我们就需要更改默认方式。

首先我们在methods中定义改变加载状态的方法

changeLoading () {// 避免点击确定模态框直接关闭this.loading = falsethis.$nextTick(() => {this.loading = true})
},

然后在我们的表单数据验证通过后将对话框隐藏

setTimeout(() => {this.changeLoading()// 清空表单，避免下次残留上次的值(这一部分看自己需求)this.handleReset('formValidate')this.modal1 = falsethis.$Message.success({content: '指令发送成功',duration: 1})}, 500)
// 如果验证失败可以在函数中返回 ，调用下面这句，具体逻辑视情况而定
return this.changeLoading()

iview安装使用以及遇到的问题汇总（持续更新）相关推荐

iOS精品资源汇总(持续更新)
文章目录引言 I.iOS自定义视图相关热门资源 1.1 <用户协议及隐私政策>弹框 1.2 电子签名 1.3 商品详情页 1.4 上传图片视图的封装[支持删除和添加] 1.5 查看风险商 ...
【帆软报表】使用技巧及常见问题汇总-持续更新
[帆软报表]使用技巧及常见问题汇总-持续更新 1.重复与冻结设置,做用:冻结区域模板-重复与冻结设置 2.单元格有效小数设置选中单元格-格式-数字-#0.00 3.图表中有效小数设置图表属性表- ...
Telegram Android源码问题汇总持续更新
libtgvoip目录为空 git clone下来的工程中带有submodule时,submodule的内容没有下载下来,执行如下命令 cd Telegram git submodule update ...
吉大计算机专硕报录比,22考研院校报录比汇总(持续更新)
该楼层疑似违规已被系统折叠隐藏此楼查看此楼 22考研院校报录比汇总(持续更新) 每个考研的小伙伴最关心的就是你所报考学校的报录比,因为这直接关系到你报考院校的难易程度,从中可以看出各高校的整体录取情 ...
Unity学习知识和链接汇总-持续更新
Unity学习知识和链接汇总-持续更新 Unity Scripting Reference- https://docs.unity3d.com/Manual/index.html gitee http ...
【教程汇总+持续更新】Unity游戏开发从入门到入坟
新的一年,本该在年前整理的年终总结被拖到了年后开工.去年大量时间投入在Catlike教程的翻译上,截止目前位置,教程的进度已经完全追平原作者. 去年还有一部分是断断续续的更新SLG实战教程,但遗憾的是 ...
unity ui框架_[教程汇总+持续更新]Unity从入门到入坟——收藏这一篇就够了
----------------塔防(更新中),作者重写了基础篇(下方目录为:1.1(新) 基础)目前还在持续连载了5篇,因为不多我们更新完就能追到原作者的进度了------------------- ...
YOLO 3/4/5/6/7/x、Efficient、MaskRcnn、FasterRcnn、FCOS、SSD、M2Det、Retina、CenterNet、PicoDet等系列数据模型汇总持续更新中
做了很长时间的CV领域的任务了,见到了很多不错的项目,很多时候也是会选择直接拿来开源的项目去使用,自己也做过了很多项目,后面就萌生了一个想法,将看到的不错的文章或者是数据集或者是项目汇总记录一下,以便 ...
Ios-视频直播-知识点汇总-持续更新
最近公司要求做视频直播,之前工作几年,视频一直都是弱项,没怎么接触过,现在正好有机会深入的去了解一下,记录一些遇到的坑和需要用到的东西. ~公司要求,用HLS协议,要求可以播放m3u8格式的,当时一听 ...

iview安装使用以及遇到的问题汇总（持续更新）

iview安装使用以及遇到的问题汇总（持续更新）相关推荐

最新文章

热门文章