Element UI Snippets

by snowffer 全部

Sublime Text 的 element-ui 代码片段

标签片段

详细信息

版本 1.0.1
主页 github．com
问题 github．com
修改时间 6年前
最近查看时间 10分钟前
首次查看时间 7年前

安装量

总计 3K
Win 2K
Mac 681
Linux 230

	8月6日	8月5日	8月4日	8月3日	8月2日	8月1日	7月31日	7月30日	7月29日	7月28日	7月27日	7月26日	7月25日	7月24日	7月23日	7月22日	7月21日	7月20日	7月19日	7月18日	7月17日	7月16日	7月15日	7月14日	7月13日	7月12日	7月11日	7月10日	7月9日	7月8日	7月7日	7月6日	7月5日	7月4日	7月3日	7月2日	7月1日	6月30日	6月29日	6月28日	6月27日	6月26日	6月25日	6月24日	6月23日
Windows	0	1	0	0	1	0	1	0	1	0	0	0	0	1	0	0	0	0	1	0	0	0	0	1	0	1	0	0	0	0	0	0	0	0	1	1	0	0	0	1	2	1	0	0	0
Mac	1	1	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	1	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0
Linux	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0	0

Readme

源代码: raw．githubusercontent．com

安装

手动安装

将 element-ui-snippets 文件夹拖到指定路径下

Mac: /Users/< 用户名 >/Library/Application Support/Sublime Text 3/Packages/User/
Windows: < 安装驱动器 >:\Users\< 用户名 >\AppData\Roaming\Sublime Text 3\Packages\User\

通过 Package Control

安装 Package Control
打开命令面板
输入: Package Control: Install Package，按回车键
输入: Element UI Snippets，按回车键

特别说明：

对于像 el-table 这样需要子组件作为内容的部分，请使用 v-for 循环生成子组件。
默认情况下，在 .html 文件或 .vue 文件的模板部分不会显示自动完成提示。如果需要显示，您需要自己修改 Sublime Text 的设置。以下步骤（以 Mac 版本为例）
1. 选择菜单：Sublime Text -> Preferences -> Settings
2. 确保 "auto_complete" 选项的值为 "true"
3. 在 Preferences.sublime-settings – Users 文件中，添加以下键值
```
"auto_complete_triggers": [
    {
        "selector": "text.html",
        "characters": "l"
    }
],
```
  警告：此设置将触发包含字母 'l' 的所有缩写，即使这些缩写不在 Element UI Snippets 中定义。

缩写列表

以下所有 Element UI 标签，忽略闭合标签和更详细的信息。例如 elr 到 <el-radio>，实际上表示 <el-radio v-model="${1}" label="${2}">$3</el-radio>
缩写的顺序基本遵循 Element UI 官方网站指南上组件的顺序。提供额外的通用和选项部分。
总共有 104 个缩写，其中 9 个尚未实现。
只在 .html 或 .vue 文件中有效。

基本部分

编号。	触发键	Element 标签
1.	`elrow`
2.	`elcol`
3.	`elcon`
4.	`elas`
5.	`elhe`
6.	`elma`
7.	`elfo`
8.	`elcb`	`#409EFF`
9.	`elcs`	`#67C23A`
10.	`elcw`	`#E6A23C`
11.	`elcd`	`#F56C6C`
12.	`elci`	`#909399`
13.	TBD	`#303133`
14.	TBD	`#606266`
15.	TBD	`#909399`
16.	TBD	`#C0C4CC`
17.	TBD	`#DCDFE6`
18.	TBD	`#E4E7ED`
19.	TBD	`#EBEEF5`
20.	TBD	`#F2F6FC`
21.	`eltypo`	`font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;`
22.	`elb`	`el-button`

表单部分

编号。	触发键	Element 标签
1.	`elr`
2.	`elrg`
3.	`elc`
4.	`elcg`
5.	`eli`
6.	`elit`
7.	`elin`
8.	`elsel`
9.	`elop`
10.	`elca`
11.	`elsw`
12.	`elsl`
13.	`eltp`
14.	`elts`
15.	`eldp`
16.	`eldtp`
17.	`elu`
18.	`elra`
19.	`elcp`
20.	`eltr`
21.	`elf`
22.	`elfi`

数据部分

编号。	触发键	Element 标签
1.	`elta`
2.	`eltac`
3.	`eltag`
4.	`eltags`
5.	`eltagi`
6.	`eltagw`
7.	`eltagd`
8.	`elpr`
9.	`elprc`
10.	`eltree`
11.	`elpa`
12.	`elba`

通知部分

编号。	触发键	Element 标签
1.	`elal`
2.	`elals`
3.	`elali`
4.	`elalw`
5.	`elale`
6.	`elloads`	`element-loading-*`
7.	`elme`	`this.$message({})`
8.	`elmes`	`this.$message({type: 'success'})`
9.	`elmew`	`this.$message({type: 'warning'})`
10.	`elmee`	`this.$message({type: 'error'})`
11.	`elmei`	`this.$message({type: 'info'})`
12.	`elmebox`	`this.$msgbox({})`
13.	`elmeal`	`this.$alert({})`
14.	`elmecon`	`this.$confirm({})`
15.	`elmecons`	`this.$confirm({type: 'success'})`
16.	`elmeconw`	`this.$confirm({type: 'warning'})`
17.	`elmecone`	`this.$confirm({type: 'error'})`
18.	`elmeconi`	`this.$confirm({type: 'info'})`
19.	`elmepro`	`this.$prompt({})`
20.	`elnoti`	`this.$notify({})`
21.	`elnotis`	`this.$notify({type: 'success'})`
22.	`elnotiw`	`this.$notify({type: 'warning'})`
23.	`elnotie`	`this.$notify({type: 'error'})`
24.	`elnotii`	`this.$notify({type: 'info'})`
25.	待办事项	VNode 通知

导航部分

编号。	触发键	Element 标签
1.	`elmen`
2.	`elsubmen`
3.	`elmeni`
4.	`eltabs`
5.	`eltabp`
6.	`elbr`
7.	`elbri`
8.	`eldr`
9.	`eldri`
10.	`elsts`
11.	`elst`

其他部分

编号。	触发键	Element 标签
1.	`eldi`
2.	`elto`
3.	`elpop`
4.	`elcard`
5.	`elcaro`
6.	`elcaroi`
7.	`elcolla`
8.	`elcollai`

通用部分

编号。	触发键	Element 标签
1.	`el`	`＜el-*＞`
2.	`elic`	`＜el-icon-*＞`

选项部分

编号。	触发键	Element 标签
1.	`elpos`	位置
2.	`elanims`	动画类型