一、组件库
Element-ui 是一套基于 Vue.js 2.0 的 PC 端组件库,它通过npm 安装,提供了非常丰富的组件和样式, 它的文档网站也非常详尽,不仅仅只包含 API 文档,还有示例和演示视频等方便用户快速学习。
首先我们需要安装 Element-ui 的依赖,可以在 package.json 中查看配置:
{
"dependencies": {
"vue": "^2.5.21",
"element-ui": "^2.4.5"
}
}
在使用组件之前,需要在Vue中注册Element:
import Vue from 'vue';
import Element from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element);
这里通过 import 引入 Element-ui 的样式文件。在Vue.use()方法中,将注册的内容传入即可。
二、常用组件
Element-ui 拥有非常丰富的组件,这里列举一些常用组件的使用方法。
1.按钮组件
按钮是页面中使用最为频繁的元素之一,使用 Element-ui 中的 Button 按钮组件可以快速地创建页面中不同样式的按钮。
<template>
<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>
</template>
2.表单组件
为了方便页面中的表单开发,Element-ui 提供了各种类型的表单组件,如输入框、选择框、时间选择器等等。
<template>
<el-form :model="form" :rules="rules">
<el-form-item label="名称" prop="name">
<el-input v-model="form.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="类型" prop="type">
<el-select v-model="form.type" placeholder="请选择">
<el-option label="选项1" value="1"></el-option>
<el-option label="选项2" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="日期" prop="date">
<el-date-picker
type="date"
placeholder="请选择日期"
v-model="form.date">
</el-date-picker>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm">>立即创建</el-button>
</el-form-item>
</el-form>
</template>
<script>
export default {
data() {
return {
form: {
name: '',
type: '',
date: ''
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
],
type: [
{ required: true, message: '请选择活动区域', trigger: 'change' }
],
date: [
{ required: true, message: '请选择日期', trigger: 'change' }
]
}
};
},
methods: {
submitForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
console.log('submit!');
} else {
console.log('error submit!!');
return false;
}
});
}
}
};
</script>
3.对话框组件
对话框在页面中的使用较为普遍,Element-ui 提供了 Dialog 对话框组件,可以快速地创建一个对话框,并且可以自定义对话框的标题、内容、按钮等。
<template>
<div>
<el-button type="text" @click="dialogVisible = true">点击弹出对话框</el-button>
<el-dialog
title="对话框的标题"
:visible.sync="dialogVisible"
width="30%"
:before-close="handleClose">
<p>欢迎使用 Element-ui 对话框组件!</p>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false">取消</el-button>
<el-button type="primary" @click="dialogVisible = false">确认</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
};
},
methods: {
handleClose(done) {
this.$confirm('确定要关闭此窗口?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
done();
}).catch(() => {});
}
}
};
</script>
三、主题定制
除了提供丰富的组件外,Element-ui 还提供了主题定制功能,可以让用户根据业务需求自定义主题样式。
首先需要安装依赖,安装完成后需要在项目的目录下创建 src/styles/element-variables.scss,用来定义主题样式。
npm i element-theme -D
然后在 element-variables.scss 中定义样式:
$--color-primary: #409EFF;
$--color-success: #67C23A;
$--border-radius-base: 4px;
@import "~element-ui/packages/theme-chalk/src/index";
最后在 package.json 文件中配置主题命令,以将 Element-ui 编译为自定义主题:
{
"scripts": {
"element-theme": "et -i src/styles/element-variables.scss -o src/styles/element-ui"
}
}
运行命令即可编译主题:npm run element-theme
四、总结
Element-ui 是一套非常好用的前端组件框架,它提供了丰富的组件和主题定制功能,可以满足不同业务场景下的需求。当然,我们只是简单地介绍了一些常用组件,在实际业务中,可以根据需求自行去了解和使用。