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 相关文章推荐
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
Oct 01 Javascript
根据选择不同的下拉值出现相对应的文本输入框
Aug 01 Javascript
学习javascript面向对象 掌握创建对象的9种方式
Jan 04 Javascript
详解angularjs利用ui-route异步加载组件
May 21 Javascript
Vue.Draggable实现拖拽效果
Jul 29 Javascript
解决在vue项目中,发版之后,背景图片报错,路径不对的问题
Mar 06 Javascript
vue中关闭eslint的方法分析
Aug 04 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
Sep 26 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
js正则表达式简单校验方法
Jan 03 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
WindowsXP中快速配置Apache+PHP5+Mysql
2008/06/05 PHP
php中对xml读取的相关函数的介绍一
2008/06/05 PHP
细谈php中SQL注入攻击与XSS攻击
2012/06/10 PHP
php 无限级分类,超级简单的无限级分类,支持输出树状图
2014/06/29 PHP
php 查找数组元素提高效率的方法详解
2017/05/05 PHP
JavaScript更改class和id的方法
2008/10/10 Javascript
Javascript 面向对象之重载
2010/05/04 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
js动态在form上插入enctype=multipart/form-data的问题
2012/05/24 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
JS连接SQL数据库与ACCESS数据库的方法实例
2013/11/21 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
JS函数arguments数组获得实际传参数个数的实现方法
2016/05/28 Javascript
使用bootstrap typeahead插件实现输入框自动补全之问题及解决办法
2016/07/07 Javascript
浅谈移动端之js touch事件 手势滑动事件
2016/11/07 Javascript
原生JS实现圆环拖拽效果
2017/04/07 Javascript
vue axios同步请求解决方案
2017/09/29 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
Vue3.0数据响应式原理详解
2019/10/09 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Python中使用dom模块生成XML文件示例
2015/04/05 Python
从零开始学Python第八周:详解网络编程基础(socket)
2016/12/14 Python
python函数中return后的语句一定不会执行吗?
2017/07/06 Python
Ubuntu下Anaconda和Pycharm配置方法详解
2019/06/14 Python
构建高效的python requests长连接池详解
2020/05/02 Python
使用 django orm 写 exists 条件过滤实例
2020/05/20 Python
Probikekit欧盟:在线公路自行车专家
2019/07/12 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
研究生自我鉴定范文
2013/10/30 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
中介业务员岗位职责
2014/04/09 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
教师理论学习心得体会
2016/01/21 职场文书
十大经典日本动漫排行榜 海贼王第三,犬夜叉仅第八
2022/03/18 日漫
游戏《铁拳》动画化!2022年年内播出
2022/03/21 日漫