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 相关文章推荐
js单例模式的两种方案
Oct 22 Javascript
JavaScript中检查对象property的存在性方法介绍
Dec 30 Javascript
详解JavaScript中localStorage使用要点
Jan 13 Javascript
通过Tabs方法基于easyUI+bootstrap制作工作站
Mar 28 Javascript
jQuery ajax提交Form表单实例(附demo源码)
Apr 06 Javascript
如何利用模板将HTML从JavaScript中抽离
Oct 08 Javascript
Vue单文件组件基础模板小结
Aug 10 Javascript
JS 中LocalStorage和SessionStorage的使用
Aug 17 Javascript
基于Vue单文件组件详解
Sep 15 Javascript
利用JavaScript的Map提升性能的方法详解
Aug 14 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
May 24 Javascript
详解javascript void(0)
Jul 13 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/12/17 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP常见数组排序方法小结
2018/08/20 PHP
JS解析XML的实现代码
2009/11/12 Javascript
js DOM的学习笔记
2011/12/22 Javascript
js实现在页面上弹出蒙板技巧简单实用
2013/04/16 Javascript
js定时器怎么写?就是在特定时间执行某段程序
2013/10/11 Javascript
Node.js模块加载详解
2014/08/16 Javascript
Javascript获取表单名称(name)的方法
2015/04/02 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JS中多步骤多分步的StepJump组件实例详解
2016/04/01 Javascript
JavaScript随机打乱数组顺序之随机洗牌算法
2016/08/02 Javascript
Vue表单实例代码
2016/09/05 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JavaScript解析JSON格式数据的方法示例
2017/01/24 Javascript
详解HTTPS 的原理和 NodeJS 的实现
2017/07/04 NodeJs
js实现列表按字母排序
2020/08/11 Javascript
30秒轻松实现TensorFlow物体检测
2018/03/14 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
django多对多表的创建,级联删除及手动创建第三张表
2019/07/25 Python
python excel转换csv代码实例
2019/08/26 Python
Python中关于浮点数的冷知识
2019/09/22 Python
k-means 聚类算法与Python实现代码
2020/06/01 Python
python 爬虫如何正确的使用cookie
2020/10/27 Python
css3 transform过渡抖动问题解决
2020/10/23 HTML / CSS
科室工作的个人自我评价
2013/10/30 职场文书
品管员岗位职责
2013/11/10 职场文书
大学生个人简历自我评价
2013/11/16 职场文书
无故旷工检讨书
2014/01/26 职场文书
售后求职信范文
2014/03/15 职场文书
师德师风演讲稿
2014/05/05 职场文书
2014年生产部工作总结
2014/12/17 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
中国合伙人观后感
2015/06/02 职场文书
观看《筑梦中国》纪录片心得体会
2016/01/18 职场文书