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面向对象编程(一) 实例代码
Jun 25 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
js 时间格式与时间戳的相互转换示例代码
Dec 25 Javascript
jquery实现省市select下拉框的替换(示例代码)
Feb 22 Javascript
完美的js div拖拽实例代码
Sep 24 Javascript
BootStrap table使用方法分析
Nov 08 Javascript
JS实现线性表的顺序表示方法示例【经典数据结构】
Apr 11 Javascript
js学习总结之DOM2兼容处理this问题的解决方法
Jul 27 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
javascript实现超好看的3D烟花特效
Jan 01 Javascript
vue 弹出遮罩层样式实例
Jul 22 Javascript
Vue ElementUI实现:限制输入框只能输入正整数的问题
Jul 31 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
QQ登录 PHP OAuth示例代码
2011/07/20 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
PHP清除字符串中所有无用标签的方法
2014/12/01 PHP
基于php实现随机合并数组并排序(原排序)
2015/11/26 PHP
Thinkphp3.2实用篇之计算型验证码示例
2017/02/09 PHP
CSS中简写属性要注意TRouBLe的顺序问题(避免踩坑)
2021/03/09 HTML / CSS
浏览器脚本兼容 文本框中,回车键触发事件的兼容
2010/06/21 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript实现拖放效果
2015/12/16 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
JavaScript浏览器对象之一Window对象详解
2016/06/03 Javascript
jQuery简单实现title提示效果示例
2016/08/01 Javascript
深入学习js瀑布流布局
2016/10/14 Javascript
微信小程序 开发工具快捷键整理
2016/10/31 Javascript
原生js获取浏览器窗口及元素宽高常用方法集合
2017/01/18 Javascript
jQuery Ajax实现跨域请求
2017/01/21 Javascript
利用javascript实现的三种图片放大镜效果实例(附源码)
2017/01/23 Javascript
jQuery 1.9版本以上的浏览器判断方法代码分享
2017/08/28 jQuery
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
一个简单的node.js界面实现方法
2018/06/01 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
2018/08/17 Javascript
vue中使用gojs/jointjs的示例代码
2018/08/24 Javascript
Vue中使用 setTimeout() setInterval()函数的问题
2018/09/13 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
JavaScript简单实现动态改变HTML内容的方法示例
2018/12/25 Javascript
详解如何运行vue项目
2019/04/15 Javascript
通过实例了解js函数中参数的传递
2019/06/15 Javascript
[48:11]完美世界DOTA2联赛 Magma vs GXR 第二场 11.07
2020/11/10 DOTA
Python面向对象编程基础解析(一)
2017/10/26 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
英国性能汽车零件和发动机配件在线:Maxpeedingrods
2019/11/05 全球购物
商铺消防安全责任书
2014/07/29 职场文书
晋江市人民政府党组群众路线教育实践活动整改方案
2014/10/25 职场文书
2014年干部培训工作总结
2014/12/17 职场文书
催款函怎么写
2015/06/24 职场文书
小学英语课教学反思
2016/02/15 职场文书