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 相关文章推荐
extjs每个组件要设置唯一的ID否则会出错
Jun 15 Javascript
JS基于FileSystemObject创建一个指定路径的TXT文本文件
Aug 05 Javascript
BootStrap智能表单实战系列(三)分块表单配置详解
Jun 13 Javascript
微信小程序 Storage API实例详解
Oct 02 Javascript
jQuery ajax读取本地json文件的实例
Oct 31 jQuery
vue2.0 自定义 饼状图 (Echarts)组件的方法
Mar 02 Javascript
vue.js中$set与数组更新方法
Mar 08 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
Vue中的methods、watch、computed的区别
Nov 26 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
基于JavaScript实现留言板功能
Mar 16 Javascript
Vue OpenLayer 为地图绘制风场效果
Apr 24 Vue.js
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做的端口嗅探器--可以指定网站和端口
2006/10/09 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
PHP基于imagick扩展实现合成图片的两种方法【附imagick扩展下载】
2017/11/14 PHP
PHP网站常见安全漏洞,及相应防范措施总结
2021/03/01 PHP
JS控制表格隔行变色
2006/06/26 Javascript
window.addeventjs事件驱动函数集合addEvent等
2008/02/19 Javascript
JS模拟面向对象全解(一、类型及传递)
2011/07/13 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
jquery如何把参数列严格转换成数组实现思路
2013/04/01 Javascript
JS实现仿google、百度搜索框输入信息智能提示的实现方法
2015/04/20 Javascript
Javascript基于AJAX回调函数传递参数实例分析
2015/12/15 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
2017/02/03 Javascript
vue router2.0二级路由的简单使用
2017/07/05 Javascript
angular2 ng build部署后base文件路径问题详细解答
2017/07/15 Javascript
通过JS运行机制的角度说说作用域
2019/03/12 Javascript
javascript 使用sleep函数的常见方法详解
2020/04/26 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
JS轮播图的实现方法
2020/08/24 Javascript
原生js实现自定义滚动条
2021/01/20 Javascript
[36:14]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第二局
2016/02/28 DOTA
详解python的sorted函数对字典按key排序和按value排序
2018/08/10 Python
基于python实现高速视频传输程序
2019/05/05 Python
python3下载抖音视频的完整代码
2019/06/05 Python
在python中用url_for构造URL的方法
2019/07/25 Python
基于Python获取docx/doc文件内容代码解析
2020/02/17 Python
通过实例简单了解Python sys.argv[]使用方法
2020/08/04 Python
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
大学生村官演讲稿
2014/04/25 职场文书
领导干部保密承诺书
2014/08/30 职场文书
2014年销售人员工作总结
2014/11/27 职场文书
学校党支部承诺书
2015/04/30 职场文书
2015年社区工会工作总结
2015/05/26 职场文书
详解CocosCreator项目结构机制
2021/04/14 Javascript
世界各国短波电台对东亚播送时间频率表(SW)
2021/06/28 无线电
spring boot实现文件上传
2022/08/14 Java/Android
Li list-style-image 图片垂直居中实现方法
2023/05/21 HTML / CSS