vue element-ui 入门

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

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. 表单的基本用法

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

修改 App.vue 文件

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

image.png

5. 表单校验的基本用法

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

升级 App.vue 文件

1. 一种通过绑定 :rules 来对 change 或者 blur 时间进行监听

2. 另一种通过 ref 绑定到 form 对象上，通过直接调用 el-form api 的 validate 方法来实现提交表单进行校验

   
   
   image.png

6. 表单校验的高级用法

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

image.png

1. rules 只包含一个校验规则

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

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

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

1. 设置 el-form-item 属性

• data 中定义两个属性

  • error: '', // 错误提示
  • status: '', // validate-status 状态

• :validate-status="status" status 对应data 中的 status

• :error="error" 对应 data 中的 error
  中定义属性 status-icon 表示每种状态提示的图标

测试

成功

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 = ''
    }

页面中增加校验按钮

        成功校验
        失败校验
        校验中

点击成功校验

image.png

点击失败校验

image.png

点击校验中

image.png

完整示例

7. 表单常见属性解析

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

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

也加上一个宽度让他为 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

通过设置 是否显示校验标签 label 前面的红色 * 号 false 显示 true 不显示，默认显示，为 false

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

size="small"