导航列表:

  1. 一、iview单选框Select验证问题
  2. 二、iview表单v-if引起的问题
  3. 三、Upload 手动上传组件 使用是出现的问题
  4. 四、Tabs嵌套使用时的问题
  5. 五、Tooltip 换行问题
  6. 六、Select框远程搜索问题

一、iview单选框Select验证问题

回到顶部

先看下基本案例:

//template中
<Select v-model="formValidate.city" placeholder="Select your city">
<Option v-for="item in selectList" :value="item.value">{{item.label}}</Option>
</Select> //遍历的数组信息
selectList:[
  {
    value:0,
    label:'北京'
  },
  {
    value:1,
    label:'上海'
  },
  {
    value:2,
    label:'广州'
  }
] //表单验证
{ required: true, message: 'Please select the city', trigger: 'change' }

  

  完整案例地址:https://run.iviewui.com/ySGFAEoH

  上面的案例不管如何选择,它都会报错,为什么会一直报错呢?代码看起来也没有问题!!!

  在iview中默认校验value数据类型为String,上面的出现的问题就是因为value的类型为Number,所以才会一之出错;

  解决办法有两种:

  1、把value的类型改成String 点击跳转到此案例demo

 1       selectList:[
2 {
3 value:'0',
4 label:'北京'
5 },
6 {
7 value:'1',
8 label:'上海'
9 },
10 {
11 value:'2',
12 label:'广州'
13 }
14 ],

  2、修改表单验证的类型  点击跳转到此案例demo

1 //添加 type:'number'
2 { type:'number',required: true, message: 'Please select the city', trigger: 'change' }

  3、自定义验证

 1 {
2 required: true,
3 message: 'Please select the city',
4 trigger: 'change',
5 validator(value, rule, cb){
6 console.log(value);
7 if(typeof value === 'number'){
8 cb();
9 }else{
10 cb('不能为空')
11 }
12 }
13 }

二、iview表单v-if引起的问题

回到顶部

  选中不同的值提交试试:明明表单验证生效了DOM也改变了,却没有去掉*号,代码中明明用了v-if 进行从新创建新的DOM却还是有问题;

  代码逻辑看起来明明也没有什么问题,看一下这个问题的案例 此案例demo点击跳转

<template>
<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
<FormItem label="城市" prop="city">
<RadioGroup v-model="formValidate.city">
<Radio label="1">北京</Radio>
<Radio label="2">上海</Radio>
</RadioGroup>
</FormItem>
<FormItem label="描述1" prop="desc" v-if="formValidate.city==='1'">
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem label="描述2" v-else>
<Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
<Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
</FormItem>
<div>
选中不同的城市提交试试:明明表单验证生效了DOM也改变了,却没有去掉*号
</div>
</Form>
</template>
<script>
export default {
data () {
return {
formValidate: {
city: '1',
desc: ''
},
ruleValidate: {
city: [
{ required: true, message: 'Please select gender', trigger: 'change' }
],
desc: [
{ required: true, message: 'Please enter a personal introduction', trigger: 'blur' },
{ type: 'string', min: 20, message: 'Introduce no less than 20 words', trigger: 'blur' }
]
}
}
},
methods: {
handleSubmit (name) {
this.$refs[name].validate((valid) => {
if (valid) {
this.$Message.success('Success!');
} else {
this.$Message.error('Fail!');
}
})
},
handleReset (name) {
this.$refs[name].resetFields();
}
}
}
</script>

  这个问题引起的原因是因为:虚拟DOM渲染有关,具体详细的底层原理自己可以去看下,我只说解决办法:

  给v-if的标签添加key值记得不要写一样的,从而让浏览器创建新的DOM,而不是值更换内容,这个原理跟v-for的很像         解决后的案例demo,点击跳转

  <FormItem label="描述1" :key="'test1'" prop="desc" v-if="formValidate.city==='1'">
    <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
  </FormItem>
  <FormItem label="描述2" :key="'test2'" v-else>
    <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
  </FormItem>

三、Upload 手动上传组件 使用是出现的问题:

回到顶部

  Upload组件的使用,大家可以看下代码有什么问题吗?下面代码觉得会执行什么结果?已在before-upload上传前返回 false ; action中的地址也是可用的;
 1 <template>
