ElementUI的常用组件及使用技巧
1. 引言
项目背景与目标
随着前端技术的快速发展，构建高效、美观的用户界面变得越来越重要。ElementUI作为一款基于Vue.js的组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的Web应用。本文旨在介绍ElementUI的常用组件及其使用技巧，帮助开发者更好地利用ElementUI提升开发效率。
ElementUI简介
ElementUI是饿了么团队推出的一个基于Vue.js 2.0的桌面端组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的Web应用。
选择ElementUI的原因
- 丰富的组件库：提供了丰富的组件，满足各种开发需求。
- 良好的文档支持：详细的文档和示例代码，便于学习和使用。
- 活跃的社区支持：活跃的社区和丰富的资源，帮助开发者解决问题。
- 与Vue.js的完美结合：基于Vue.js 2.0，易于集成和使用。
2. ElementUI简介
什么是ElementUI
ElementUI是饿了么团队推出的一个基于Vue.js 2.0的桌面端组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的Web应用。
主要特性
- 丰富的组件库：提供了丰富的组件，满足各种开发需求。
- 良好的文档支持：详细的文档和示例代码，便于学习和使用。
- 活跃的社区支持：活跃的社区和丰富的资源，帮助开发者解决问题。
- 与Vue.js的完美结合：基于Vue.js 2.0，易于集成和使用。
生态系统概览
ElementUI生态系统包括：
- 组件库：丰富的组件库，满足各种开发需求。
- 文档：详细的文档和示例代码，便于学习和使用。
- 社区：活跃的社区和丰富的资源，帮助开发者解决问题。
- 工具：各种工具和插件，提升开发效率。
3. 安装与配置
安装ElementUI
通过npm或yarn安装ElementUI：
npm install element-ui --save
或
yarn add element-ui
引入ElementUI
在Vue项目中引入ElementUI：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
render: h => h(App),
}).$mount('#app');
配置主题与语言
配置主题和语言：
import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import locale from 'element-ui/lib/locale/lang/en';
import App from './App.vue';
Vue.use(ElementUI, {
locale });
new Vue({
render: h => h(App),
}).$mount('#app');
4. 常用组件详解
4.1 按钮（Button）
基本用法
<template>
<div>
<el-button>默认按钮el-button>
<el-button type="primary">主要按钮el-button>
<el-button type="success">成功按钮el-button>
<el-button type="info">信息按钮el-button>
<el-button type="warning">警告按钮el-button>
<el-button type="danger">危险按钮el-button>
div>
template>
不同类型的按钮
<template>
<div>
<el-button plain>朴素按钮el-button>
<el-button type="primary" plain>主要按钮el-button>
<el-button type="success" plain>成功按钮el-button>
<el-button type="info" plain>信息按钮el-button>
<el-button type="warning" plain>警告按钮el-button>
<el-button type="danger" plain>危险按钮el-button>
div>
template>
按钮组
<template>
<el-button-group>
<el-button type="primary" icon="el-icon-arrow-left">上一页el-button>
<el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right">i>el-button>
el-button-group>
template>
4.2 表单（Form）
基本用法
<template>
<el-form :model="form" label-width="120px">
<el-form-item label="活动名称">
<el-input v-model="form.name">el-input>
el-form-item>
<el-form-item label="活动区域">
<el-select v-model="form.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai">el-option>
<el-option label="区域二" value="beijing">el-option>
el-select>
el-form-item>
<el-form-item label="活动时间">
<el-col :span="11">
<el-date-picker type="date" placeholder="选择日期" v-model="form.date1" style="width: 100%;">el-date-picker>
el-col>
<el-col class="line" :span="2">-el-col>
<el-col :span="11">
<el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;">el-time-picker>
el-col>
el-form-item>
<el-form-item label="即时配送">
<el-switch v-model="form.delivery">el-switch>
el-form-item>
<el-form-item label="活动性质">
<el-checkbox-group v-model="form.type">
<el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
<el-checkbox label="地推活动" name="type">el-checkbox>
<el-checkbox label="线下主题活动" name="type">el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
el-checkbox-group>
el-form-item>
<el-form-item label="特殊资源">
<el-radio-group v-model="form.resource">
<el-radio label="线上品牌商赞助">el-radio>
<el-radio label="线下场地免费">el-radio>
el-radio-group>
el-form-item>
<el-form-item label="活动形式">
<el-input type="textarea" v-model="form.desc">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">立即创建el-button>
<el-button>取消el-button>
el-form-item>
el-form>
template>
<script>
export default {
data() {
return {
form: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
}
}
},
methods: {
onSubmit() {
console.log('submit!');
}
}
}
script>
表单验证
<template>
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name">el-input>
el-form-item>
<el-form-item label="活动区域" prop="region">
<el-select v-model="ruleForm.region" placeholder="请选择活动区域">
<el-option label="区域一" value="shanghai">el-option>
<el-option label="区域二" value="beijing">el-option>
el-select>
el-form-item>
<el-form-item label="活动时间" required>
<el-col :span="11">
<el-form-item prop="date1">
<el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date1" style="width: 100%;">el-date-picker>
el-form-item>
el-col>
<el-col class="line" :span="2">-el-col>
<el-col :span="11">
<el-form-item prop="date2">
<el-time-picker placeholder="选择时间" v-model="ruleForm.date2" style="width: 100%;">el-time-picker>
el-form-item>
el-col>
el-form-item>
<el-form-item label="即时配送" prop="delivery">
<el-switch v-model="ruleForm.delivery">el-switch>
el-form-item>
<el-form-item label="活动性质" prop="type">
<el-checkbox-group v-model="ruleForm.type">
<el-checkbox label="美食/餐厅线上活动" name="type">el-checkbox>
<el-checkbox label="地推活动" name="type">el-checkbox>
<el-checkbox label="线下主题活动" name="type">el-checkbox>
<el-checkbox label="单纯品牌曝光" name="type">el-checkbox>
el-checkbox-group>
el-form-item>
<el-form-item label="特殊资源" prop="resource">
<el-radio-group v-model="ruleForm.resource">
<el-radio label="线上品牌商赞助">el-radio>
<el-radio label="线下场地免费">el-radio>
el-radio-group>
el-form-item>
<el-form-item label="活动形式" prop="desc">
<el-input type="textarea" v-model="ruleForm.desc">el-input>
el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">立即创建el-button>
<el-button @click="resetForm('ruleForm')">重置el-button>
el-form-item>
el-form>
template>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
region: '',
date1: '',
date2: '',
delivery: false,
type: [],
resource: '',
desc: ''
},
rules: {
name: [
{
required: true, message: '请输入活动名称', trigger: 'blur' },
{
min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
region: [
{
required: true, message: '请选择活动区域', trigger: 'change' }
],
date1: [
{
type: 'date', required: true, message: '请选择日期', trigger: 'change' }
],
date2: [
{
type: 'date', required: true, message: '请选择时间', trigger: 'change' }
],
type: [
{
type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
],
resource: [
{
required: true, message: '请选择特殊资源', trigger: 'change' }
],
desc: [
{
required: true, message: '请填写活动形式', trigger: 'blur' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
alert('submit!');
} else {
console.log('error submit!!');
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
}
script>
动态表单
<template>
<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
<el-form-item
prop="email"
label="邮箱"
:rules="[
{ required: true, message: '请输入邮箱地址', trigger: 'blur' },
{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]"
>
<el-input v-model="dynamicValidateForm.email">el-input>
el-form-item>
<el-form-item
v-for="(domain, index) in dynamicValidateForm.domains"
:label="'域名' + index"
:key="domain.key"
:prop="'domains.' + index + '.value'"
:rules="{
required: true, message: '域名不能为空', trigger: 'blur'
}"
>
<el-input v-model="domain.value">el-input><el-button @click.prevent="removeDomain(domain)">删除el-button>
el-form-item>
<el-form-item>
<el-button @click="addDomain">新增域名el-button>
<el-button type="primary" @click