ElementPlus按需导入
1.安装
pnpm add element-plus
2.配置按需导入:
官方文档:快速开始 | Element Plus
按照官网按需导入中的自动导入步骤来进行
pnpm add -D unplugin-vue-components unplugin-auto-import
观察Vite代码与原vite文件的差别,将原vite文件中没有的,复制粘贴到合适的位置
3.直接使用组件,样式就是element-Plus的
4.默认components下的文件也会被自动注册
不需要再导入也能使用
Icon图标导入
1.安装
pnpm i @element-plus/icons-vue
官网参考: Icon 图标 | Element Plus
2.使用
先导入
import { 图标名 } from '@element-plus/icons-vue'
在el-input输入框里使用
<el-input :prefix-icon="Lock"></el-input>
组件中英文切换
全局配置中文
<script setup>
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
</script>
<template>
<div>
<!--App.vue只需要留一个路由出口router-view即可-->
<el-config-provider :locale="zhCn">
<router-view></router-view>
</el-config-provider>
</div>
</template>
ElementPlus常见组件
Layout布局
类似栅格网格系统,el-row表示一行,一行分成24份;el-col在el-row中使用,el-col表示列,其中:span="x"代表在一行中占x份,:offset="x"代表左侧margin的份数
Form表单
el-form为整个表单组件;el-form-item为表单的一行,其中label="xx"设置行标签
el-input加上show-password可以实现切换密码可见
<el-input type="password" show-password></el-input>
表单校验
校验规则:
(1)在el-form上配置:model="ruleFormRef"绑定的是整个form的数据对象
(2)在el-form上配置:rules="rules"绑定的是整个rules规则对象
(3)在el-form-item上配置props="name"配置生效的是哪个校验规则(和rules中的字段对应)
(4)表单元素上配置v-model="ruleForm.name"给表单元素绑定form的子属性
const formModel = ref({
username: '',
password: '',
repassword: '',
telphone: ''
})
//整个表单的校验规则
const rules = {
username: [
{
required: true, //非空校验
message: '请输入用户名', //消息提示
trigger: 'blur' //触发时机,两个值:blue表示失去焦点,一般在input组件中使;change为值改变,一般在选择框中使用
},
{
min: 5, //长度限制
max: 10,
message: '用户名必须是5-10位的字符',
trigger: 'blur'
}
],
password: [
{
required: true,
message: '请输入密码',
trigger: 'blur'
},
{
pattern: /^\S{6,15}$/, //正则表达式 \S非空字符
message: '密码必须是6-15位的非空字符',
trigger: 'blur'
}
],
telphone: [
{
pattern: /^[0-9]*$/,
message: '请输入纯数字手机号码',
trigger: 'blur'
}
]
}
切换页面(例如语言切换)会自动触发校验规则,用户体验感差
优化方法:给el-form组件添加
:validate-on-rule-change="false"
<el-form :model="ruleForm" :rules="rules" :validate-on-rule-change="false">
</el-form>
自定义校验规则
validator: (rule, value, callback)
(1)rule 当前校验规则相关的信息
(2)value 所校验的表单元素目前的表单值
(3)callback 无论成功还是失败,都需要 callback 回调
--callback()校验成功
--callback(new Error(错误信息)) 校验失败
默认是实时触发,要修改成失焦触发
const rules = {
repassword: [
{
validator: (rule, value, callback) => {
if (value !== formModel.value.password) {
callback(new Error('两次输入的密码不一致'))
} else {
callback() //校验成功,也需要callback
}
},
trigger: 'blur'
}
]
}
表单提交预校验(Form Exposes)
首先需要获取form组件
<script setup>
import { ref } from 'vue'
//获取dom元素
const form = ref()
</script>
<template>
<el-form ref="form"></el-form>
</template>
为提交按钮添加点击事件register
const register = async () => {
//注册成功之前,先进行校验,校验成功->请求,校验失败->自动提示
await form.value.validate()
console.log('开始注册请求')
}
重置表单
this.$refs.表单ref名.clearValidate()//移除整个表单的校验结果
this.$refs.表单ref名.clearValidate('prop属性')//移除某个prop属性的校验结果
this.$refs.表单ref名.resetFields()//将表单的所有字段重置为初始值同时移除表单的校验结果
行内表单
<el-form inline></el-form>
消息提示
ElMessage({
message: '成功',
type: 'success',
})
或
ElMessage.success('成功')
错误:‘ElMessage’ is not defined.
解决:如果使用的是按需导入,import ElMessage就会导致失效,应该在.eslintrc.cjs文件中添加语句声明全局变量名
globals: {
ElMessage: 'readonly',
ElMessageBox: 'readonly',
ElLoading: 'readonly'
}
Container 布局容器
Menu菜单
el-menu为整个菜单组件,其中active-text-color代表选中时的颜色,:default-active="$route.path"配置默认高亮的菜单项,router开启就可以点击跳转写在el-menu-item的index中的路径
el-menu-item为菜单项
<el-menu
active-text-color="#ffd04b"
background-color="#232323"
:default-active="$route.path"
text-color="#fff"
router
>
<el-menu-item index="/article/channel">
<el-icon><Management /></el-icon>
<span>文章分类</span>
</el-menu-item>
<el-menu-item index="/article/manage">
<el-icon><Promotion /></el-icon>
<span>文章管理</span>
</el-menu-item>
<el-sub-menu index="/user">
<!--多级菜单的标题 - 具名插槽title-->
<template #title>
<el-icon><UserFilled /></el-icon>
<span>个人中心</span>
</template>
<!--展开的内容 - 默认插槽-->
<el-menu-item index="/user/profile">
<el-icon><User /></el-icon>
<span>基本资料</span>
</el-menu-item>
<el-menu-item index="/user/avatar">
<el-icon><Crop /></el-icon>
<span>更换头像</span>
</el-menu-item>
<el-menu-item index="/user/password">
<el-icon><EditPen /></el-icon>
<span>重置密码</span>
</el-menu-item>
</el-sub-menu>
</el-menu>
下拉菜单
指令事件
消息弹出框
ElMessageBox.confirm('你确认要进行退出么', '温馨提示', {
type: 'warning',
confirmButtonText: '确认',
cancelButtonText: '取消'
})
注意:如果使用的是按需导入,import ElMessage就会导致失效,应该在.eslintrc.cjs文件中添加语句声明全局变量名
globals: {
ElMessage: 'readonly',
ElMessageBox: 'readonly',
ElLoading: 'readonly'
}
卡片
<template>
<el-card class="page-container">
<template #header>
<div class="header">
<span>文件传送</span>
<div class="extra">
<el-button type="primary">选择文件</el-button>
</div>
</div>
</template>
<slot></slot>
</el-card>
</template>
<style lang="scss" scoped>
.page-container {
min-height: 100%;
box-sizing: border-box;
.header {
display: flex;
justify-content: space-between;
align-items: center;
}
}
</style>
表格
el-table-column是一列,其中label是标题,prop是去对象中找对应的属性做渲染,width是宽度
表格中数据不显示:1)绑定的数据是不是响应式的 2)有没有加setup语法糖
序号
<el-table-column lable="序号" type="index"></el-table-column>
自定义列
scope.row可以拿到行信息,scope.row.属性名可以拿到某行信息里的,scope.$index是下标
或者函数传递参数
<el-table-column label="操作" width="150">
<template #default="{ row, $index }">
<el-button
@click="onEditChannel(row, $index)"
:icon="Edit"
circle
type="primary"
plain
>
</el-button>
<el-button
@click="onDelChannel(row, $index)"
:icon="Delete"
circle
type="danger"
plain
>
</el-button>
</template>
</el-table-column>
Table插槽
<template #empty>暂无数据</template>
按钮
type控制颜色;plain控制镂空效果;round
和 circle控制形状
加载
v-loading="true"
空状态
<el-empty description="没有数据"></el-empty>
对话框
Link链接
<el-link>...</el-link>
分页
v-model:current-page代表当前页码,v-model:page-size代表每页条数,:page-sizes可供用户选择的每页条数(注意要包含当前设置的每页条数),layout代表菜单栏(顺序和个数都是一一对应的),@size-change每页条数变化时触发的事件,@current-change当前页变化时触发的事件
抽屉
v-model控制显示与隐藏,:direction控制方向(默认从右往左),size控制大小
上传
action配置了后台接口地址,请求方式为post,请求参数name="file"
可以通过下面的API修改默认配置
:on-change控制上传事件,
const onSelectFile = (uploadFile) => {
console.log('图片链接:',uploadFile.raw)
}
js控制显示上传
上传组件ref.$el.querySelector('input').click()
单选框
v-model双向绑定数据
value单向获取选项数据(不能修改)
修改选项使用@input
弹框
出现弹窗闪现一下,立刻消失的问题,解决方法:
增加一个setTimeout延时
setTimeout(() => {
this.$confirm('此操作将会清空原有数据, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
//确定后执行
}).catch(() => {
//取消后执行
});
}, 200)