Vue中使用 iview 之-踩坑日记

2019/03/20 13:36
阅读数 472

导航列表:

  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>

 

上面的代码明明在上传前 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 事件触发两次,而且第二次没有值;失焦时也会被清空;

  问题案例跳转:  点击跳转

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

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

  

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
1 收藏
0
分享
返回顶部
顶部