vue.js+element 默认提示中英文操作

element默认中文版，但是我们在做英文页面时自己翻译很不爽，所以我们用element自带英文包，只要在html页面中引入就可以了，

具体引入方法有很多种，在此提供了我用过的一种，仅作为参考使用：

补充知识：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的童鞋可能很容易忽略

<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 默认提示中英文操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue 解决在element中使用$notify在提示信息中换行问题

    在项目开发过程中,遇到如下用户体验提升需求:需要实现错误提示时根据后台返回错误列表信息,换行展示. 实现方式如下: 通过F12元素查看,在对应的样式中加入white-space:pre-wrap,该样式的主要作用是识别字符串中的换行符"\n",故需要在待展示的信息字符串中加入相应的换行标识符. 在$notify消息提示中,作用于el-notification: .el-notification {white-space:pre-wrap !important; } 有的童鞋可能试过样式

  • vue项目中使用vue-i18n报错的解决方法

    vue项目中使用vue-i18n报错的解决方法

    前言 Vue-i18n大家应该都不陌生,Vue-i18n安装的安装方法如下: npm install vue-i18n --save 然而最近在vue项目中使用vue-i18n的时候,居然报错了,通过查找相关的资料终于找到了解决的方法,下面话不多说了,来一起看看详细的介绍吧 发现问题 iview-admin框架克隆到本地,添加路由的时候,稍不注意就会遇到以下情况: Value of key 'xxx' is not string! Cannot translate the value of ke

  • 使用 vue-i18n 切换中英文效果

    vue-i18n 仓库地址:https://github.com/kazupon/vue-i18n 兼容性: 支持 Vue.js 2.x 以上版本 安装方法:(此处只演示 npm) npm install vue-i18n 使用方法: 1.在 main.js 中引入 vue-i18n (前提是要先引入 vue) import VueI18n from 'vue-i18n' Vue.use(VueI18n) 2.准备本地的翻译信息 const messages = { zh: { message:

  • vue.js+element 默认提示中英文操作

    element默认中文版,但是我们在做英文页面时自己翻译很不爽,所以我们用element自带英文包,只要在html页面中引入就可以了, 具体引入方法有很多种,在此提供了我用过的一种,仅作为参考使用: 补充知识:element-ui组价中表单的验证提示显示后台的提示信息及自定义提示 我在做这个的时候一个是分给我的那个页面 是有两个接口的,所以提示信息就是根据接口的response.success 提示 写一个提示语"XX已存在"如下: html: ​ <el-form :model

  • Vue.js 表单控件操作小结

    概念说明 v-model指令:在表单控件元素上创建双向数据绑定.v-model 会根据控件类型自动选取正确的方法来更新元素. 输入框 实例中演示了 input 和 textarea 元素中使用 v-model 实现双向数据绑定: HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</tit

  • vue.js实现的绑定class操作示例

    vue.js实现的绑定class操作示例

    本文实例讲述了vue.js实现的绑定class操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0,

  • Vue.js中对css的操作（修改）具体方式详解

    使用v-bind:class或者v-bind:style或者直接通过操作dom来对其样式进行更改: 1.v-bind:class || v-bind:style 其中v-bind是指令,: 后面的class 和style是参数,而class之后的指在vue的官方文档里被称为'指令预期值'(这个不必深究,反正个人觉得初学知道他叫啥名有啥用就好了)同v-bind的大多数指令(部分特殊指令如V-for除外)一样,除了可以绑定字符串类型的变量外,还支持一个单一的js表达式,也就是说v-bind:clas

  • vue.js+Element实现表格里的增删改查

    新项目使用的是vue.js 后来发现饿了吗前端编写的一套框架Element (http://element.eleme.io/#/zh-CN)来配合vue.js进行样式填充 之前用过angularjs 用到后来 发现越来越难学 于是就决定用vue.js 下面就介绍一下vue.js应用在表格里的增删改查 首先引入一下element的js <script src="plugins/element-ui/index.js"></script> 然后引入需要用到的vue

  • Vue.js实现列表清单的操作方法

    Vue.js实现列表清单的操作方法

    一.Vue.js简要说明 Vue.js (读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架.与前端框架Angular一样, Vue.js在设计上采用MVVM模式,当View视图层发生变化时,会自动更新到ViewModel.反之亦然,View与ViewModel之间通过数据双向绑定(data-binding)建立联系,如下图所示 Vue.js通过MVVM模式将视图与数据分成两部分(或者说视图代码与业务逻辑的解耦),因此我们只需关心数据的操作,DOM的视图的更新等一系列事情,V

  • Vue.js实现可配置的登录表单代码详解

    表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下. 业务场景 在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录,有的客户还希望能有手机号+验证码+密码的登录方式-所以登录方式的灵活性需要可配置的表单支持,于是我把登录组件做了拆分. 以表单元素为粒度,分离出了手机号.密码.短信验证码这几个组件,它们内部都有自己的表单验证方法,通过组合可以快速完成登录.注册.找回密码等表单组件.高内聚低耦合.高内聚低耦合-跟着

  • Vue.js 应用性能优化分析+解决方案

    Vue.js 应用性能优化分析+解决方案

    目录 一.介绍 二.为什么我们需要 Vue JS 性能优化? 三.Vue 性能不佳背后的主要原因 1. 生成报告 2. 运行命令和npm 运行生成 四.如何优化 Vue js 应用程序的性能? 1. 在 Vue js 中懒加载 2. 基于路线的代码拆分 3.Vue js预加载组件 4. 优化第三方库 5. 使用浏览器缓存 6. 优化和压缩图像 前言: 假设我们在开发整个 Vue 应用程序方面非常努力.js.但没有优先考虑其性能:现在,我们的应用程序需要一段时间来加载.导航.提交或执行任何用户操作

  • 详解django模板与vue.js冲突问题

    详解django模板与vue.js冲突问题

    问题: django模板与vue.js的变量都是使用"{{"和"}}"包裹起来的,在渲染django模板时会先替代掉所有的"{{"和"}}"及被包裹在其中的内容,使得vue.js没有使用"{{"."}}"来绑定变量. 处理方法: 方法1:修改vue.js的默认的绑定符号 Vue.config.delimiters = ["[[", "]]"]; 执

  • Vue.js实现一个漂亮、灵活、可复用的提示组件示例

    Vue.js实现一个漂亮、灵活、可复用的提示组件示例

    这次的教程里,我们要把组件化进行到底!最近半年的几个项目中,都遇到了需要使用Toast或者Notification组件的情况.在目前已有的一些基于Vue.js开发的组件库,都没有找到太合适的,所以自己重头实现了一个.历经几个项目的磨练,这个提示组件的功能已经越来越完善,这次就分享一下组件以及其实现思路吧. 深入组件化,组件的拆分.整合与复用 Vue.js的组件化可以说是其招牌特性之一,而在实际应用时,并非一味地追求组件颗粒越小越好,而是需要根据项目的实际需求,来分析自己需要什么级别的组件. 例如

随机推荐