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 相关文章推荐
巧妙破除网页右键禁用的十大绝招
Aug 12 Javascript
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
javascript qq右下角滑出窗口 sheyMsg
Mar 21 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
Feb 11 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
获取阴历(农历)和当前日期的js代码
Feb 15 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
详谈js中数组(array)和对象(object)的区别
Feb 27 Javascript
详谈DOM简介及节点、属性、查找节点的方法
Nov 16 Javascript
抖音上用记事本编写爱心小程序教程
Apr 17 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 Javascript
纯JS实现五子棋游戏
May 28 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
晶体管单管来复再生式收音机
2021/03/02 无线电
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
PHP+Ajax+JS实现多图上传
2016/05/07 PHP
PHP+Ajax实现验证码的实时验证
2016/07/20 PHP
PHP常用的三种设计模式汇总
2016/08/28 PHP
深入浅析PHP的session反序列化漏洞问题
2017/06/15 PHP
PHP的微信支付接口使用方法讲解
2019/03/08 PHP
javascript之更有效率的字符串替换
2008/08/02 Javascript
jquery.alert 弹出式复选框实现代码
2009/06/15 Javascript
js中判断文本框是否为空的两种方法
2011/07/31 Javascript
ie中js创建checkbox默认选中问题探讨
2013/10/21 Javascript
JS来动态的修改url实现对url的增删查改
2014/09/05 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
浅谈Jquery为元素绑定事件
2015/04/27 Javascript
javascript中动态函数用法实例分析
2015/05/14 Javascript
jQuery实现锚点向下平滑滚动特效示例
2017/08/29 jQuery
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
vue生成文件本地打开查看效果的实例
2018/09/06 Javascript
详解Node.js amqplib 连接 Rabbit MQ最佳实践
2019/01/24 Javascript
[50:44]DOTA2-DPC中国联赛 正赛 SAG vs Dragon BO3 第二场 2月22日
2021/03/11 DOTA
python实现多线程采集的2个代码例子
2014/07/07 Python
Python检测一个对象是否为字符串类的方法
2015/05/21 Python
Eclipse中Python开发环境搭建简单教程
2016/03/23 Python
Python AES加密模块用法分析
2017/05/22 Python
Python建立Map写Excel表实例解析
2018/01/17 Python
如何基于Python批量下载音乐
2019/11/11 Python
keras得到每层的系数方式
2020/06/15 Python
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
化验室技术员岗位职责
2013/12/24 职场文书
大学活动邀请函
2014/01/28 职场文书
护理中职生求职信范文
2014/02/24 职场文书
2015年行政管理人员工作总结
2015/10/15 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