2 <div>
3 <Upload
4 :before-upload="handleUpload"
5 :on-error="handleError"
6 :on-success="handleSuccess"
7 action="//jsonplaceholder.typicode.com/posts/">
8 <Button icon="ios-cloud-upload-outline">上传文件</Button>
9 </Upload>
10 </div>
11 </template>
12 <script>
13 export default {
14 methods: {
15 async handleUpload (file) {
            //已经返回false
16 return false;
17 },
18 handleSuccess(res, file, fileList){
19 console.log(res,'success')
20 },
21 handleError(err){
22 console.log(err,'错误')
23 },
24 }
25 }
26 </script>
上面代码 demo :  https://run.iviewui.com/oYDVMQte
上面的代码明明在上传前 before-upload 中返回 false; 出现上面的问题原因是因为在before-upload函数中使用时加上了 async ,iview内部解析的不够严谨导致的;看一下iview中的源码是如何写的:

函数使用 async 被调用时,再未被处理时结果会直接返回 promise

  

而结果的  .then 也会生成
         
 
所以iview内部代码通过第一个判断让函数继续往后运行;所以在使用时无法在上传前函数中使用 async ,或者你自己另行封装使用;

四、Tabs嵌套使用时的问题:

回到顶部

问题:当Tabs被嵌套使用时会导致内部的tabs选项渲染到最外层上面,导致无法正常使用。

  该问题案例:点击跳转

那么该如何解决呢?

  给Tabs加一个name属性和TabPane加一个tab属性,两者值要一样;

 <Tabs value="name1" name="test1">
<TabPane label="标签一" name="name1" tab="test1">标签一的内容</TabPane>
<TabPane label="标签二" name="name2" tab="test1">标签二的内容</TabPane>
<TabPane label="标签三" name="name3" tab="test1">标签三的内容</TabPane>
</Tabs>

  解决后的案例:点击跳转

Tooltip 换行问题

回到顶部

//代码中我已按照iview官网说明加入了white-space: normal;进行换行,但网址却没有进行换行;
<template>
<Tooltip>
A balloon appears when the mouse passes over this text
<div slot="content" style="white-space: normal;">
<p>
Here is the prompt text A balloon appears when the mouse passes over this text;
</p>
<p>
https://run.iviewui.com///run.iviewui.com///run.iviewui.com///run.iviewui.com///run.iviewui.com///run.iviewui.com///run.iviewui.com/
</p>
</div>
</Tooltip>
</template>
<script>
export default { }
</script>
 

  此案例入口: 点击跳转

  因为网址不会自动换行需要加入word-break: break-all;

  解决后的案例入口:点击跳转

六、Select框远程搜索问题

回到顶部

  问题描述: 在使用iview远程搜索时,如果你的的列表项 label 中出现 ""号会导致 change 事件触发两次,而且第二次没有值;失焦时也会被清空;

  问题案例跳转:  点击跳转

  解决方案: 暂时没有找到源码哪里出得问题,也没有什么好办法规避掉这种问题,目前使用的是正则 用两个单引号 替换掉了 双引号 ;暂未有什么好的想法,如果有好的想法欢迎评论分析;

  解决后的案例入口:  点击跳转

  

