在vue項(xiàng)目中使用element實(shí)現(xiàn)提示中英文

發(fā)布時(shí)間：2020-11-12 15:28:51 來(lái)源：億速云閱讀：872 作者：Leah 欄目：開(kāi)發(fā)技術(shù)

今天就跟大家聊聊有關(guān)在vue項(xiàng)目中使用element實(shí)現(xiàn)提示中英文，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

element默認(rèn)中文版，但是我們?cè)谧鲇⑽捻?yè)面時(shí)自己翻譯很不爽，所以我們用element自帶英文包，只要在html頁(yè)面中引入就可以了，

具體引入方法有很多種，在此提供了我用過(guò)的一種，僅作為參考使用：

補(bǔ)充知識(shí)：element-ui組價(jià)中表單的驗(yàn)證提示顯示后臺(tái)的提示信息及自定義提示

我在做這個(gè)的時(shí)候一個(gè)是分給我的那個(gè)頁(yè)面是有兩個(gè)接口的，所以提示信息就是根據(jù)接口的response.success 提示寫(xiě)一個(gè)提示語(yǔ)“XX已存在”如下：

html: 

<el-form :model="form" :rules="rules" ref="form" label-width="110px" autocomplete="false"> 
<el-form-item label="商戶(hù)名稱(chēng)" prop="name"> 
<el-input v-model="form.name" size="small" placeholder="請(qǐng)輸入商戶(hù)名稱(chēng)"></el-input> 
</el-form-item>
</el-form>

js:

寫(xiě)在data里面 

var judgeName = (rule, value, callback) =>{ 
    if(validateNull(value)){ 
   return callback(new Error("請(qǐng)輸入商戶(hù)名稱(chēng)"));
 
}else{
 
  repetitionName(this.form.id,this.form.name).then(response => { 
    if(response.success) { 
        if(response.data){ 
           return callback(new Error("商戶(hù)名稱(chēng)已存在")); 
        }else{ 
        callback(); 
        }
 
   } else { 
     callback(); 
  }
 
}); 
} 
}

rules

rules: { 
name: [ 
{ 
required: true, 
validator: judgeName, 
trigger: "blur" 
} 
] 
}

2:就是顯示后臺(tái)的提示信息

form-item里有個(gè)error的屬性，剛用elementUI的童鞋可能很容易忽略

在vue項(xiàng)目中使用element實(shí)現(xiàn)提示中英文

<el-form-item label="商戶(hù)名稱(chēng)" prop="name" :error="errorMsg"> 
<el-input v-model="form.name" size="small" placeholder="請(qǐng)輸入商戶(hù)名稱(chēng)"></el-input> 
</el-form-item>

error要在data里面定義一下不然會(huì)報(bào)錯(cuò)

channelAdd(this.form).then(response => {
       if (response.success) {
        //成功的結(jié)果
        this.$message({
         message: response.message,
         type: "success",
         duration: 2000
        });
       } else {
         //錯(cuò)誤信息
        this.errorMsg = response.message
       }
      });

看完上述內(nèi)容，你們對(duì)在vue項(xiàng)目中使用element實(shí)現(xiàn)提示中英文有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問(wèn)一下細(xì)節(jié)

在vue項(xiàng)目中使用element實(shí)現(xiàn)提示中英文

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