Vue中使用 iview 之-踩坑日记

导航列表：

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

      selectList:[
        {
          value:'0',
          label:'北京'
        },
        {
          value:'1',
          label:'上海'
        },
        {
          value:'2',
          label:'广州'
        }
      ],

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

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

　　3、自定义验证

{ 
  required: true, 
  message: 'Please select the city', 
  trigger: 'change',
  validator(value, rule, cb){
    console.log(value);
    if(typeof value === 'number'){
      cb()；
    }else{
      cb('不能为空')
    }
  } 
}

二、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中的地址也是可用的；

<template>
    <div>
        <Upload
            :before-upload="handleUpload"
            :on-error="handleError"
            :on-success="handleSuccess"
            action="//jsonplaceholder.typicode.com/posts/">
            <Button icon="ios-cloud-upload-outline">上传文件</Button>
        </Upload>
  </div>
</template>
<script>
    export default {
        methods: {
            async handleUpload (file) {
　　　　　　　　　　　　//已经返回false
                return false;
            },
            handleSuccess(res, file, fileList){
              console.log(res,'success')
            },
            handleError(err){
              console.log(err,'错误')
            },
        }
    }
</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 事件触发两次，而且第二次没有值；失焦时也会被清空;

　　问题案例跳转：  点击跳转

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

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