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 事件觸發兩次，而且第二次沒有值；失焦時也會被清空;

　　問題案例跳轉：  點擊跳轉

　　解決方案： 暫時沒有找到源碼哪里出得問題，也沒有什么好辦法規避掉這種問題，目前使用的是正則 用兩個單引號 替換掉了 雙引號 ；暫未有什么好的想法，如果有好的想法歡迎評論分析；

　　解決后的案例入口:  點擊跳轉