导航列表:
- 一、iview单选框Select验证问题
- 二、iview表单v-if引起的问题
- 三、Upload 手动上传组件 使用是出现的问题
- 四、Tabs嵌套使用时的问题
- 五、Tooltip 换行问题
- 六、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 手动上传组件 使用是出现的问题:
回到顶部 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>
函数使用 async 被调用时,再未被处理时结果会直接返回 promise
四、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 事件触发两次,而且第二次没有值;失焦时也会被清空;
问题案例跳转: 点击跳转
解决方案: 暂时没有找到源码哪里出得问题,也没有什么好办法规避掉这种问题,目前使用的是正则 用两个单引号 替换掉了 双引号 ;暂未有什么好的想法,如果有好的想法欢迎评论分析;
解决后的案例入口: 点击跳转