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 操作单选框,复选框,下拉列表实现代码
Oct 27 Javascript
jQuery Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jquery offset函数应用实例
Nov 14 Javascript
onclick与listeners的执行先后问题详细解剖
Jan 07 Javascript
document节点对象的获取方式示例介绍
Dec 24 Javascript
JavaScript轻松创建级联函数的方法示例
Feb 10 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
Vue2 SSR渲染根据不同页面修改 meta
Nov 20 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
Aug 18 Javascript
Node.js 使用request模块下载文件的实例
Sep 05 Javascript
详解如何使用微信小程序云函数发送短信验证码
Mar 13 Javascript
微信小程序如何实现全局重新加载
Jun 05 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中DOMDocument简单用法示例代码(XML创建、添加、删除、修改)
2010/12/19 PHP
php判断输入不超过mysql的varchar字段的长度范围
2011/06/24 PHP
PHP字符串函数系列之nl2br(),在字符串中的每个新行 (\n) 之前插入 HTML 换行符br
2011/11/10 PHP
thinkphp模板的包含与渲染实例分析
2014/11/26 PHP
PHP对象的浅复制与深复制的实例详解
2017/10/26 PHP
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
基于node.js的快速开发透明代理
2010/12/25 Javascript
关于jQuery参考实例2.0 用jQuery选择元素
2013/04/07 Javascript
jquery(hide方法)隐藏指定元素实例
2013/11/11 Javascript
javascript进行四舍五入方法汇总
2014/12/16 Javascript
JS实现网页上随滚动条滚动的层效果代码
2015/11/04 Javascript
深入浅析JS是按值传递还是按引用传递(推荐)
2016/09/18 Javascript
JavaScript计算值然后把值嵌入到html中的实现方法
2016/10/29 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
解析预加载显示图片艺术
2016/12/05 Javascript
jQuery中的类名选择器(.class)用法简单示例
2018/05/14 jQuery
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
Python使用reportlab将目录下所有的文本文件打印成pdf的方法
2015/05/20 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Linux下Pycharm、Anaconda环境配置及使用踩坑
2018/12/19 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
基于python 等频分箱qcut问题的解决
2020/03/03 Python
windows、linux下打包Python3程序详细方法
2020/03/17 Python
在Python3.74+PyCharm2020.1 x64中安装使用Kivy的详细教程
2020/08/07 Python
详解Pytorch显存动态分配规律探索
2020/11/17 Python
paramiko使用tail实时获取服务器的日志输出详解
2020/12/06 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
Myprotein瑞典官方网站:畅销欧洲英国运动营养品牌
2018/01/22 全球购物
linux面试题参考答案(11)
2012/05/01 面试题
机关单位人员学雷锋心得体会
2014/03/10 职场文书
汽车转让协议书范本
2014/12/07 职场文书
2015年教研工作总结
2015/05/23 职场文书
中学团支部工作总结
2015/08/13 职场文书
css中z-index: 0和z-index: auto的区别
2021/08/23 HTML / CSS
MYSQL 表的全面总结
2021/11/11 MySQL