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实例教程(19) 使用HoTMetal(6)
Dec 23 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
JS+XML 省份和城市之间的联动实现代码
Oct 14 Javascript
JS图像无缝滚动脚本非常好用
Feb 10 Javascript
js实现字符串和数组之间相互转换操作
Jan 12 Javascript
基于jQuery的网页影音播放器jPlayer的基本使用教程
Mar 08 Javascript
Easyui ueditor 整合解决不能编辑的问题(推荐)
Jun 25 Javascript
vue实现提示保存后退出的方法
Mar 15 Javascript
JS实现的缓冲运动效果示例
Apr 30 Javascript
详解Vue结合后台的列表增删改案例
Aug 21 Javascript
Vue+Express实现登录注销功能的实例代码
May 05 Javascript
vue实现页面内容禁止选中功能,仅输入框和文本域可选
Nov 09 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截取字符串并保留完整xml标签的函数代码
2013/02/06 PHP
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
实例说明js脚本语言和php脚本语言的区别
2019/04/04 PHP
php输出形式实例整理
2020/05/05 PHP
一个JS翻页效果
2007/07/23 Javascript
jQuery 性能优化指南(2)
2009/05/21 Javascript
javascript动态加载实现方法一
2012/08/22 Javascript
使用firebug进行调试javascript的示例
2013/12/16 Javascript
Javascript实现的SHA-256加密算法完整实例
2016/02/02 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
使用nodejs中httpProxy代理时候出现404异常的解决方法
2016/08/15 NodeJs
vue双向绑定的简单实现
2016/12/22 Javascript
JavaScript实现省市县三级级联特效
2017/05/16 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
Es6 Generator函数详细解析
2018/02/24 Javascript
JS实现select选中option触发事件操作示例
2018/07/13 Javascript
利用vue重构有赞商城的思路以及总结整理
2019/02/21 Javascript
js实现继承的方法及优缺点总结
2019/05/08 Javascript
javascript中this的用法实践分析
2019/07/29 Javascript
简单谈谈javascript高级特性
2019/09/04 Javascript
[57:28]2018DOTA2亚洲邀请赛 4.6 淘汰赛 TNC vs Liquid 第一场
2018/04/10 DOTA
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
qpython3 读取安卓lastpass Cookies
2016/06/19 Python
基于Python实现的微信好友数据分析
2018/02/26 Python
python如何统计代码运行的时长
2019/07/24 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
韩国现代百货官网:Hmall
2018/03/21 全球购物
荷兰在线体育用品商店:Avantisport.nl
2018/07/04 全球购物
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
华纳兄弟工作室的官方授权商店:WB Shop
2018/11/30 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
党支部工作总结2015
2015/04/01 职场文书
通用员工手册范本
2015/05/14 职场文书
老舍《猫》教学反思
2016/02/17 职场文书
python xlwt模块的使用解析
2021/04/13 Python
在Python 中将类对象序列化为JSON
2022/04/06 Python