Element Plus Mo
本插件只是为了本人开发方便而发布,有些内容并不是原创,只是整合了大佬的,望周知!
ElementPlus 提示同步官网到2025/06/06
快捷键部分来自大佬:https://github.com/wanganjuan/element-plus-snippets.git
大佬的插件地址:https://marketplace.visualstudio.com/items?itemName=jingwang37.element-plus-snippets
悬停提示部分来自大佬:https://github.com/MikuBlog
大佬的插件地址:https://marketplace.visualstudio.com/items?itemName=wangluo.vue-element-plus-snippets
代码片段使用指南
Basic 基础组件
序号 |
触发键 |
Element 标签 |
描述 |
1 |
eprow |
<el-row> |
行布局容器 |
2 |
epcon |
<el-container> |
整体布局容器 |
3 |
epas |
<el-aside> |
侧边栏容器 |
4 |
ephe |
<el-header> |
顶部容器 |
5 |
epma |
<el-main> |
主要区域容器 |
6 |
epfo |
<el-footer> |
底部容器 |
7 |
epb |
<el-button> |
按钮组件 |
8 |
epbg |
<el-button-group> |
按钮组 |
序号 |
触发键 |
Element 标签 |
描述 |
1 |
epr |
<el-radio> |
单选框 |
2 |
eprg |
<el-radio-group> |
单选框组 |
3 |
eprb |
<el-radio-button> |
单选按钮 |
4 |
epc |
<el-checkbox> |
复选框 |
5 |
epcg |
<el-checkbox-group> |
复选框组 |
6 |
epcbt |
<el-checkbox-button> |
复选按钮 |
7 |
epi |
<el-input> |
输入框 |
8 |
epit |
<el-input type="textarea"> |
文本域 |
9 |
epa |
<el-autocomplete> |
自动完成输入框 |
10 |
epis |
<template slot=''> |
插槽模板 |
11 |
epin |
<el-input-number> |
计数器 |
12 |
epsel |
<el-select> |
选择器 |
13 |
epop |
<el-option> |
选择器选项 |
14 |
epca |
<el-cascader> |
级联选择器 |
15 |
epsw |
<el-switch> |
开关 |
16 |
epsl |
<el-slider> |
滑块 |
17 |
eptp |
<el-time-picker> |
时间选择器 |
18 |
epts |
<el-time-select> |
时间选择 |
19 |
eptsr |
<el-time-select> * 2 |
时间范围选择 |
20 |
eptpr |
<el-time-picker is-range> |
时间范围选择器 |
21 |
epdp |
<el-date-picker> |
日期选择器 |
22 |
epdpr |
<el-date-picker type="daterange,monthrange"> |
日期范围选择器 |
23 |
epu |
<el-upload> |
上传 |
24 |
epra |
<el-rate> |
评分 |
25 |
epcp |
<el-color-picker> |
颜色选择器 |
26 |
epf |
<el-form> |
表单 |
27 |
epfi |
<el-form-item> |
表单项 |
Data 数据展示
序号 |
触发键 |
Element 标签 |
描述 |
1 |
ept |
<el-table> |
表格 |
2 |
eptc |
<el-table-column> |
表格列 |
3 |
epta |
<el-tag> |
标签 |
4 |
eppr |
<el-progress> |
进度条 |
5 |
eptree |
<el-tree> |
树形控件 |
6 |
epp |
<el-pagination> |
分页 |
7 |
epav |
<el-avatar> |
头像 |
Navigation 导航组件
序号 |
触发键 |
Element 标签 |
描述 |
1 |
epmen |
<el-menu> |
导航菜单 |
2 |
epsubmen |
<el-submenu> |
子菜单 |
3 |
epmeni |
<el-menu-item> |
菜单项 |
4 |
epbr |
<el-breadcrumb> |
面包屑 |
5 |
epbri |
<el-breadcrumb-item> |
面包屑项 |
6 |
epdr |
<el-dropdown> |
下拉菜单 |
7 |
epsts |
<el-steps> |
步骤条 |
Others 其他组件
序号 |
触发键 |
Element 标签 |
描述 |
1 |
epdi |
<el-dialog> |
对话框 |
2 |
epto |
<el-tooltip> |
文字提示 |
3 |
eppo |
<el-popover> |
弹出框 |
4 |
eppoco |
<el-popconfirm> |
气泡确认框 |
5 |
epcard |
<el-card> |
卡片 |
6 |
epcaro |
<el-carousel> |
走马灯 |
7 |
epcolla |
<el-collapse> |
折叠面板 |
8 |
epti |
<el-timeline> |
时间线 |
9 |
epd |
<el-divider> |
分割线 |
10 |
epcal |
<el-calendar> |
日历 |
11 |
epim |
<el-image> |
图片 |
12 |
epback |
<el-backtop> |
回到顶部 |
13 |
epinfi |
v-infinite-scroll |
无限滚动 |
Vue 相关代码片段
序号 |
触发键 |
描述 |
1 |
vbase |
Vue3 基础模板 |
2 |
vbasets |
Vue3 TypeScript 模板 |
3 |
vpagecrud |
Element Plus CRUD 模板 |
3 |
vpageupload |
Element Plus 上传解析 |
3 |
vpageupload |
Element Plus 上传封装示例 |
JavaScript 工具函数
序号 |
触发键 |
描述 |
1 |
debounce |
防抖函数 |
2 |
throttle |
节流函数 |
3 |
validate |
自定义校验规则 |
4 |
rules |
表单校验规则 |
5 |
random |
随机数生成 |
| |