Vue中使用 iview 之-踩坑日记
导航列表：
一、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 事件触发两次，而且第二次没有值；失焦时也会被清空;
问题案例跳转： 点击跳转
解决方案： 暂时没有找到源码哪里出得问题，也没有什么好办法规避掉这种问题，目前使用的是正则 用两个单引号 替换掉了 双引号 ；暂未有什么好的想法，如果有好的想法欢迎评论分析；
解决后的案例入口: 点击跳转
