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 实现Tab效果 思路是js思路
Mar 02 Javascript
js Array对象的扩展函数代码
Apr 24 Javascript
jQuery中:file选择器用法实例
Jan 04 Javascript
浅谈js基本数据类型和typeof
Aug 09 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
Sep 08 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
Javascript数组方法reduce的妙用之处分享
Jun 10 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 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
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
thinkphp中html:list标签传递多个参数实例
2014/10/30 PHP
php继承中方法重载(覆盖)的应用场合
2015/02/09 PHP
php和editplus正则表达式去除空白行
2015/04/17 PHP
PHP简单获取多个checkbox值的方法
2016/06/13 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
PHP二维数组矩形转置实例
2016/07/20 PHP
在网页中屏蔽快捷键
2006/09/06 Javascript
javaScript 简单验证代码(用户名,密码,邮箱)
2009/09/28 Javascript
jQuery的实现原理的模拟代码 -2 数据部分
2010/08/01 Javascript
原生javascript实现无间缝滚动示例
2014/01/28 Javascript
js中top的作用深入剖析
2014/03/04 Javascript
js实现方块上下左右移动效果
2017/08/17 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
微信小程序实现登录注册tab切换效果
2020/12/29 Javascript
vue实现条件叠加搜索的解决方法
2019/05/28 Javascript
使用ThinkJs搭建微信中控服务的实现方法
2019/08/08 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
Python中的exec、eval使用实例
2014/09/23 Python
python通过BF算法实现关键词匹配的方法
2015/03/13 Python
python使用PyGame模块播放声音的方法
2015/05/20 Python
Django中使用locals()函数的技巧
2015/07/16 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
opencv-python的RGB与BGR互转方式
2020/06/02 Python
CSS3实现水平居中、垂直居中、水平垂直居中的实例代码
2020/02/27 HTML / CSS
屈臣氏泰国官网:Watsons TH
2021/02/23 全球购物
金属材料工程毕业生个人的自我评价
2013/11/28 职场文书
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
教师实习自我鉴定
2013/12/13 职场文书
社区工作者演讲稿
2014/05/23 职场文书
2014年六一儿童节演讲稿
2014/05/23 职场文书
体育馆的标语
2014/06/24 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
ICOM R71E和R72E图文对比解说
2022/04/07 无线电
html用代码制作虚线框怎么做? dw制作虚线圆圈的技巧
2022/12/24 HTML / CSS