vue.js+element 默认提示中英文操作


Posted in Javascript onNovember 11, 2020

element默认中文版,但是我们在做英文页面时自己翻译很不爽,所以我们用element自带英文包,只要在html页面中引入就可以了,

具体引入方法有很多种,在此提供了我用过的一种,仅作为参考使用:

vue.js+element 默认提示中英文操作

补充知识:element-ui组价中表单的验证提示显示后台的提示信息及自定义提示

我在做这个的时候一个是分给我的那个页面 是有两个接口的,所以提示信息就是根据接口的response.success 提示 写一个提示语“XX已存在”如下:

html:

<el-form :model="form" :rules="rules" ref="form" label-width="110px" autocomplete="false"> 
<el-form-item label="商户名称" prop="name"> 
<el-input v-model="form.name" size="small" placeholder="请输入商户名称"></el-input> 
</el-form-item>
</el-form>

js:

写在data里面 ​

var judgeName = (rule, value, callback) =>{ 
    if(validateNull(value)){ 
   return callback(new Error("请输入商户名称"));
 
}else{
 
  repetitionName(this.form.id,this.form.name).then(response => { 
    if(response.success) { 
        if(response.data){ 
           return callback(new Error("商户名称已存在")); 
        }else{ 
        callback(); 
        }
 
   } else { 
     callback(); 
  }
 
}); 
} 
}

rules

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

2:就是显示后台的提示信息

form-item里有个error的属性,刚用elementUI的童鞋可能很容易忽略

vue.js+element 默认提示中英文操作

<el-form-item label="商户名称" prop="name" :error="errorMsg"> 
<el-input v-model="form.name" size="small" placeholder="请输入商户名称"></el-input> 
</el-form-item>

error要在data里面定义一下不然会报错

channelAdd(this.form).then(response => {
       if (response.success) {
        //成功的结果
        this.$message({
         message: response.message,
         type: "success",
         duration: 2000
        });
       } else {
         //错误信息
        this.errorMsg = response.message
       }
      });

以上这篇vue.js+element 默认提示中英文操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
ie6下png图片背景不透明的解决办法使用js实现
Jan 11 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
jQuery+CSS实现一个侧滑导航菜单代码
May 09 Javascript
JavaScript仿网易选项卡制作代码
Oct 06 Javascript
js实现显示手机号码效果
Mar 09 Javascript
jQuery ajax动态生成table功能示例
Jun 14 jQuery
Bootstrap Multiselect 常用组件实现代码
Jul 09 Javascript
Angular实现点击按钮后在上方显示输入内容的方法
Dec 27 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
解决vue侦听器watch,调用this时出现undefined的问题
Oct 30 Javascript
Vue 解决在element中使用$notify在提示信息中换行问题
Nov 11 #Javascript
vue 实现element-ui中的加载中状态
Nov 11 #Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
Nov 11 #Javascript
JS前端基于canvas给图片添加水印
Nov 11 #Javascript
vant-ui框架的一个bug(解决切换后onload不触发)
Nov 11 #Javascript
使用Vant完成Dialog弹框案例
Nov 11 #Javascript
vue实现lodop打印功能的示例
Nov 11 #Javascript
You might like
S900/ ETON E1-XM 收音机
2021/03/02 无线电
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
浅析JavaScript中的隐式类型转换
2013/12/05 Javascript
深入理解JQuery keyUp和keyDown的区别
2013/12/12 Javascript
jQuery实现HTML5 placeholder效果实例
2014/12/09 Javascript
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery对JSON数据进行排序输出的方法
2015/06/24 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
基于JQuery和CSS3实现仿Apple TV海报背景视觉差特效源码分享
2015/09/21 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
JavaScript函数参数的传递方式详解
2017/03/06 Javascript
一文让你彻底搞清楚javascript中的require、import与export
2017/09/24 Javascript
详解Vue文档中几个易忽视部分的剖析
2018/03/24 Javascript
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
js中int和string数据类型互相转化实例
2019/01/16 Javascript
JS实现带阴历的日历功能详解
2019/01/24 Javascript
javascript中的this作用域详解
2019/07/15 Javascript
javascript简单实现深浅拷贝过程详解
2019/10/08 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
2020/08/03 Javascript
python将unicode转为str的方法
2017/06/21 Python
Python 12306抢火车票脚本
2018/02/07 Python
CSS类名支持中文命名的示例
2014/04/04 HTML / CSS
利用HTML5+CSS3实现3D转换效果实例详解
2017/05/02 HTML / CSS
利用HTML5 Canvas制作一个简单的打飞机游戏
2015/05/11 HTML / CSS
THE OUTNET英国官网:国际设计师品牌折扣网站
2016/08/14 全球购物
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
英国女鞋购物网站:Moda in Pelle
2019/02/18 全球购物
Woods官网:加拿大最古老、最受尊敬的户外品牌之一
2020/09/12 全球购物
岗位竞聘演讲稿
2014/01/10 职场文书
租房协议书
2014/09/12 职场文书
倡议书的格式写法
2015/04/28 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
redis中lua脚本使用教程
2021/11/01 Redis
MySQL约束(创建表时的各种条件说明)
2022/06/21 MySQL