vue element-ui 入门

作者: 吉他手_c156 | 来源:发表于2020-08-22 14:51 被阅读0次

1. element-ui 基本用法

全局安装 vue-cli

npm install -g @vue/cli

vue -V 查看当前版本

J:\vueCode\element-ui>vue -V
@vue/cli 4.5.4

创建 element-ui-test 项目

vue create element-ui-test

运行项目

npm run serve

  App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.1.104:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

image.png

安装 element-ui 依赖

npm i element-ui -S

src/main.js 加入Vue 插件,css 样式

import Vue from 'vue'
import App from './App.vue'

// element 组件
import ElementUI from 'element-ui'
// element 样式
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(ElementUI)

// 阻止 vue 启动时生成生产提示
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')

修改 App.vue

<template>
  <div id="app">
    <!-- element-ui 按钮 -->
    <el-button @click="show">按钮</el-button>
  </div>
</template>

<script>

export default {
  name: 'app',
  methods:{
    show(){
      this.$message.success("element-ui 弹框")
    }
  }
}
</script>

<style>

</style>

npm run serve 运行效果

image.png

2. element-ui 按需加载

我们先对项目进行一个构件使用命令 npm run build

image.png

我们主要看 chunk-vendors.....js 库文件体积大概是 789 kb 还是挺大的，原因主要是现在的 element-ui 是全量打包的结果

按需加载

1.安装 babel-plugin-component

npm install babel-plugin-component -D

