element-ui
element-ui 是饿了么前端团队推出的一款基于 vue2.0 的桌面端 UI 框架。手机端有对应框架是 Mint UI。
在 vue 项目导入 elementUI 框架
打开 main.js 文件，添加：
import ElementUI from 'element-plus';
import 'element-plus/theme-chalk/index.css';
createApp(App).use(router).use(ElementUI).mount('#app')
element-ui 引入图标
打开 main.js 文件，添加：
import * as ElIcons from '@element-plus/icons-vue'
const app = createApp(App);
app.use(router).use(ElementUI).mount("#app");
for(const iconName in ElIcons){
app.component(iconName,ElIcons[iconName]);
}
分栏
通过基础的24分栏，迅速简便地创建布局。
<template>
<div style="width: 100%;">
<el-row>
<el-col :span="24"><h1>标题栏</h1></el-col>
</el-row>
<el-row>
<el-col :span="4"><h1>导航栏</h1>
<router-link to="/elementUI/layout">布局</router-link>
</el-col>
<el-col :span="20">
<router-view/>
</el-col>
</el-row>
</div>
</template>
按钮
通过 type 属性，改变按钮颜色。
<el-row>
<el-button>Default</el-button>
<el-button type="primary">Primary</el-button>
<el-button type="success">Success</el-button>
<el-button type="info">Info</el-button>
<el-button type="warning">Warning</el-button>
<el-button type="danger">Danger</el-button>
<el-button>中文</el-button>
</el-row>
图标
<el-button type="info"><el-icon><DeleteFilled /></el-icon>删除</el-button>
<el-button><el-icon><CirclePlusFilled /></el-icon>添加</el-button>
<el-button type="warning"><el-icon><CoffeeCup /></el-icon>咖啡</el-button>
单选框
<template>
<div>
组件<br>
单选框<br>
<el-radio-group v-model="sex">
<el-radio label="男">男</el-radio>
<el-radio label="女">女</el-radio>
</el-radio-group>
{{sex}}
</div>
</template>
男和女表示显示内容，而 label 为单选框的值，相当于之前的 value 属性。
sex: "1"
默认选项：男
复选框/多选框
复选框<br>
<el-checkbox v-model="likeArray" label="ty">体育</el-checkbox>
<el-checkbox v-model="likeArray" label="ms">美术</el-checkbox>
<el-checkbox v-model="likeArray" label="yy">音乐</el-checkbox>
<el-checkbox v-model="likeArray" label="wd">舞蹈</el-checkbox>
<el-checkbox v-model="likeArray" label="jj">击剑</el-checkbox>
{{ likeArray }}
<el-checkbox-group v-model="checkList">
<el-checkbox label="Option A"/>
<el-checkbox label="Option B"/>
<el-checkbox label="Option C"/>
<el-checkbox label="disabled" disabled/> //不可选
<el-checkbox label="selected and disabled" disabled/> //不可选
</el-checkbox-group>
{{ checkList }}
return {
likeArray: [],
checkList: []
}
likeArray 是绑定数据的数组；label 为复选框元素的值；体育为显示文本。
下拉框
下拉框<br>
<el-select v-model="edu" placeholder="请选择学历">
<el-option label="中专" value="1">中专</el-option>
<el-option label="高中" value="2">高中</el-option>
<el-option label="大专" value="3">大专</el-option>
<el-option label="本科" value="4">本科</el-option>
</el-select>
{{edu}}
edu:""
日历框
日历框<br>
<el-date-picker
v-model="birthday"
type="date"
placeholder="请选择生日"
value-format="YYYY-MM-DD"
/>
{{birthday}}
birthday:""
表格
表格<br>
<el-table :data="cutBean.records" style="width: 100%">
<el-table-column fixed prop="id" label="编号" width="150" />
<el-table-column prop="name" label="姓名" />
<el-table-column prop="job" label="职位" />
<el-table-column prop="birthday" label="生日" />
<el-table-column fixed="right" label="操作" width="220" >
<template #default="scope">
<el-button type="info" @click="del(scope.row)">删除</el-button>
<el-button @click="update(scope.row)">修改</el-button>
</template>
</el-table-column>
</el-table>
:data="cutBean.records"：绑定表格数据，要求是一个 json数组。
：
label：表示表头的文字。
prop：表示当前列对应实体对象的属性名。
<el-button type="info" @click="del(scope.row)">删除：
scope.row：表示当前行对应的实体对象。
cutBean:{
records:[
{id:1,name:"coco",job:"经理",birthday:"1998-02-09"},
{id:2,name:"xx",job:"业务员",birthday:"1999-04-13"},
{id:3,name:"nana",job:"业务员",birthday:"2000-01-09"},
{id:4,name:"lll",job:"职工",birthday:"1997-11-20"},
{id:5,name:"ddd",job:"主任",birthday:"2001-01-30"}
],
total:20,
pages:5,
size:4,
current:1
}
methods:{
del(obj){
alert("删除："+obj.name)
},
update(obj){
alert("修改："+obj.name)
}
}
分页
分页<br>
<el-pagination
v-model:currentPage="cutBean.current"
v-model:page-size="cutBean.size"
background
layout="prev, pager, next, jumper"
:total="cutBean.total"
@current-change="findByItem"
/>
v-model:currentPage="cutBean.current"：表示绑定当前页。
v-model:page-size="cutBean.size"：绑定每页显示的记录数。
:total="cutBean.total"：表示绑定总记录数。
@current-change="findByItem"：表示点击页码触发的事件。
findByItem(pageNO){
alert("页码："+pageNO)
}
对话框/弹出框
弹出框<br>
<input type="button" value="显示弹出层" @click="dialogVisible = true">
<el-dialog
v-model="dialogVisible"
title="Tips"
width="30%"
>
<span>This is a message</span>
<template #footer>
<span class="dialog-footer">
<el-button @click="dialogVisible = false">Cancel</el-button>
<el-button type="primary" @click="dialogVisible = false">Confirm</el-button>
</span>
</template>
</el-dialog>
dialogVisible:false
菜单
<el-row>
<el-col :span="4" style="height: 800px;background-color: #545c64">
<el-menu
active-text-color="#ffd04b"
background-color="#545c64"
class="el-menu-vertical-demo"
default-active="2"
text-color="#fff"
@open="handleOpen"
@close="handleClose"
>
<el-sub-menu index="1">
<template #title>
<el-icon>
<location/>
</el-icon>
<span>elementUI</span>
</template>
<el-menu-item-group>
<el-menu-item index="1-1" @click="$router.push('/elementUI/layout')">布局</el-menu-item>
<el-menu-item index="1-2" @click="$router.push('/elementUI/component')">组件</el-menu-item>
<el-menu-item index="1-3" @click="$router.push('/elementUI/form')">表单</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="2">
<template #title>
<el-icon>
<location/>
</el-icon>
<span>房间管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="2-1">房间信息</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="3">
<template #title>
<el-icon>
<location/>
</el-icon>
<span>系统管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="3-1">用户管理</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
<el-sub-menu index="4">
<template #title>
<el-icon>
<location/>
</el-icon>
<span>个人信息管理</span>
</template>
<el-menu-item-group>
<el-menu-item index="4-1">修改密码</el-menu-item>
</el-menu-item-group>
</el-sub-menu>
</el-menu>
</el-col>
<el-col :span="20">
<router-view/>
</el-col>
</el-row>
表单验证
:model="userObj"：表示绑定的对象。
:rules="rules"：定义验证的规则。
：
prop="name"：表示具体的验证规则。
表单验证<br>
<el-form
ref="userObj"
:model="userObj"
:rules="rules"
label-width="120px"
class="demo-ruleForm"
status-icon
style="width: 400px"
>
<el-form-item label="姓名" prop="name">
<el-input v-model="userObj.name" />
</el-form-item>
<el-form-item label="电话" prop="phone">
<el-input v-model="userObj.phone" />
</el-form-item>
<el-form-item label="工资" prop="money">
<el-input v-model="userObj.money" />
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm()">添加</el-button>
</el-form-item>
</el-form>
data() {
return {
userObj: {},
rules: {
name: [
{required: true, message: '姓名必须填写', trigger: 'blur'},
{min: 3, max: 5, message: '姓名必须是3-5个字符', trigger: 'blur'},
],
phone: [
{pattern: /^1[35789]\d{9}$/, message: '电话必须是以13、15、17、18、19开头的11位数字', trigger: 'blur'},
],
money: [
{pattern: /^\d{4,5}$/, message: '工资必须是4-5位数字', trigger: 'blur'},
]
}
}
},
methods: {
submitForm() {
this.$refs.userForm.validate((valid) => { //调用验证方法，判断验证是否通过
if (valid == true) {
alert("执行操作");
}
});
}
}
图表
<div style="display: flex">
图表<br>
<div ref="barDiv" style="width: 600px;height:400px;"></div>
<div ref="pieDiv" style="width: 600px;height:400px;"></div>
<div ref="manyBarDiv" style="width: 600px;height:400px;"></div>
</div>
<script>
import * as echarts from 'echarts';
export default {
data() {
return {
productType:['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
sellNum: [5, 20, 36, 10, 10, 20],
gradeList: [
{ value: 5, name: '90以上' },
{ value: 4, name: '80-90' },
{ value: 12, name: '60-80' },
{ value: 6, name: '60以下' }
]
}
},
methods:{
createBar(){//柱状图
var myChart = echarts.init(this.$refs.barDiv);
// 指定图表的配置项和数据
var option = {
title: {
text: '销量统计'
},
tooltip: {},
legend: {
data: ['销量']
},
xAxis: {
data: this.productType
},
yAxis: {},
series: [
{
name: '销量',
type: 'bar',
data: this.sellNum
}
]
};
// 使用刚指定的配置项和数据显示图表。
myChart.setOption(option);
},
createPie(){//饼图
var pieChart = echarts.init(this.$refs.pieDiv);
var option = {
title: {
text: '学生成绩分布',
subtext: '2022-07-22',
left: 'center'
},
tooltip: {
trigger: 'item'
},
legend: {
orient: 'vertical',
left: 'left'
},
series: [
{
name: '成绩分布',
type: 'pie',
radius: '50%',
data: this.gradeList,
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
};
pieChart.setOption(option);
},
createManyBar(){
var manyBarChart = echarts.init(this.$refs.manyBarDiv);
const posList = [ 'left', 'right', 'top', 'bottom', 'inside', 'insideTop', 'insideLeft', 'insideRight', 'insideBottom', 'insideTopLeft', 'insideTopRight', 'insideBottomLeft', 'insideBottomRight' ];
app.configParameters = {
rotate: {
min: -90,
max: 90
},
align: {
options: {
left: 'left',
center: 'center',
right: 'right'
}
},
verticalAlign: {
options: {
top: 'top',
middle: 'middle',
bottom: 'bottom'
}
},
position: {
options: posList.reduce(function (map, pos) {
map[pos] = pos;
return map;
}, {})
},
distance: {
min: 0,
max: 100
}
};
app.config = {
rotate: 90,
align: 'left',
verticalAlign: 'middle',
position: 'insideBottom',
distance: 15,
onChange: function () {
const labelOption = {
rotate: app.config.rotate,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
position: app.config.position,
distance: app.config.distance
};
myChart.setOption({
series: [
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
},
{
label: labelOption
}
]
});
}
};
const labelOption = {
show: true,
position: app.config.position,
distance: app.config.distance,
align: app.config.align,
verticalAlign: app.config.verticalAlign,
rotate: app.config.rotate,
formatter: '{c} {name|{a}}',
fontSize: 16,
rich: {
name: {}
}
};
var option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow'
}
},
legend: {
data: ['食品类', '酒类', '药品类', '图书类']
},
toolbox: {
show: true,
orient: 'vertical',
left: 'right',
top: 'center',
feature: {
mark: { show: true },
dataView: { show: true, readOnly: false },
magicType: { show: true, type: ['line', 'bar', 'stack'] },
restore: { show: true },
saveAsImage: { show: true }
}
},
xAxis: [
{
type: 'category',
axisTick: { show: false },
data: ['2012', '2013', '2014', '2015']
}
],
yAxis: [
{
type: 'value'
}
],
series: [
{
name: '食品类',
type: 'bar',
barGap: 0,
label: labelOption,
emphasis: {
focus: 'series'
},
data: [2000, 1500, 1800, 2300]
},
{
name: '酒类',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [500, 290, 328, 459]
},
{
name: '药品类',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [1400, 1300, 1280, 1340]
},
{
name: '图书类',
type: 'bar',
label: labelOption,
emphasis: {
focus: 'series'
},
data: [985,810,768,840]
}
]
};
manyBarChart.setOption(option);
}
},
mounted() {
this.createBar();
this.createPie();
this.createManyBar();
}
}
</script>
\