Vue中使用 iview 之-踩坑日记的更多相关文章

  1. vue +ts 的一次踩坑日记

    在vue的方法里面写事件的时候比如写一个路由跳转,方法大概如下:  goBack1() {            console.log(this);            this.$router. ...

  2. AI相关 TensorFlow -卷积神经网络 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  3. 人工智能(AI)库TensorFlow 踩坑日记之一

    上次写完粗浅的BP算法 介绍 本来应该继续把 卷积神经网络算法写一下的 但是最近一直在踩 TensorFlow的坑.所以就先跳过算法介绍直接来应用场景,原谅我吧. TensorFlow 介绍 TF是g ...

  4. hexo博客谷歌百度收录踩坑日记

    title: hexo博客谷歌百度收录踩坑日记 toc: false date: 2018-04-17 00:09:38 百度收录文件验证 无论怎么把渲染关掉或者render_skip都说我的格式错误 ...

  5. VUE中实现iview的图标效果时遇到的一个问题

    [Vue warn]: You are using the runtime-only build of Vue where the template compiler is not available ...

  6. Vue中的slot(占坑,预留位置)

    Vue中的slot(占坑,预留位置) 子模板不使用slot 子模板使用slot 子模板使用使用name属性,且传递data 文件名:Slots.vue //slot组件 <template> ...

  7. Hexo搭建静态博客踩坑日记(二)

    前言 Hexo搭建静态博客踩坑日记(一), 我们说到利用Hexo快速搭建静态博客. 这节我们就来说一下主题的问题与主题的基本修改操作. 起步 chrome github hexo git node.j ...

  8. Hexo搭建静态博客踩坑日记(一)

    前言 博客折腾一次就好, 找一个适合自己的博客平台, 专注于内容进行提升. 方式一: 自己买服务器, 域名, 写前端, 后端(前后分离最折腾, 不分离还好一点)... 方式二: 利用Hexo, Hug ...

  9. JavaScript 新手的踩坑日记

    引语 在1995年5月,Eich 大神在10天内就写出了第一个脚本语言的版本,JavaScript 的第一个代号是 Mocha,Marc Andreesen 起的这个名字.由于商标问题以及很多产品已经 ...

随机推荐

  1. 【Android面试揭秘】面试官说“回去等通知”,我到底会不会等来通知?

    前言 大部分情况下,面试结束后,面试官都会跟你说:我们会在1-2个工作日内通知你面试结果. 许多人认为:所谓「等通知」其实是面试官委婉地给你「发拒信」.但是,这不是「等通知」的全部真相. 这篇文章,我 ...

  2. TestNG注释@BeforeGroups与@AfterGroups不执行的处理

    在学习TestNG框架注解时发现在执行以下的代码 package com.groups; import org.testng.annotations.AfterGroups; import org.t ...

  3. 5.1 剑指 Offer 03. 数组中重复的数字

    类型题:剑指 Offer 03. 数组中重复的数字 找出数组中重复的数字.在一个长度为 n 的数组 nums 里的所有数字都在 0-n-1 的范围内.数组中某些数字是重复的,但不知道有几个数字重复了, ...

  4. js引用类型深拷贝、浅拷贝方法封装

    引用类型的深拷贝.浅拷贝在前端领域一直是个很重要的知识点,不仅在业务中频繁使用,也是面试官们喜欢考的的知识点之一.本篇将封装引用类型的深拷贝.浅拷贝方法,并解决在封装过程中出现的问题. 一.浅拷贝 浅 ...

  5. 算法竞赛中的常用JAVA API :HashMap 和 TreeMap(转载)

    算法竞赛中的常用JAVA API :HashMap 和 TreeMap 摘要 本文主要介绍Map接口下的HashMap和TreeMap. HashMap HashMap是基于哈希表的 Map 接口的实 ...

  6. Ubuntu上安装gevent

    安装libevent; 安装greenlet: sudo easy_install gevent (need net access) bingo! -> python-dev -> lib ...

  7. Golang语言系列-09-接口

    接口 接口的定义和实现 package main import "fmt" /* [接口] 接口(interface)定义了一个对象的行为规范,只定义规范不实现,由具体的对象来实现 ...

  8. 常见的六种容错机制:Fail-Over、Fail-Fast、Fail-Back、Fail-Safe,Forking 和 Broadcast

    目录 1.Fail-Over:故障转移 2.Fail-Fast:快速失败 3.Fail-Back:失效自动恢复 4.Fail-Safe:失效安全 5.Forking:并行调用多个服务 6.Broadc ...

  9. STM32—驱动HC-SR04超声波测距模块

    文章目录 超声波测距原理 HC-SR04工作原理 STM32实现驱动 1.引脚的配置 2.时序控制 3.时间差测量 4.如何将距离测出来 超声波测距原理 利用HC-SR04超声波测距模块可以实现比较精 ...

  10. Xilinx约束学习笔记(一)—— 约束方法学

    <Xilinx约束学习笔记>为自己阅读 Xilinx 官方 UG903 文档后的学习笔记,大多数为翻译得来,方便大家学习. 1 约束方法学 1.1 组织约束文件 Xilinx 建议将时序约 ...