修改 babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins:[
    [
      "component",{
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

修改 main.js

import Vue from 'vue'
import App from './App.vue'

/***************   全量引入  *****************/
// element 组件
// import ElementUI from 'element-ui'
// element 样式
//import 'element-ui/lib/theme-chalk/index.css'
// Vue.use(ElementUI)


/***************   按需引入  *****************/
// 引入 button 插件
import {Button,Message} from 'element-ui'

// 引入组件  参数一 组件名称，  参数二 组件构造函数
Vue.component(Button.name,Button)
// message 不是组件引用 而是一个方法引用
// 在原型上增加一个 $message 方法 执行 Message
Vue.prototype.$message = Message

// 阻止 vue 启动时生成生产提示
Vue.config.productionTip = false


new Vue({
  render: h => h(App),
}).$mount('#app')

再次打包 npm run build 体积明显变小了 ,只有 112 KB

image.png

3. element-ui 插件引用

创建新的项目

vue create element-ui-test-1

这次我们不需要手动的引入 babel 插件和 element-ui 按需引入，直接使用一个 element-ui 的插件

vue add elemnet

Fully import 完整引入，Import on demand 按需引入，暂时先选择 Fully import

image.png

是否要覆盖 elemnet-ui 中的有些默认样式变量，因为默认样式一改，整体的样式也会变更，这里先选择 N

image.png

语言版本选择第一个中文

image.png

等待安装完后......

package.json 中已经引入了 element-ui

image.png

main.js 中也引入了一个文件 element.js

image.png

进入 element.js 中,其实也就是把之前的 element-ui 组件间引入进来了

import Vue from 'vue'
import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'

Vue.use(Element)

最后还替换了原来的 App.vue 文件在里面增加了一个 button ,简单来说就是对 element-ui 做了一个初始化

image.png

运行起来 npm run serve

image.png

这是页面中多了一个 element-ui 的 button 来告诉我们已经成功的将 element-ui 引入

4. 表单的基本用法

el-form 容器，通过 model 绑定数据
el-form-item，通过 label 绑定标签
表单组件通过 v-model 绑定 model 中的数据

修改 App.vue 文件

<template>
  <div id="app">
    <el-form inline :model="data">
      <el-form-item label="审批人">
        <el-input v-model="data.user" placeholder="请输入审批人"></el-input>
      </el-form-item>
      
      <el-form-item label="城市">
        <el-select v-model="data.region" placeholder="城市">
          <el-option label="城市一" value="上海"></el-option>
          <el-option label="城市二" value="北京"></el-option>
        </el-select>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return {
      data:{ user: 'zhangsan', region: '城市二'}
    }
  },
  methods:{
    onSubmit(){
      console.log(this.data)
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

只是就完成一个最简单的表单，查看页面，点击查询可以看到响应的数据

image.png

5. 表单校验的基本用法

定义校验规则，可以绑定到 el-form 或 el-form-item

升级 App.vue 文件

<template>
  <div id="app">

    <!-- 通过 :rules="绑定到一个 rules 对象下进行校验逻辑 -->
    <!-- 通过绑定 ref 点击表单提交是触发校验 -->
    <el-form inline :model="data" :rules="rules" ref=form>
      <el-form-item label="审批人" prop="user">
        <el-input v-model="data.user" placeholder="请输入审批人"></el-input>
      </el-form-item>
      
      <el-form-item label="城市">
        <el-select v-model="data.region" placeholder="城市">
          <el-option label="城市一" value="上海"></el-option>
          <el-option label="城市二" value="北京"></el-option>
        </el-select>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    // 参数 1 校验规则
    // 参数 2 输入的值
    // callback 回掉方法
    const userValidator = (rule, value, callback) => {
      if(value.length > 3){
        // 表示通过
        callback()
      }else{
        callback(new Error('用户名长度必须大于3'))
      }
    }
    return {
      // 表单绑定的数据源
      data:{ user: '', region: ''},
      rules:{
        // user 和 el-form-item 里的 prop="user" 是对应的关系
         user:[
          // required: true 是必填
          // trigger: 'change' 在输入框变化时触发， blur 表示光标离开时触发
          // message 错误提示
          { required: true, trigger: 'change', message: '用户名必须录入' },
          
          // validator 手动校验，需要绑定到一个方法上
          { validator: userValidator, trigger: 'change'}
      ] }
    }
  },
  methods:{
    onSubmit(){
      console.log(this.data)
      // 参数 1 是否校验通过
      // 参数 2 具体错误信息
      this.$refs.form.validate((isValid,errors) => {
        console.info(isValid,errors)
      })
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

一种通过绑定 :rules 来对 change 或者 blur 时间进行监听
另一种通过 ref 绑定到 form 对象上，通过直接调用 el-form api 的 validate 方法来实现提交表单进行校验

image.png

6. 表单校验的高级用法

用法一：动态改变校验规则

image.png

rules 只包含一个校验规则

动态添加的校验规则默认会立即生效，可以通过 <el-form> 绑定属性 :validate-on-rule-change="false" 来改变不会立即生效

    <el-form 
      inline 
      :model="data" 
      :rules="rules" 
      ref="form"
      :validate-on-rule-change="false">

用法二：手动控制校验状态

validate-status：验证状态，枚举值，共四种：
- success: 验证成功
- error：验证失败
- validaing：验证中
- (空)：未验证
error：自定义错误提示

设置 el-form-item 属性

data 中定义两个属性
- error: '', // 错误提示
- status: '', // validate-status 状态
:validate-status="status" status 对应data 中的 status
:error="error" 对应 data 中的 error
<el-form> 中定义属性 status-icon 表示每种状态提示的图标

  <el-form 
      inline 
      :model="data" 
      :rules="rules" 
      ref="form"
      :validate-on-rule-change="false"
      status-icon
      >
      <el-form-item 
        label="审批人" 
        prop="user"
        :validate-status="status"
        :error="error">
        <el-input v-model="data.user" placeholder="请输入审批人"></el-input>
      </el-form-item>

测试

成功

image.png

失败

image.png

做一个自定义的错误提示，:validate-status="status" 中的 status 必须为 error，error 中可写自己的定义的错误提示

     // 自定义错误提示
      error: '这是自定义的错误提示', 
      // validate-status 状态
      status: 'error',

image.png

自定义 status 和 error
添加校验方法

    // 失败校验
    showError(){
      this.status = 'error'
      this.error = '用户名输入有误'
    },
    // 成功校验
    showSuccess(){
      this.status = 'success'
      this.error = ''
    },
    // 校验中
    showValidating(){
      this.status = 'validating'
      this.error = ''
    }

页面中增加校验按钮

        <el-button type="success" v-on:click="showSuccess">成功校验</el-button>
        <el-button type="danger" v-on:click="showError">失败校验</el-button>
        <el-button type="waring" v-on:click="showValidating">校验中</el-button>

点击成功校验

image.png

点击失败校验

image.png
点击校验中

image.png

完整示例

<template>
  <div id="app">

    <!-- 通过 :rules="绑定到一个 rules 对象下进行校验逻辑 -->
    <!-- 通过绑定 ref 点击表单提交是触发校验 -->
    <!-- 
        :validate-on-rule-change 默认 为 true 动态添加立即生效，
        false 不会立即生效
     -->
    <el-form 
      inline 
      :model="data" 
      :rules="rules" 
      ref="form"
      :validate-on-rule-change="false"
      status-icon
      >
      <el-form-item 
        label="审批人" 
        prop="user"
        :validate-status="status"
        :error="error">
        <el-input v-model="data.user" placeholder="请输入审批人"></el-input>
      </el-form-item>
      
      <el-form-item label="城市">
        <el-select v-model="data.region" placeholder="城市">
          <el-option label="城市一" value="上海"></el-option>
          <el-option label="城市二" value="北京"></el-option>
        </el-select>  
      </el-form-item>

      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit">查询</el-button>
        <el-button type="primary" v-on:click="addRule">添加校验规则</el-button>
        <el-button type="success" v-on:click="showSuccess">成功校验</el-button>
        <el-button type="danger" v-on:click="showError">失败校验</el-button>
        <el-button type="waring" v-on:click="showValidating">校验中</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  name: 'app',
  data(){
    return {
      // 错误提示
      error: '', 
      // validate-status 状态
      status: '',

      /* 自定义错误提示 status 必须是 error */ 
      // 错误提示
      //error: '这是自定义的错误提示', 
      // validate-status 状态
      //status: 'error',

      // 表单绑定的数据源
      data:{ user: '', region: ''},
      rules:{
        // user 和 el-form-item 里的 prop="user" 是对应的关系
         user:[
          // required: true 是必填
          // trigger: 'change' 在输入框变化时触发， blur 表示光标离开时触发
          // message 错误提示
          { required: true, trigger: 'change', message: '用户名必须录入' }
      ] }
    }
  },
  methods:{
    onSubmit(){
      console.log(this.data)
      // 参数 1 是否校验通过
      // 参数 2 具体错误信息
      this.$refs.form.validate((isValid,errors) => {
        console.info(isValid,errors)
      })
    },
    // 动态添加校验规则
    addRule(){

      // 参数 1 校验规则
      // 参数 2 输入的值
      // callback 回掉方法
      const userValidator = (rule, value, callback) => {
        if(value.length > 3){
          // 符合规则  清空错误信息，清空校验状态
          this.inputError = ''
          this.inputValidateStatus = ''
          // 表示通过
          callback()
        }else{
          callback(new Error("用户名长度必须大于3"));
        }
      }

      // 创建新的校验规则
      const newRule = [
        ...this.rules.user,
        {validator: userValidator,trigger: 'change'}
      ]

      // 通过 Object.assign 方法生成一个新的对象赋值给 rules  
      this.rules = Object.assign({},this.rules,{user: newRule})
    },
    // 失败校验
    showError(){
      this.status = 'error'
      this.error = '用户名输入有误'
    },
    // 成功校验
    showSuccess(){
      this.status = 'success'
      this.error = ''
    },
    // 校验中
    showValidating(){
      this.status = 'validating'
      this.error = ''
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

7. 表单常见属性解析

label-position: 标签位置，枚举值，left 和 top
label-width: 标签宽度
label-suffix: 标签后缀
inline: 行内标签
disabled: 设置整个 form 中的表单组件全部 disabled ,优先级低于表单组件自身的 disabled

label-postion 决定 label 标签的位置，使用这个属性的时候 inline 属性要置为 false, 我们先给 <el-form> 加上两个属性

    <el-form 
      style="width:500px"
      label-width="100px"

<el-select> 也加上一个宽度让他为 100%

<el-select v-model="data.region" placeholder="城市" style="width:100%">

先注释掉校验的按钮，最后效果

image.png

测试 label-position
比如 label-position="top"，label 就会批量的到达顶部

image.png
默认值是 label-position="left"

测试 label-suffix
比如要在每一个 label 后面加一个冒号，可以使用

label-suffix=":"

image.png
测试 disabled

disabled

加上 disabled 属性会使整个表单都是 disabled 状态

image.png
通过设置 <el-form :hide-required-asterisk="true"> 是否显示校验标签 label 前面的红色 * 号 false 显示 true 不显示，默认显示，为 false

使用 size 属性这是表单元素的尺寸
比如设置

size="small"

vue element-ui 入门

1. element-ui 基本用法

全局安装 vue-cli

vue -V 查看当前版本

创建 element-ui-test 项目

运行项目

安装 element-ui 依赖

src/main.js 加入Vue 插件,css 样式

修改 App.vue

npm run serve 运行效果

2. element-ui 按需加载

我们先对项目进行一个构件使用命令 npm run build

按需加载

修改 babel.config.js

修改 main.js

再次打包 npm run build 体积明显变小了 ,只有 112 KB

3. element-ui 插件引用

创建新的项目

这次我们不需要手动的引入 babel 插件 和 element-ui 按需引入，直接使用一个 element-ui 的插件

Fully import 完整引入，Import on demand 按需引入，暂时先选择 Fully import

是否要覆盖 elemnet-ui 中的有些默认样式变量，因为默认样式一改，整体的样式也会变更，这里先选择 N

语言版本选择第一个 中文

package.json 中已经引入了 element-ui

main.js 中也引入了一个文件 element.js

进入 element.js 中,其实也就是把之前的 element-ui 组件间引入进来了

最后还替换了原来的 App.vue 文件在里面增加了一个 button ,简单来说就是对 element-ui 做了一个初始化

运行起来 npm run serve

4. 表单的基本用法

修改 App.vue 文件

5. 表单校验的基本用法

升级 App.vue 文件

6. 表单校验的高级用法

用法一： 动态改变校验规则

用法二：手动控制校验状态

测试

完整示例

7. 表单常见属性解析

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

前端开发那些事儿

这次我们不需要手动的引入 babel 插件和 element-ui 按需引入，直接使用一个 element-ui 的插件

语言版本选择第一个中文

用法一：动态改变校验规则