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 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
js中关于一个分号的崩溃示例
Nov 11 Javascript
查找页面中所有类为test的结点的方法
Mar 28 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
JavaScript实现随机替换图片的方法
Apr 16 Javascript
javascript中DOM复选框选择用法实例
May 14 Javascript
javascript转换静态图片,增加粒子动画效果
May 28 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
Nov 15 Javascript
canvas 绘制圆形时钟
Feb 22 Javascript
浅析vue给不同环境配置不同打包命令
Aug 17 Javascript
vue项目中极验验证的使用代码示例
Dec 03 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 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程序员编程注意事项
2008/04/10 PHP
php 操作调试的方法
2012/07/12 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
图片格式的JavaScript和CSS速查手册
2007/08/20 Javascript
解决JS浮点数运算出现Bug的方法
2013/03/12 Javascript
无缝滚动js代码通俗易懂(自写)
2013/06/19 Javascript
jquery.ui.draggable中文文档(原文翻译)
2013/11/15 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JavaScript框架是什么?怎样才能叫做框架?
2015/07/01 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
javascript 判断两个日期之差的示例代码
2015/09/05 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
2015/10/09 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
2016/02/12 Javascript
javascript代码调试之console.log 用法图文详解
2016/09/30 Javascript
解决layui弹框失效的问题
2019/09/09 Javascript
JavaScript装饰者模式原理与用法实例详解
2020/03/09 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
深入讨论Python函数的参数的默认值所引发的问题的原因
2015/03/30 Python
Python中用于计算对数的log()方法
2015/05/15 Python
python3 pandas 读取MySQL数据和插入的实例
2018/04/20 Python
详解python多线程、锁、event事件机制的简单使用
2018/04/27 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
python中 _、__、__xx__()区别及使用场景
2020/06/30 Python
Python使用pickle进行序列化和反序列化的示例代码
2020/09/22 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
利用纯CSS3实现动态的自行车特效源码
2017/01/20 HTML / CSS
校园摄影活动策划方案
2014/02/05 职场文书
移风易俗倡议书
2014/04/15 职场文书
《孙权劝学》教学反思
2014/04/23 职场文书
坚守艰苦奋斗精神坚决反对享乐主义整改措施
2014/09/17 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
2019奶茶店创业计划书范本!
2019/07/15 职场文书
如何使用php生成zip压缩包
2021/04/21 PHP
JavaScript 实现页面滚动动画
2021/04/24 Javascript