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 事件查询综合
Jul 13 Javascript
学习从实践开始之jQuery插件开发 菜单插件开发
May 03 Javascript
纯js实现瀑布流展现照片(自动适应窗口大小)
Apr 08 Javascript
JS 实现BASE64_ENCODE和BASE64_DECODE(实例代码)
Nov 13 Javascript
原生js和jquery中有关透明度设置的相关问题
Jan 08 Javascript
jQuery+CSS3实现树叶飘落特效
Feb 01 Javascript
jQuery插件slick实现响应式移动端幻灯片图片切换特效
Apr 12 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
JQuery的Pager分页器实现代码
May 03 Javascript
fullpage.js全屏滚动插件使用实例
Sep 06 Javascript
详解vue 中使用 AJAX获取数据的方法
Jan 18 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 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
星际实力自我测试
2020/03/04 星际争霸
php插入排序法实现数组排序实例
2015/02/16 PHP
双冒号 ::在PHP中的使用情况
2015/11/05 PHP
CentOS下与Apache连接的PHP多版本共存方案实现详解
2015/12/19 PHP
初学prototype,发个JS接受URL参数的代码
2006/09/25 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
JS获取URL中参数值(QueryString)的4种方法分享
2014/04/12 Javascript
angularjs创建弹出框实现拖动效果
2020/08/25 Javascript
Js调用Java方法并互相传参的简单实例
2016/08/11 Javascript
BooStrap对导航条的改造实践小结
2016/09/21 Javascript
js+SVG实现动态时钟效果
2018/07/14 Javascript
vue项目前端知识点整理【收藏】
2019/05/13 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
jQuery编写QQ简易聊天框
2020/08/27 jQuery
[38:42]完美世界DOTA2联赛循环赛 Matador vs Forest BO2第二场 11.05
2020/11/05 DOTA
Python中的MongoDB基本操作:连接、查询实例
2015/02/13 Python
python执行使用shell命令方法分享
2017/11/08 Python
python放大图片和画方格实现算法
2018/03/30 Python
用python写扫雷游戏实例代码分享
2018/05/27 Python
使用Python的Dataframe取两列时间值相差一年的所有行方法
2018/07/10 Python
Python画图实现同一结点多个柱状图的示例
2019/07/07 Python
使用Python进行中文繁简转换的实现代码
2019/10/18 Python
Python+numpy实现矩阵的行列扩展方式
2019/11/29 Python
利用PyQt中的QThread类实现多线程
2020/02/18 Python
python实现图像随机裁剪的示例代码
2020/12/10 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
HEMA英国:荷兰原创设计
2018/08/28 全球购物
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
植树节活动总结
2014/04/30 职场文书
学校党员干部承诺书
2015/05/04 职场文书
联谊会开场白
2015/06/01 职场文书
教师考核鉴定意见
2015/06/05 职场文书
Log4j.properties配置及其使用
2021/08/02 Java/Android
移除Selenium中window.navigator.webdriver值
2022/06/10 Python
virtualenv隔离Python环境的问题解析
2022/06/21 Python