
信息展示类APP外包
1、集成wallet connect;
2、登录页面:游客登录(后端自动注册账号返回)+wallet connect登录(签名验证);
3、个人信息+设置页面(打开自动MINT出现推荐设置/高级设置选项);
4、排行榜页面;
5、项目展示页;
6、推送消息列表页,显示所有通知消息(缓存本地);
7、项目列表页,支持地址精确搜索、名称模糊搜索,可点击加入订阅列表、从订阅列表移除
8、订阅列表页,可新增订阅项目、移除已订阅项目,支持搜索
9、卡密激活页
10、地址追踪页,地址列表:增加、删除、查看详情功能;
11、高级规则设置页(列表展示)增加、删除、禁用规则/启用规则功能
12、国际化
13、app端+微信h5
14、开发架构和思路清晰合理 便于后期升级维护
15、主要是数据的展示与增删改,没有太多的业务逻辑,对于熟手来说应该是有很多组件可以直接复用。
16、可以使用uniapp、react native之类的。
17、请确保时间充裕,不要耽误彼此时间。
18、长期合作优先。
19、5天内能完成的请联系我,所谓“难者不会、会者不难”,它给时间效率高的熟手带来的是更高的收益,不建议新手接,耽误更多时间,不划算。
我方提供API接口
q:284550983
1、集成wallet connect;
2、登录页面:游客登录(后端自动注册账号返回)+wallet connect登录(签名验证);
3、个人信息+设置页面(打开自动MINT出现推荐设置/高级设置选项);
4、排行榜页面;
5、项目展示页;
6、推送消息列表页,显示所有通知消息(缓存本地);
7、项目列表页,支持地址精确搜索、名称模糊搜索,可点击加入订阅列表、从订阅列表移除
8、订阅列表页,可新增订阅项目、移除已订阅项目,支持搜索
9、卡密激活页
10、地址追踪页,地址列表:增加、删除、查看详情功能;
11、高级规则设置页(列表展示)增加、删除、禁用规则/启用规则功能
12、国际化
13、app端+微信h5
14、开发架构和思路清晰合理 便于后期升级维护
15、主要是数据的展示与增删改,没有太多的业务逻辑,对于熟手来说应该是有很多组件可以直接复用。
16、可以使用uniapp、react native之类的。
17、请确保时间充裕,不要耽误彼此时间。
18、长期合作优先。
19、5天内能完成的请联系我,所谓“难者不会、会者不难”,它给时间效率高的熟手带来的是更高的收益,不建议新手接,耽误更多时间,不划算。
我方提供API接口
q:284550983

在线生成Universal Links
Universal Links是苹果在WWDC 2015上提出的iOS9的新特性之一,此特性类似于深层链接,并能够方便地通过打开一个Https链接来直接启动您的客户端应用(手机有安装App)。对比起以往所使用的URL Scheme,这种新特性在实现Web-app的无缝链接时能够提供极佳的用户体验。
这具体是一种怎样的情景呢?举个例子,你的用户在微信里面浏览一个你们公司的网页,而此时用户手机也同时安装有你们公司的App;而Universal Links能够使得用户在打开某个详情页时直接打开你的app并到达app中相应的内容页面,从而实施用户想要的操作(例如查看某条新闻,查看某个商品的明细等等)
> Universal Links 和 URL Scheme有什么区别?
是两种不同技术的实现,都是通过苹果系统实现。
唯一不同的是URL Scheme 配置是通过打包来配置的,而深链是通过安装时请求https地址或者一个文件(内部为json结构),然后注册号https 和 app的对应。相当于URLScheme,调起更准确,universal和App的bundle ID(唯一) 相关联,所以不会产生冲突。原来的scheme URL因为并不唯一,所以可能会错误调起。
一、开启关联域名(Associated Domains)服务,到[苹果开发者网站]为当前的App ID开启关联域名(Associated Domains)服务:

配置Appld
二、创建新的(或更新现有的)描述文件
创建新的(或更新现有的)描述文件,下载并导入到XCode中(通过xcode自动生成的描述文件,可跳过这一步):
配置id
三、在Universal Links 功能模块中通过手动填写或者自动上传ipa 生成Universal Links
点击此处配置
1.手动生成Universal Links
1.1选择手动配置
1.2填入包名
1.3填入Team Id
1.4点击生成Universal Links 文件
2.上传ipa生成Universal Links
2.1点击自动配置
2.2点击选择ipa包,上传包
点击生成即可!
以上步骤都会生成一个文件,当下载完毕文件后,请将文件重命名为:apple-app-site-association 不要带任何后戳,然后直接上传服务器即可!
注意点
Team ID 非 证书ID 获取链接教程:https://www.chuxueyun.com/new/content/id-237.html
Team ID
四、微信配置
进入微信开发者后台(https://open.weixin.qq.com/)进入需要配置的app详情页,将地址填入配置等待审核通过
Universal Links是苹果在WWDC 2015上提出的iOS9的新特性之一,此特性类似于深层链接,并能够方便地通过打开一个Https链接来直接启动您的客户端应用(手机有安装App)。对比起以往所使用的URL Scheme,这种新特性在实现Web-app的无缝链接时能够提供极佳的用户体验。
这具体是一种怎样的情景呢?举个例子,你的用户在微信里面浏览一个你们公司的网页,而此时用户手机也同时安装有你们公司的App;而Universal Links能够使得用户在打开某个详情页时直接打开你的app并到达app中相应的内容页面,从而实施用户想要的操作(例如查看某条新闻,查看某个商品的明细等等)
> Universal Links 和 URL Scheme有什么区别?
是两种不同技术的实现,都是通过苹果系统实现。
唯一不同的是URL Scheme 配置是通过打包来配置的,而深链是通过安装时请求https地址或者一个文件(内部为json结构),然后注册号https 和 app的对应。相当于URLScheme,调起更准确,universal和App的bundle ID(唯一) 相关联,所以不会产生冲突。原来的scheme URL因为并不唯一,所以可能会错误调起。
一、开启关联域名(Associated Domains)服务,到[苹果开发者网站]为当前的App ID开启关联域名(Associated Domains)服务:
配置Appld
二、创建新的(或更新现有的)描述文件
创建新的(或更新现有的)描述文件,下载并导入到XCode中(通过xcode自动生成的描述文件,可跳过这一步):
配置id
三、在Universal Links 功能模块中通过手动填写或者自动上传ipa 生成Universal Links
点击此处配置
1.手动生成Universal Links
1.1选择手动配置
1.2填入包名
1.3填入Team Id
1.4点击生成Universal Links 文件
2.上传ipa生成Universal Links
2.1点击自动配置
2.2点击选择ipa包,上传包
点击生成即可!
以上步骤都会生成一个文件,当下载完毕文件后,请将文件重命名为:apple-app-site-association 不要带任何后戳,然后直接上传服务器即可!
注意点
Team ID 非 证书ID 获取链接教程:https://www.chuxueyun.com/new/content/id-237.html
Team ID
四、微信配置
进入微信开发者后台(https://open.weixin.qq.com/)进入需要配置的app详情页,将地址填入配置等待审核通过

公告:uni-app非V3版本编译器APP云端打包将于2022年7月1日正式下线

uniapp转快应用开放过程遇到的问题
uniapp框架允许里面除了小程序外还有两个选项-快应用联盟和华为快应用,千万不用以为快应用联盟那个可以取代华为那个,运行打包后生成的两个包quickapp-webview-huawei和quickapp-webview-union,它们分别需要分别使用Huawei QuickApp IDE(华为的开发工具)和 快应用开发工具来运行。
一开始还傻乎乎的以为快应用联盟是包括华为的是互相通用的两个开发选择,没想到是不通用的需要两个工具分别使用,使用快应用开发工具的确可以在右边的模拟器上面看到自己开发的页面,打开开发者选项后USB连接页可以正常连接,还会自动帮你安装预览工具到手机上面,就是最后调试手机哪里只显示一个根标签给你而已,页面全是一片空白,什么提示都没有。
在安装quickapp-webview-huawei后发现这个工具不能使用,工具选项昏暗,插入手机USB调试上面也是显示无设备,点击构建-快应用或者工具-生成签名这些功能都是无反应的,经过各种检测才发现好几台win7系统的电脑安装后都是无法使用,在win10上面安装就正常;
win7解决方法:下载一个12版本的node.exe替换下ide安装路径下的/resources/app/extensions/deveco-debug/ lib/ toolkit/nodeTool这个里面的node.exe,直接复制替换然后重新打开就好了,如果有问题就看下直接的node版本对不对,或者下载安装不启动直接替换再打开试试。
这个是Huawei QuickApp IDE默认安装的node版本,是14的,win7不能用
uniapp框架允许里面除了小程序外还有两个选项-快应用联盟和华为快应用,千万不用以为快应用联盟那个可以取代华为那个,运行打包后生成的两个包quickapp-webview-huawei和quickapp-webview-union,它们分别需要分别使用Huawei QuickApp IDE(华为的开发工具)和 快应用开发工具来运行。
一开始还傻乎乎的以为快应用联盟是包括华为的是互相通用的两个开发选择,没想到是不通用的需要两个工具分别使用,使用快应用开发工具的确可以在右边的模拟器上面看到自己开发的页面,打开开发者选项后USB连接页可以正常连接,还会自动帮你安装预览工具到手机上面,就是最后调试手机哪里只显示一个根标签给你而已,页面全是一片空白,什么提示都没有。
在安装quickapp-webview-huawei后发现这个工具不能使用,工具选项昏暗,插入手机USB调试上面也是显示无设备,点击构建-快应用或者工具-生成签名这些功能都是无反应的,经过各种检测才发现好几台win7系统的电脑安装后都是无法使用,在win10上面安装就正常;
win7解决方法:下载一个12版本的node.exe替换下ide安装路径下的/resources/app/extensions/deveco-debug/ lib/ toolkit/nodeTool这个里面的node.exe,直接复制替换然后重新打开就好了,如果有问题就看下直接的node版本对不对,或者下载安装不启动直接替换再打开试试。
这个是Huawei QuickApp IDE默认安装的node版本,是14的,win7不能用
收起阅读 »

官方文档这个地方是不是错的?我不会,请指点一下
https://uniapp.dcloud.io/uniCloud/cf-database-aggregate-operator.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81-33
求 min 小于 40 且 max 大于 60 的记录。
const $ = db.command.aggregate
let res = await db.collection('price').aggregate()
.project({
fullfilled: $.or([$.lt(['$min', 30]), $.gt(['$max', 60])])
})
.end()
$.lt(['$min', 30])这个应该是40还是30啊
https://uniapp.dcloud.io/uniCloud/cf-database-aggregate-operator.html#%E7%A4%BA%E4%BE%8B%E4%BB%A3%E7%A0%81-33
求 min 小于 40 且 max 大于 60 的记录。
const $ = db.command.aggregate
let res = await db.collection('price').aggregate()
.project({
fullfilled: $.or([$.lt(['$min', 30]), $.gt(['$max', 60])])
})
.end()
$.lt(['$min', 30])这个应该是40还是30啊
收起阅读 »
针对m1 mac 用户优化hbuilder的方法,替换不协调的图标以及更换arm版本node的全过程
新工作单位需要维护uniapp的遗留项目,不得不下载Hbuilder X,这篇文章专注解决和本人一样强迫症的用户,
图片不知道怎么插入,附件里有前后的对比图,一定要记得备份,防止操作失败或者不适用自己项目可以回滚过来
备份Hbuilder X,防止操作失败影响搬砖
- 进入应用程序目录对Hbuilder X 压缩,如操作过程中出现问题,可以删除APP并直接解压
替换图标
- 打开网站 https://macosicons.com/how-to#/,搜索HBuilder,找到喜欢的图标下载下来
- 打开 应用程序目录,点击选中Hbuilder X, 然后按下 command + i 打开简介窗口
- 拖动下载的图标到 简介窗口的图标位置,重启Hbuilder 新图标就换好了
修改Hbuilder 内置node 为 本机Arm版本
在终端执行 where node
,会输出本地node 所在位置
例如:/Users/xx/.nvm/versions/node/v16.14.2/bin/node
,
在终端执行 open /Users/xx/.nvm/versions/node/v16.14.2/bin
打开node所在目录,
以及 open /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node
,打开Hbuilder内置node目录,
接下去复制本地的node到HBuilderX的node目录中,记住是复制!!不要直接拖动过去
这时候项目是运行不了的,因为Hbuilder内置了node-sass,并不匹配Arm版node,
终端会报错,如下内容,不要根据提示去操作,不会有效果的
[0;31m--> LibSass 的二进制文件(/Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-arm64-93/binding.node)缺失,请执行下面3条命令下载对应版本的二进制文件:(有可能引发此错误的原因是 Node 版本变更)[0m
14:39:41.361 mkdir -p /Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-arm64-93
14:39:41.363 cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-arm64-93
14:39:41.365 curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.7.2/darwin-arm64-93_binding.node
替换node-sass 为 dart-sass
- 首先 终端执行
cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins
,打开plugins目录 - 执行
rm -rf compile-node-sass
删除node-sass目录 - 执行
yarn add sass
, - 重启编辑器
解决真机调试问题
一直没有看到用到这个功能,所以没发现,看到评论有问题,记录一下解决的过程,有其他问题可以也可以用这个方法
如发现某些功能异常,打开 hbuilder 帮助->查看运行日志,清空日志,重新操作未正常启动的功能。
查看日志,一般都是缺少一些模块的报错,如缺少在出错的插件目录下安装即可
- 在 /Applications/HBuilderX.app/Contents/HBuilderX/plugins/launcher 目录下安装 执行
yarn add archiver
- 清空plugins/launcher/tools/adbs 目录,下载arm版本adb拖动进去 或 使用brew安装adb,在hbuilder偏好设置- 运行配置- adb路径中修改 (但在活动监视器中adb进程还是会显示intel,不知为何)
- 重启编辑器
新工作单位需要维护uniapp的遗留项目,不得不下载Hbuilder X,这篇文章专注解决和本人一样强迫症的用户,
图片不知道怎么插入,附件里有前后的对比图,一定要记得备份,防止操作失败或者不适用自己项目可以回滚过来
备份Hbuilder X,防止操作失败影响搬砖
- 进入应用程序目录对Hbuilder X 压缩,如操作过程中出现问题,可以删除APP并直接解压
替换图标
- 打开网站 https://macosicons.com/how-to#/,搜索HBuilder,找到喜欢的图标下载下来
- 打开 应用程序目录,点击选中Hbuilder X, 然后按下 command + i 打开简介窗口
- 拖动下载的图标到 简介窗口的图标位置,重启Hbuilder 新图标就换好了
修改Hbuilder 内置node 为 本机Arm版本
在终端执行 where node
,会输出本地node 所在位置
例如:/Users/xx/.nvm/versions/node/v16.14.2/bin/node
,
在终端执行 open /Users/xx/.nvm/versions/node/v16.14.2/bin
打开node所在目录,
以及 open /Applications/HBuilderX.app/Contents/HBuilderX/plugins/node
,打开Hbuilder内置node目录,
接下去复制本地的node到HBuilderX的node目录中,记住是复制!!不要直接拖动过去
这时候项目是运行不了的,因为Hbuilder内置了node-sass,并不匹配Arm版node,
终端会报错,如下内容,不要根据提示去操作,不会有效果的
[0;31m--> LibSass 的二进制文件(/Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-arm64-93/binding.node)缺失,请执行下面3条命令下载对应版本的二进制文件:(有可能引发此错误的原因是 Node 版本变更)[0m
14:39:41.361 mkdir -p /Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-arm64-93
14:39:41.363 cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins/compile-node-sass/node_modules/node-sass-china/vendor/darwin-arm64-93
14:39:41.365 curl -o binding.node http://cdn.npm.taobao.org/dist/node-sass/v4.7.2/darwin-arm64-93_binding.node
替换node-sass 为 dart-sass
- 首先 终端执行
cd /Applications/HBuilderX.app/Contents/HBuilderX/plugins
,打开plugins目录 - 执行
rm -rf compile-node-sass
删除node-sass目录 - 执行
yarn add sass
, - 重启编辑器
解决真机调试问题
一直没有看到用到这个功能,所以没发现,看到评论有问题,记录一下解决的过程,有其他问题可以也可以用这个方法
如发现某些功能异常,打开 hbuilder 帮助->查看运行日志,清空日志,重新操作未正常启动的功能。
查看日志,一般都是缺少一些模块的报错,如缺少在出错的插件目录下安装即可
- 在 /Applications/HBuilderX.app/Contents/HBuilderX/plugins/launcher 目录下安装 执行
yarn add archiver
- 清空plugins/launcher/tools/adbs 目录,下载arm版本adb拖动进去 或 使用brew安装adb,在hbuilder偏好设置- 运行配置- adb路径中修改 (但在活动监视器中adb进程还是会显示intel,不知为何)
- 重启编辑器

速翔头条源码|新闻源码|资讯源码|新闻资讯系统|头条系统|自媒体源码系统
主要功能:头条推荐算法、视频、圈子、商城、直播、小视频、话题、投票、城市、天气、疫情、实名认证、发布、任务、邀请、深色模式、广告、采集、创作者等等
智能推荐:实现对用户符合兴趣的推荐内容,后台推荐可设置最新文章、随机文章、推荐文章等3中排序
创作平台:用户可发布图文、视频、圈子、微头条等功能,可设置手动、自动、禁止等发布功能
采集功能:采集包含文章、视频、圈子、图片、评论、用户数据,支持采集几十种频道,设置全天24小时全自动采集
本地城市:支持全国城市本地新闻,自动定位当前城市,可现实当前城市本地新闻、天气、预警,文章自动归类城市
疫情新闻:全自动采集疫情新闻,实际更新疫情数据,支持全国和海外疫情状态
任务系统:集成几十种新手和日常任务,可邀请好友、每日签到增加用户的黏性
深色模式:提供动态一键切换夜间功能,支持APP、H5、小程序
广告功能:APP、小程序、网站、H5每个功能都可设置随机广告、单独广告,同时可统计展示量、点击量数据
投票功能:用户可发起投票功能,提高互动的功能
话题功能:用户可以和其他人建立一个话题专栏,每个人都可以在这个话题专栏中一起交流和分享信息
全端包含安卓、苹果、H5(公众号)、微信小程序
免费提供开源系统、无任何加密限制
免费部署到服务器、数据配置,协助用户上线
免费协助上架、部署、申请第三方应用
免费修改系统全端不同主题、元素、背景
提供技术、维护、更新,合同等服务
官方网站:https://www.suxiangw.com/toutiao2.html
是否开源:全部开源
后台框架:PHP+MYSQL
技术支持:1年(BUG终身修复)
获取演示联系我们
技术QQ:1424445608
电话:15622289461(微信同号)
主要功能:头条推荐算法、视频、圈子、商城、直播、小视频、话题、投票、城市、天气、疫情、实名认证、发布、任务、邀请、深色模式、广告、采集、创作者等等
智能推荐:实现对用户符合兴趣的推荐内容,后台推荐可设置最新文章、随机文章、推荐文章等3中排序
创作平台:用户可发布图文、视频、圈子、微头条等功能,可设置手动、自动、禁止等发布功能
采集功能:采集包含文章、视频、圈子、图片、评论、用户数据,支持采集几十种频道,设置全天24小时全自动采集
本地城市:支持全国城市本地新闻,自动定位当前城市,可现实当前城市本地新闻、天气、预警,文章自动归类城市
疫情新闻:全自动采集疫情新闻,实际更新疫情数据,支持全国和海外疫情状态
任务系统:集成几十种新手和日常任务,可邀请好友、每日签到增加用户的黏性
深色模式:提供动态一键切换夜间功能,支持APP、H5、小程序
广告功能:APP、小程序、网站、H5每个功能都可设置随机广告、单独广告,同时可统计展示量、点击量数据
投票功能:用户可发起投票功能,提高互动的功能
话题功能:用户可以和其他人建立一个话题专栏,每个人都可以在这个话题专栏中一起交流和分享信息
全端包含安卓、苹果、H5(公众号)、微信小程序
免费提供开源系统、无任何加密限制
免费部署到服务器、数据配置,协助用户上线
免费协助上架、部署、申请第三方应用
免费修改系统全端不同主题、元素、背景
提供技术、维护、更新,合同等服务
官方网站:https://www.suxiangw.com/toutiao2.html
是否开源:全部开源
后台框架:PHP+MYSQL
技术支持:1年(BUG终身修复)
获取演示联系我们
技术QQ:1424445608
电话:15622289461(微信同号)

Windows/Linux 生成iOS证书及p12文件
# 用到 Windows 或者 Linux 下的 openssl 命令,请自行安装。
openssl 官网下载:https://www.openssl.org/source/
有开发和发布2套环境,总共4步操作,最终生成8个证书文件
一、生成csr文件
openssl genrsa -out ios.key 2048
openssl req -new -sha256 -key ios.key -out ios.csr
二、 生成mobileprovision文件
进入苹果后台地址:https://developer.apple.com/account/resources/profiles/list
三、生成cer文件
进入苹果后台地址: https://developer.apple.com/account/resources/certificates
四、生成P12文件
\# 需要用到第一步生成的 ios.key 文件,以及 Apple 生成的 ios_distribution.cer 和 ios_development.cer 文件。
openssl x509 -in ios_distribution.cer -inform DER -outform PEM -out ios_distribution.pem
openssl pkcs12 -export -inkey ios.key -in ios_distribution.pem -out ios_distribution.p12
openssl x509 -in ios_development.cer -inform DER -outform PEM -out ios_development.pem
openssl pkcs12 -export -inkey ios.key -in ios_development.pem -out ios_development.p12
最终生成的证书文件:
参考链接:https://www.cnblogs.com/liaozt/p/6202484.html
# 用到 Windows 或者 Linux 下的 openssl 命令,请自行安装。
openssl 官网下载:https://www.openssl.org/source/
有开发和发布2套环境,总共4步操作,最终生成8个证书文件
一、生成csr文件
openssl genrsa -out ios.key 2048
openssl req -new -sha256 -key ios.key -out ios.csr
二、 生成mobileprovision文件
进入苹果后台地址:https://developer.apple.com/account/resources/profiles/list
三、生成cer文件
进入苹果后台地址: https://developer.apple.com/account/resources/certificates
四、生成P12文件
\# 需要用到第一步生成的 ios.key 文件,以及 Apple 生成的 ios_distribution.cer 和 ios_development.cer 文件。
openssl x509 -in ios_distribution.cer -inform DER -outform PEM -out ios_distribution.pem
openssl pkcs12 -export -inkey ios.key -in ios_distribution.pem -out ios_distribution.p12
openssl x509 -in ios_development.cer -inform DER -outform PEM -out ios_development.pem
openssl pkcs12 -export -inkey ios.key -in ios_development.pem -out ios_development.p12
最终生成的证书文件:
参考链接:https://www.cnblogs.com/liaozt/p/6202484.html
收起阅读 »
10年工程师专业承接各种项目
前后端全能 什么都可以做 价格优惠 服务好
微信: Surzace
QQ: 2238267409
前后端全能 什么都可以做 价格优惠 服务好
微信: Surzace
QQ: 2238267409

plus.webview.create双向通信终于找到办法了
plus.webview.create官方没有给出html向app通信的方案,折腾了两天终于成功了,哈哈哈哈
plus.webview.create官方没有给出html向app通信的方案,折腾了两天终于成功了,哈哈哈哈

云函数上传不了
昨天一键登录还可以,今天就报错,云函数phone-login上传失败。失败原因:InvalidSpaceId.NotFound: The specified SpaceId does not exist. RequestId: 6E2A734C-218E-55BB-AA57-9AC1433CCB9F POST
昨天一键登录还可以,今天就报错,云函数phone-login上传失败。失败原因:InvalidSpaceId.NotFound: The specified SpaceId does not exist. RequestId: 6E2A734C-218E-55BB-AA57-9AC1433CCB9F POST
收起阅读 »
hbuilderx 增加elementui 提示
参考:https://github.com/snowffer/Element-UI-Snippets-VSCode
工具-代码设置-vue代码块
{
// 注意:本文档仅支持单行注释,并且'//'前不能有任何非空字符!!!
//
// HBuilderX使用json扩展代码块,兼容vscode的代码块格式
// 本文档修改完毕,保存即可生效,无需重启。
// 本文档用于用户自定义{1}代码块。
// 每个配置项的说明如下:
// 'key' :代码块显示名称,显示在代码助手列表中的名字,以下例子中'console.log'就是一个key。
// 'prefix' :代码块的触发字符,就是敲什么字母匹配这个代码块。
// 'body' :代码块的内容。内容中有如下特殊格式
// $1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1,如该位置有预置数据,则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3}
// $2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop)
// $0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。
// 双引号使用\\'转义
// 换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔
// 缩进需要用\\t表示,不能直接输入缩进!
// 'triggerAssist' :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false。
// 每个代码块以key为主键,多个代码块需要逗号分隔。
// 如果json语法不合法,底部会弹出错误信息,请注意修正。
// 例子:
// "console.log": {
// "prefix": "logtwo",
// "body": [
// "console.log('$1');",
// "\tconsole.log('$2');"
// ],
// "triggerAssist": false,
// "description": "Log output to console twice"
// }
//elementui提示
//https://github.com/snowffer/Element-UI-Snippets-VSCode/tree/master/snippets
"Basic: Layout el-row": {
"prefix": "elrow",
"body": [
"<el-row :gutter=\"${1:20}\">",
"\t<el-col :span=\"${2:12}\" :offset=\"${3:0}\">${4}</el-col>",
"\t<el-col :span=\"${5:12}\" :offset=\"${6:0}\">${7}</el-col>",
"</el-row>",
"${8}"
],
"description": "Element UI <el-row> with <el-col>"
},
"Basic: Layout el-col": {
"prefix": "elcol",
"body": [
"<el-col :span=\"${1}\" :offset=\"${2:0}\">",
"\t${3}",
"</el-col>",
"${4}"
],
"description": "Element UI <el-col>"
},
"Basic: Layout hidden class": {
"prefix": "elhc",
"body": [
"${1|hidden-xs-only,hidden-sm-only,hidden-sm-and-down,hidden-sm-and-up,hidden-md-only,hidden-md-and-down,hidden-md-and-up,hidden-lg-only,hidden-lg-and-down,hidden-lg-and-up,hidden-xl-only|}"
],
"description": "Element UI hidden class"
},
"Basic: Container el-container": {
"prefix": "elcon",
"body": [
"<el-container :direction=\"${1:vertical}\">",
"\t<el-header height=\"$2\">",
"\t\t${3:<!-- Header content -->}",
"\t</el-header>",
"\t<el-container :direction=\"${4:horizontal}\">",
"\t\t<el-aside width=\"${5:200px}\">",
"\t\t\t${6:<!-- Aside content -->}",
"\t\t</el-aside>",
"\t\t<el-container :direction=\"${7:vertical}\">",
"\t\t\t<el-main height=\"$8\">",
"\t\t\t\t${9:<!-- Main content -->}",
"\t\t\t</el-main>",
"\t\t\t<el-footer height=\"$10\">",
"\t\t\t\t${11:<!-- Footer content -->}",
"\t\t\t</el-footer>",
"\t\t</el-container>",
"\t</el-container>",
"</el-container>",
"${12}"
],
"description": "Element UI <el-container>"
},
"Basic: Container el-header": {
"prefix": "elhe",
"body": [
"<el-header height=\"$1\">",
"\t${2:<!-- Header content -->}",
"</el-header>",
"${3}"
],
"description": "Element UI <el-header>"
},
"Basic: Container el-aside": {
"prefix": "elas",
"body": [
"<el-aside width=\"${1:200px}\">",
"\t${2:<!-- Aside content -->}",
"</el-aside>",
"${3}"
],
"description": "Element UI <el-aside>"
},
"Basic: Container el-main": {
"prefix": "elma",
"body": [
"<el-main height=\"${1}\">",
"\t${2:<!-- Main content -->}",
"</el-main>",
"${3}"
],
"description": "Element UI <el-main>"
},
"Basic: Container el-footer": {
"prefix": "elfo",
"body": [
"<el-footer height=\"${1}\">",
"\t${2:<!-- Footer content -->}",
"</el-footer>",
"${3}"
],
"description": "Element UI <el-footer>"
},
"Basic: Color blue": {
"prefix": "elcb",
"body": ["#409EFF"],
"description": "Element UI Color Blue"
},
"Basic: Color danger": {
"prefix": "elcd",
"body": ["#F56C6C"],
"description": "Element UI Color Danger"
},
"Basic: Color info": {
"prefix": "elci",
"body": ["#909399"],
"description": "Element UI Color Info"
},
"Basic: Color success": {
"prefix": "elcs",
"body": ["#67C23A"],
"description": "Element UI Color Success"
},
"Basic: Color waring": {
"prefix": "elcw",
"body": ["#E6A23C"],
"description": "Element UI Color Waring"
},
"Basic: Color primary text": {
"prefix": "elcpt",
"body": ["#303133"],
"description": "Element UI Color Primary Text"
},
"Basic: Color regular text": {
"prefix": "elcrt",
"body": ["#606266"],
"description": "Element UI Color Regular Text"
},
"Basic: Color secondary text": {
"prefix": "elcst",
"body": ["#909399"],
"description": "Element UI Color Secondary Text"
},
"Basic: Color placeholder text": {
"prefix": "elcht",
"body": ["#C0C4CC"],
"description": "Element UI Color Placeholder Text"
},
"Basic: Color Base Border": {
"prefix": "elcbb",
"body": ["#DCDFE6"],
"description": "Element UI Color Base Border"
},
"Basic: Color Light Border": {
"prefix": "elclb",
"body": ["#E4E7ED"],
"description": "Element UI Color Light Border"
},
"Basic: Color Lighter Border": {
"prefix": "elclrb",
"body": ["#EBEEF5"],
"description": "Element UI Color Lighter Border"
},
"Basic: Color Extra Light Border": {
"prefix": "elelb",
"body": ["#DCDFE6"],
"description": "Element UI Color Extra Light Border"
},
"Basic: Typography": {
"prefix": "eltypo",
"body": ["font-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;"],
"description": "Element UI Font-family"
},
"Basic: Border Basic Shadow": {
"prefix": "elbbs",
"body": ["box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);"],
"description": "Element UI Border Basic Shadow"
},
"Basic: Border Light Shadow": {
"prefix": "elbls",
"body": ["box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"],
"description": "Element UI Border Light Shadow"
},
"Basic: Button": {
"prefix": "elb",
"body": [
"<el-button type=\"${1|primary,text,info,success,warning,danger|}\" size=\"${2|default,medium,small,mini|}\" @click=\"$3\">${4}</el-button>",
"${5}"
],
"description": "Element UI <el-button>"
},
"Basic: Button Group": {
"prefix": "elbg",
"body": [
"<el-button-group>",
"\t<el-button type=\"${1|primary,text,info,success,warning,danger|}\" size=\"${2|default,medium,small,mini|}\" @click=\"$3\">${4}</el-button>",
"\t<el-button type=\"${5|primary,text,info,success,warning,danger|}\" size=\"${2|default,medium,small,mini|}\" @click=\"$6\">${7}</el-button>",
"</el-button-group>",
"${8}"
],
"description": "Element UI <el-button-group>"
},
"Basic: Link": {
"prefix": "ell",
"body": [
"<el-link type=\"${1|primary,success,warning,danger,info|}\" :underline=\"${2:false}\" href=\"${3}\" target=\"${4:_blank}\">${5}</el-link>",
"${6}"
],
"description": "Element UI <el-button>"
},
"Form: Radio": {
"prefix": "elr",
"body": [
"<el-radio v-model=\"${1}\" label=\"${2}\" @change=\"${3}\">${4}</el-radio>",
"${5}"
],
"description": "Element UI <el-radio>"
},
"Form: Radio Group": {
"prefix": "elrg",
"body": [
"<el-radio-group v-model=\"$1\" @change=\"$2\">",
"\t<el-radio v-for=\"${3:item} in ${4:items}\" :key=\"${3:item}.${5:key}\" :label=\"${3:item}.${6:label}\">",
"\t\t{{${3:item}.${7:title}}}",
"\t</el-radio>",
"</el-radio-group>",
"${8}"
],
"description": "Element UI <el-radio-group> with <el-radio>"
},
"Form: Radio Button Group": {
"prefix": "elrbg",
"body": [
"<el-radio-group v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" @change=\"$3\">",
"\t<el-radio-button v-for=\"${4:item} in ${5:items}\" :key=\"${4:item}.${6:key}\" :label=\"${4:item}.${7:label}\">",
"\t\t{{${4:item}.${8:title}}}",
"\t</el-radio-button>",
"</el-radio-group>",
"${9}"
],
"description": "Element UI <el-radio-group> with <el-radio-button>"
},
"Form: Radio Button": {
"prefix": "elrb",
"body": [
"<el-radio-button v-model=\"${1}\" label=\"${2}\">${3}</el-radio-button>",
"${4}"
],
"description": "Element UI <el-radio>"
},
"Form: Checkbox": {
"prefix": "elc",
"body": [
"<el-checkbox v-model=\"${1}\" label=\"${2}\" :indeterminate=\"${3:false}\" @change=\"${4}\">{{$5}}</el-checkbox>",
"${6}"
],
"description": "Element UI <el-checkbox>"
},
"Form: Checkbox Group": {
"prefix": "elcg",
"body": [
"<el-checkbox-group v-model=\"$1\" @change=\"${2}\">",
"\t<el-checkbox v-for=\"${3:item} in ${4:items}\" :key=\"${3:item}.${5:key}\" :label=\"${3:item}.${6:label}\">",
"\t\t{{${3:item}.${7:label}}}",
"\t</el-checkbox>",
"</el-checkbox-group>",
"${8}"
],
"description": "Element UI <el-checkbox-group> with <el-checkbox>"
},
"Form: Checkbox Button Group": {
"prefix": "elcbg",
"body": [
"<el-checkbox-group v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" @change=\"${3}\">",
"\t<el-checkbox-button v-for=\"${4:item} in ${5:items}\" :key=\"${4:item}.${6:key}\" :label=\"${4:item}.${7:label}\">",
"\t\t{{${4:item}.${8:label}}}",
"\t</el-checkbox-button>",
"</el-checkbox-group>",
"${9}"
],
"description": "Element UI <el-checkbox-group> with <el-checkbox-button>"
},
"Form: Checkbox Button": {
"prefix": "elcbt",
"body": [
"<el-checkbox-button v-model=\"${1}\" label=\"${2}\" :indeterminate=\"${3:false}\" @change=\"${4}\">{{$5}}</el-checkbox-button>",
"${6}"
],
"description": "Element UI <el-checkbox-button>"
},
"Form: Input": {
"prefix": "eli",
"body": [
"<el-input v-model=\"$1\" placeholder=\"$2\" size=\"${3|normal,medium,small,mini|}\" clearable @change=\"$4\">$5</el-input>",
"${6}"
],
"description": "Element UI <el-input>"
},
"Form: Textarea": {
"prefix": "elit",
"body": [
"<el-input type=\"${1|text,textarea|}\" :rows=\"${2:2}\" v-model=\"$3\" placeholder=\"$4\" ",
"\t:maxlength=\"${5:-1}\" :show-word-limit=\"${6|false,true|}\" :autosize=\"{ minRows: ${7:2}, maxRows: ${8:4} }\">",
"</el-input>",
"${9}"
],
"description": "Element UI <el-input type=\"text,textarea\">"
},
"Form: Autocomplete": {
"prefix": "ela",
"body": [
"<el-autocomplete v-model=\"$1\" value-key=\"$2\" placeholder=\"${3}\" clearable",
"\t:debounce=\"$4\" :fetch-suggestions=\"${5}\" @select=\"$6\">$7</el-autocomplete>",
"${8}"
],
"description": "Element UI <el-autocomplete>"
},
"Form: Input Slot": {
"prefix": "elis",
"body": [
"<template slot=\"${1|prefix,suffix,prepend,append|}\">$2</template>",
"${3}"
],
"description": "Element UI <template slot=''>"
},
"Form: InputNumber": {
"prefix": "elin",
"body": [
"<el-input-number v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" label=\"$3\"",
"\t:min=\"${4:1}\" :max=\"${5:10}\" :step=\"${6:1}\" :controls=\"${7|true,false|}\" controls-position=\"${8|both,right|}\" @change=\"$9\">",
"</el-input-number>",
"${10}"
],
"description": "Element UI <el-input-number>"
},
"Form: Select": {
"prefix": "elsel",
"body": [
"<el-select v-model=\"$1\" value-key=\"$2\" placeholder=\"$3\" clearable filterable @change=\"$4\">",
"\t<el-option v-for=\"${5:item} in ${6:options}\"",
"\t\t:key=\"${5:item}.${7:value}\"",
"\t\t:label=\"${5:item}.${8:label}\"",
"\t\t:value=\"${5:item}.${9:value}\">",
"\t</el-option>",
"</el-select>",
"${10}"
],
"description": "Element UI <el-select>"
},
"Form: Select Remote Search": {
"prefix": "elselr",
"body": [
"<el-select v-model=\"$1\" value-key=\"$2\" placeholder=\"$3\" clearable filterable",
"\tremote reserve-keyword :remote-method=\"$4\" :loading=\"$5\" @change=\"$6\">",
"\t<el-option v-for=\"${7:item} in ${8:options}\"",
"\t\t:key=\"${7:item}.${9:value}\"",
"\t\t:label=\"${7:item}.${10:label}\"",
"\t\t:value=\"${7:item}.${11:value}\">",
"\t</el-option>",
"</el-select>",
"${12}"
],
"description": "Element UI <el-select>"
},
"Form: Select Option": {
"prefix": "elop",
"body": [
"<el-option :key=\"$1\" :label=\"$2\" :value=\"$3\"></el-option>",
"${3}"
],
"description": "Element UI <el-option>"
},
"Form: Select Option Group": {
"prefix": "elopg",
"body": [
"<el-option-group v-for=\"${1:group} in ${2:options}\"",
"\t:key=\"${1:group}.${3:value}\"",
"\t:label=\"${1:group}.${4:label}\">",
"\t<el-option v-for=\"${5:item} in ${1:group}.${6:options}\"",
"\t\t:key=\"${5:item}.${7:value}\"",
"\t\t:label=\"${5:item}.${8:label}\"",
"\t\t:value=\"${5:item}.${9:value}\">",
"\t</el-option>",
"<el-option-group>",
"${10}"
],
"description": "Element UI <el-option-group>"
},
"Form: Cascader": {
"prefix": "elca",
"body": [
"<el-cascader :options=\"${1:options}\" v-model=\"${2}\" clearable filterable :show-all-levels=\"${3|false,true|}\"",
"\t:props=\"{ expandTrigger: ${4|'hover','click'|}, multiple: ${5|true,false|}, checkStrictly: ${6|true,false|} }\" @change=\"${7}\">",
"</el-cascader>",
"${8}"
],
"description": "Element UI <el-cascader>"
},
"Form: Cascader Panel": {
"prefix": "elcap",
"body": [
"<el-cascader :options=\"${1:options}\" v-model=\"${2}\" @change=\"${3}\"",
"\t:props=\"{ expandTrigger: ${4|'hover','click'|}, multiple: ${5|true,false|}, checkStrictly: ${6|true,false|} }\">",
"</el-cascader>",
"${7}"
],
"description": "Element UI <el-cascader-panel>"
},
"Form: Switch": {
"prefix": "elsw",
"body": [
"<el-switch v-model=\"$1\" :active-value=\"${2:true}\" :inactive-value=\"${3:false}\" @change=\"$4\">",
"</el-switch>",
"${5}"
],
"description": "Element UI <el-switch>"
},
"Form: Slider": {
"prefix": "elsl",
"body": [
"<el-slider v-model=\"$1\" :min=\"$2\" :max=\"$3\" :step=\"$4\" vertical=\"${5:false}\" @change=\"$6\">",
"</el-slider>",
"${7}"
],
"description": "Element UI <el-slider>"
},
"Form: Time Select": {
"prefix": "elts",
"body": [
"<el-time-select v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"$3\"",
"\t:picker-options=\"{",
"\t\tstart: '${4}',",
"\t\tstep: '${5:00:30}',",
"\t\tend: '${6}',",
"\t}\"",
"\tchange=\"${7}\">",
"</el-time-select>",
"${8}"
],
"description": "Element UI <el-time-select>"
},
"Form: Time Select Range": {
"prefix": "eltsr",
"body": [
"<el-time-select v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"$3\"",
"\t:picker-options=\"{",
"\t\tstart: '${4}',",
"\t\tstep: '${5:00:30}',",
"\t\tend: '${6}',",
"\t}\">",
"</el-time-select>",
"<el-time-select v-model=\"$7\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"$8\"",
"\t:picker-options=\"{",
"\t\tstart: '${4}',",
"\t\tstep: '${5:00:30}',",
"\t\tend: '${6}',",
"\t\tminTime: $1",
"\t}\">",
"</el-time-select>",
"${9}"
],
"description": "Element UI <el-time-select> range"
},
"Form: TimePicker": {
"prefix": "eltp",
"body": [
"<el-time-picker v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" arrow-control",
"\t:picker-options=\"{",
"\t\tselectableRange: '${3:18:30:00} - ${4:20:30:00}'",
"\t}\"",
"\tplaceholder=\"${5:任意时间点}\">",
"</el-time-picker>",
"${6}"
],
"description": "Element UI <el-time-picker>"
},
"Form: TimePicker Range": {
"prefix": "eltpr",
"body": [
"<el-time-picker v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" arrow-control",
"\tis-range range-separator=\"${3:-}\" start-placeholder=\"$4\" end-placeholder=\"$5\"",
"\t:picker-options=\"{",
"\t\tselectableRange: '${6:18:30:00} - ${7:20:30:00}'",
"\t}\">",
"</el-time-picker>",
"${8}"
],
"description": "Element UI <el-time-picker is-range>"
},
"Form: DatePicker": {
"prefix": "eldp",
"body": [
"<el-date-picker v-model=\"$1\" type=\"${2|year,month,date,dates,week|}\" size=\"${3|normal,medium,small,mini|}\" placeholder=\"${4:选择日期时间}\">",
"</el-date-picker>",
"${5}"
],
"description": "Element UI <el-date-picker>"
},
"Form: DatePicker Range": {
"prefix": "eldpr",
"body": [
"<el-date-picker v-model=\"$1\" type=\"${2|daterange,monthrange|}\" size=\"${3|normal,medium,small,mini|}\"",
"\trange-separator=\"${4:-}\" start-placeholder=\"$5\" end-placeholder=\"$6\">",
"</el-date-picker>",
"${7}"
],
"description": "Element UI <el-date-picker>"
},
"Form: DateTimePicker": {
"prefix": "eldtp",
"body": [
"<el-date-picker v-model=\"$1\" type=\"datetime\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"${3:选择日期时间}\">",
"</el-date-picker>",
"${4}"
],
"description": "Element UI <el-date-picker type=\"datetime\">"
},
"Form: DateTimePicker Range": {
"prefix": "eldtpr",
"body": [
"<el-date-picker v-model=\"$1\" type=\"datetimerange\" size=\"${2|normal,medium,small,mini|}\"",
"\trange-separator=\"${3:-}\" start-placeholder=\"$4\" end-placeholder=\"$5\">",
"</el-date-picker>",
"${6}"
],
"description": "Element UI <el-date-picker type=\"datetime\">"
},
"Form: Upload": {
"prefix": "elu",
"body": [
"<el-upload",
"\taction=\"$1\"",
"\tref=\"${2:upload}\"",
"\t:on-remove=\"$3\"",
"\t:auto-upload=\"false\"",
"\tmultiple",
"\t:limit=\"${4:5}\"",
"\t:on-exceed=\"$5\"",
"\t:file-list=\"$6\">",
"\t<el-button slot=\"trigger\" size=\"small\" type=\"primary\">${7:select file}</el-button>",
"\t<el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"$8\">${9:upload to server}</el-button>",
"\t<div slot=\"tip\" class=\"el-upload__tip\">${10:jpg/png files with a size less than 500kb}</div>",
"</el-upload>",
"${11}"
],
"description": "Element UI <el-upload>"
},
"Form: Rate": {
"prefix": "elra",
"body": [
"<el-rate v-model=\"$1\" :allow-half=\"${2|false,true|}\" @change=\"$3\"></el-rate>",
"${4}"
],
"description": "Element UI <el-rate>"
},
"Form: ColorPicker": {
"prefix": "elcp",
"body": [
"<el-color-picker v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" :show-alpha=\"${3|true,false|}\" ></el-color-picker>",
"${4}"
],
"description": "Element UI <el-color-picker>"
},
"Form: Transfer": {
"prefix": "eltr",
"body": [
"<el-transfer v-model=\"$1\" :data=\"$2\" target-order=\"${3|original,push,unshift|}\" filterable @change=\"$4\"",
"\t:format=\"{noChecked: '\\${total}',hasChecked: '\\${checked}/\\${total}'}\">",
"</el-transfer>",
"${5}"
],
"description": "Element UI <el-transfer>"
},
"Form: Form": {
"prefix": "elf",
"body": [
"<el-form :model=\"${1:form}\" ref=\"${2:form}\" :rules=\"${3:rules}\" label-width=\"80px\" :inline=\"${4|false,true|}\" size=\"${5|normal,medium,small,mini|}\">",
"\t<el-form-item label=\"$6\">",
"\t\t<el-input v-model=\"${1:form}.${7}\"></el-input>",
"\t</el-form-item>",
"\t<el-form-item>",
"\t\t<el-button type=\"primary\" @click=\"onSubmit\">${8:立即创建}</el-button>",
"\t\t<el-button>${9:取消}</el-button>",
"\t</el-form-item>",
"</el-form>",
"${10}"
],
"description": "Element UI <el-form>"
},
"Form: Form Item": {
"prefix": "elfi",
"body": [
"<el-form-item label=\"$1\" size=\"${2|normal,medium,small,mini|}\">",
"\t$3",
"</el-form-item>",
"${4}"
],
"description": "Element UI <el-form-item>"
},
"Data: Table": {
"prefix": "elt",
"body": [
"<el-table :data=\"$1\" border stripe>",
"\t<el-table-column v-for=\"${2:col} in ${3:columns}\"",
"\t\t:prop=\"${2:col}.${4:id}\"",
"\t\t:key=\"${2:col}.${4:id}\"",
"\t\t:label=\"${2:col}.${5:label}\"",
"\t\t:width=\"${2:col}.${6:width}\">",
"\t</el-table-column>",
"</el-table>",
"${7}"
],
"description": "Element UI <el-table>"
},
"Data: Table Column": {
"prefix": "eltc",
"body": [
"<el-table-column :label=\"${1}\" :min-width=\"${2}\" :prop=\"${3}\" </el-table-column>",
"${0}"
],
"description": "Element UI <el-table-column>"
},
"Data: Tag": {
"prefix": "elta",
"body": [
"<el-tag type=\"${1|danger,info,success,warning|}\" size=\"${2|normal,medium,small,mini|}\" effect=\"${3|dark,plain|}\" closable @close=\"${4}\">$5</el-tag>",
"${6}"
],
"description": "Element UI <el-tag>"
},
"Data: Progress": {
"prefix": "elpr",
"body": [
"<el-progress type=\"${1|line,circle,dashboard|}\" :percentage=\"$2\" status=\"${3|success,exception,warning|}\" :stroke-width=\"${4:6}\"></el-progress>",
"${5}"
],
"description": "Element UI <el-progress>"
},
"Data: Tree": {
"prefix": "eltree",
"body": [
"<el-tree ref=\"${1:tree}\" :data=\"$2\" node-key=\"$3\" :props=\"$4\" empty-text=\"$5\" show-checkbox=\"${6|false,true|}\" highlight-current=\"${7|true,false|}\" @node-click=\"$8\">$9</el-tree>",
"${10}"
],
"description": "Element UI <el-tree>"
},
"Data: Pagination": {
"prefix": "elp",
"body": [
"<el-pagination",
"\t@size-change=\"${1:sizeChange}\"",
"\t@current-change=\"${2:currentChange}\"",
"\t:current-page.sync=\"${3:currentPage}\"",
"\t:page-sizes=\"${4:[20, 40, 80, 100]}\"",
"\t:page-size=\"${5:pageSize}\"",
"\tlayout=\"total, sizes, prev, pager, next, jumper\"",
"\t:total=\"${6:totalNum}\" background>",
"\t:pager-count=\"${7:7}\">",
"</el-pagination>",
"${8}"
],
"description": "Element UI <el-pagination>"
},
"Data: Badge": {
"prefix": "elba",
"body": [
"<el-badge :value=\"${1}\" :max=\"${2:99}\" :is-dot=\"${3|false,true|}\" :hidden=\"${4|false,true|}\" type=\"${5|primary,success,warning,danger,info|}\">",
"\t<el-button size=\"small\">$6</el-button>",
"</el-badge>",
"${7}"
],
"description": "Element UI <el-badge>"
},
"Data: Avatar": {
"prefix": "elav",
"body": [
"<el-avatar icon=\"el-icon-user-solid\" size=\"${1|large,medium,small|}\" shape=\"${2|circle,square|}\" :src=\"${3}\" fit=\"${4|fill,contain,cover,none,scale-down|}\"></el-avatar>",
"${5}"
],
"description": "Element UI <el-avatar>"
},
"Notice: Alert": {
"prefix": "elal",
"body": [
"<el-alert :title=\"$1\" type=\"${2|info,success,warning,error|}\" effect=\"${3|light,dark|}\" show-icon closable></el-alert>",
"${4}"
],
"description": "Element UI <el-alert>"
},
"Notice: Loading": {
"prefix": "elloads",
"body": [
"element-loading-text=\"${1:拼命加载中}\"",
"element-loading-spinner=\"${2:el-icon-loading}\"",
"element-loading-background=\"${3:rgba(0, 0, 0, 0.8)}\"",
"${4}"
],
"description": "Element UI loading options"
},
"Notice: Message": {
"prefix": "elme",
"body": [
"this.\\$message({",
"\tmessage: '$1',",
"\ttype: '${2|info,success,warning,error|}',",
"\tshowClose: ${3:true},",
"\tduration: ${4:3000},",
"});",
"${5}"
],
"description": "Element UI $message"
},
"Notice: Messagebox": {
"prefix": "elmebox",
"body": [
"this.\\$msgbox({",
"\ttitle: '$1',",
"\tmessage: '${2}',",
"\tshowCancelButton: true,",
"\tconfirmButtonText: '${3:OK}',",
"\tcancelButtonText: '${4:Cancel}',",
"\tcenter: ${5:false},",
"\tbeforeClose: (action, instance, done) => {",
"\t\t${6}",
"\t}",
"}).then(action => {",
"\t${7}",
"}).catch(() => {",
"\t${8}",
"});",
"${9}"
],
"description": "Element UI $msgbox"
},
"Notice: Messagebox Alert": {
"prefix": "elmeal",
"body": [
"this.\\$alert('${1:content}', '${2:title}', {",
"\tconfirmButtonText: '${3:OK}',",
"\tcallback: action => {",
"\t\t${4}",
"\t}",
"})",
"${5}"
],
"description": "Element UI $alert"
},
"Notice: Messagebox Confirm": {
"prefix": "elmecon",
"body": [
"this.\\$confirm('${1:content}', '${2:title}', {",
"\tconfirmButtonText: '${3:OK}',",
"\tcancelButtonText: '${4:Cancel}',",
"\ttype: '${5|success,info,warning,erro|}',",
"}).then(action => {",
"\t${6}",
"}).catch(() => {",
"\t${7}",
"});",
"${8}"
],
"description": "Element UI $confirm"
},
"Notice: Messagebox Prompt": {
"prefix": "elmepro",
"body": [
"this.\\$prompt('${1:content}', '${2:title}', {",
"\tconfirmButtonText: '${3:OK}',",
"\tcancelButtonText: '${4:Cancel}',",
"\tinputPattern: / ${5} /,",
"\tinputErrorMessage: '${6}',",
"}).then(({ value }) => {",
"\t${7}",
"}).catch(() => {",
"\t${8}",
"});",
"${9}"
],
"description": "Element UI $prompt"
},
"Notice: Notification": {
"prefix": "elno",
"body": [
"this.\\$notify({",
"\ttitle: '${1:title}',",
"\tmessage: '${2:message}',",
"\ttype: '${3|info,success,warning,error|}',",
"\tduration: '${4|4500, 0|}',",
"\tposition: '${5|top-right,top-left,bottom-right,bottom-left|}',",
"\tshowClose: '${6:true}',",
"});",
"${7}"
],
"description": "Element UI $notify"
},
"Notice: Notification with type": {
"prefix": "elnot",
"body": [
"this.\\$notify.${1|info,success,warning,error|}({",
"\ttitle: '${2:title}',",
"\tmessage: '${3:message}',",
"\tduration: '${4|4500, 0|}',",
"\tposition: '${5|top-right,top-left,bottom-right,bottom-left|}',",
"\tshowClose: '${6:true}',",
"});",
"${7}"
],
"description": "Element UI $notify.type"
},
"Navigation: NavMenu Menu": {
"prefix": "elmen",
"body": [
"<el-menu mode=\"${1|horizontal,vertical|}\" default-active=\"$2\" @select=\"$3\">",
"\t<el-submenu v-for=\"(${4:submenus}, ${5:index}) in ${6:menus}\"",
"\t\t:index=\"${5:index} + 1\"",
"\t\t:key=\"${4:submenus}.${7:key}\">",
"\t\t<template slot=\"title\">{{${4:submenus}.${8:title}}}</template>",
"\t\t<el-menu-item v-for=\"(${9:item}, ${10:subIndex}) in ${4:submenus}.${11:menus}\"",
"\t\t\t:index=\"(${5:index} + 1) + '-' + (${10:subIndex} + 1)\"",
"\t\t\t:key=\"${9:item}.${12:key}\">",
"\t\t\t\t{{${9:item}.${13:title}}}",
"\t\t</el-menu-item>",
"\t</el-submenu>",
"</el-menu>",
"${14}"
],
"description": "Element UI <el-menu> with <el-submenu> and <el-menu-item>"
},
"Navigation: NavMenu subMenu": {
"prefix": "elsubmen",
"body": [
"<el-submenu :index=\"$1\">",
"\t<template slot=\"title\">$2</template>",
"\t<el-menu-item v-for=\"(${3:item}, ${4:subIndex}) in $5\"",
"\t\t:index=\"${4:subIndex} + 1\"",
"\t\t:key=\"${3:item}.${6:key}\">",
"\t\t\t{{${3:item}.${7:title}}}",
"\t</el-menu-item>",
"</el-submenu>",
"${8}"
],
"description": "Element UI <el-submenu> with <el-menu-item>"
},
"Navigation: NavMenu Menu Item": {
"prefix": "elmeni",
"body": [
"<el-menu-item index=\"$1\" key=\"$2\">$3</el-menu-item>",
"${4}"
],
"description": "Element UI <el-menu-item>"
},
"Navigation: Tabs": {
"prefix": "eltabs",
"body": [
"<el-tabs v-model=\"$1\" type=\"${2|card,border-card,normal|}\" tab-position=\"${3|top,left,right,bottom|}\" @tab-click=\"$4\">",
"\t<el-tab-pane v-for=\"${5:item} in ${6:panes}\"",
"\t\t:key=\"${5:item}.${7:key}\"",
"\t\t:label=\"${5:item}.${8:label}\"",
"\t\t:name=\"${5:item}.${7:key}\">",
"\t\t$9",
"\t</el-tab-pane>",
"</el-tabs>",
"${10}"
],
"description": "Element UI <el-tabs> with <el-tab-pane>"
},
"Navigation: Tabs tab pane": {
"prefix": "eltabp",
"body": [
"<el-tab-pane :label=\"$1\" :name=\"$2\">",
"\t$3",
"</el-tab-pane>",
"${4}"
],
"description": "Element UI <el-tab-pane>"
},
"Navigation: Breadcrumb": {
"prefix": "elbr",
"body": [
"<el-breadcrumb separator-class=\"${1:el-icon-arrow-right}\">",
"\t<el-breadcrumb-item :to=\"{ path: '$2', name: '$3' }\">$4</el-breadcrumb-item>",
"\t<el-breadcrumb-item :to=\"{ path: '$5', name: '$6' }\">$7</el-breadcrumb-item>",
"</el-breadcrumb>",
"${8}"
],
"description": "Element UI <el-breadcrumb>"
},
"Navigation: Breadcrumb Item": {
"prefix": "elbri",
"body": [
"<el-breadcrumb-item :to=\"{ path: '$1', name: '$2' }\">$3</el-breadcrumb-item>",
"${4}"
],
"description": "Element UI <el-breadcrumb-item>"
},
"Navigation: PageHeader": {
"prefix": "elpa",
"body": [
"<el-page-header @back=\"$1\" content=\"$2\"></el-page-header>",
"${3}"
],
"description": "Element UI <el-page-header>"
},
"Navigation: Dropdown": {
"prefix": "eldr",
"body": [
"<el-dropdown trigger=\"${1:click}\" size=\"${2|default,medium,small,mini|}\" split-button type=\"${3|primary,success,warning,danger,info,text|}\" @command=\"$4\">",
"\t${5:title}",
"\t<el-dropdown-menu slot=\"dropdown\">",
"\t\t<el-dropdown-item v-for=\"${6:item} in ${7:items}\"",
"\t\t\t:key=\"${6:item}.${8:key}\" :command=\"${6:item}.${9:command}\">",
"\t\t\t{{${6:item}.${10:title}}}",
"\t\t</el-dropdown-item>",
"\t</el-dropdown-menu>",
"</el-dropdown>",
"${11}"
],
"description": "Element UI <el-dropdown> with <el-dropdown-item>"
},
"Navigation: Dropdown Item": {
"prefix": "eldri",
"body": [
"<el-dropdown-item :command=\"$1\">$2</el-dropdown-item>",
"${3}"
],
"description": "Element UI <el-dropdown-item>"
},
"Navigation: Steps": {
"prefix": "elsts",
"body": [
"<el-steps :active=\"$1\" direction=\"${2|horizontal,vertical|}\" process-status=\"${3|wait,process,finish,error,success|}\" finish-status=\"${4|wait,process,finish,error,success|}\">",
"\t<el-step v-for=\"${5:item} in ${6:items}\"",
"\t\t:key=\"${5:item}.${7:key}\"",
"\t\t:title=\"${5:item}.${8:title}\"",
"\t\t:description=\"${5:item}.${9:description}\"",
"\t\t:icon=\"${5:item}.${10:icon}\">",
"\t</el-step>",
"</el-steps>",
"${11}"
],
"description": "Element UI <el-steps> with <el-step>"
},
"Navigation: Steps Step": {
"prefix": "elst",
"body": [
"<el-step :title=\"$1\" :description=\"$2\" :icon=\"$3\"></el-step>",
"${4}"
],
"description": "Element UI <el-step>"
},
"Others: Dialog": {
"prefix": "eldi",
"body": [
"<el-dialog title=\"$1\" :visible.sync=\"$2\" width=\"${3:30%}\" @close=\"$4\">",
"\t<span>$5</span>",
"\t<span slot=\"footer\">",
"\t\t<el-button @click=\"$2 = false\">Cancel</el-button>",
"\t\t<el-button type=\"primary\" @click=\"$6\">OK</el-button>",
"\t</span>",
"</el-dialog>",
"${7}"
],
"description": "Element UI <el-dialog>"
},
"Others: Tooltip": {
"prefix": "elto",
"body": [
"<el-tooltip content=\"$1\" placement=\"${2|top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end|}\" effect=\"${3|dark,light|}\">",
"\t${4:<!-- content to trigger tooltip here -->}",
"</el-tooltip>",
"${5}"
],
"description": "Element UI <el-tooltip>"
},
"Others: Popover": {
"prefix": "elpo",
"body": [
"<el-popover",
"\t:ref=\"$1\"",
"\tplacement=\"${2|top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end|}\"",
"\ttitle=\"$3\"",
"\twidth=\"$4\"",
"\ttrigger=\"${5|click,focus,hover,manual|}\"",
"\tcontent=\"$6\">",
"\t${7: <!-- <el-button slot=\"reference\">content</el-button> -->}",
"</el-popover>",
"${8}"
],
"description": "Element UI <el-popover>"
},
"Others: Popconfirm": {
"prefix": "elpoco",
"body": [
"<el-popconfirm",
"\ttitle=\"$1\"",
"\tconfirmButtonText=\"$2\"",
"\tcancelButtonText=\"$3\"",
"\tconfirmButtonType=\"${4|primary,text,info,success,warning,danger|}\"",
"\tcancelButtonType=\"${5|text,primary,info,success,warning,danger|}\"",
"\ticon=\"${6:el-icon-question}\"",
"\ticonColor=\"${7:#f90}\"",
"\thideIcon=\"${8|false,true|}\">",
"\t<el-button slot=\"reference\">$9</el-button>",
"</el-popconfirm>",
"${10}"
],
"description": "Element UI <el-popconfirm>"
},
"Others: Card": {
"prefix": "elcard",
"body": [
"<el-card shadow=\"${1|always,hover,never|}\" :body-style=\"${2:{ padding: '20px' }}\">",
"\t<div slot=\"header\">",
"\t\t<span>${3:<!-- card title -->}</span>",
"\t</div>",
"\t${4:<!-- card body -->}",
"</el-card>",
"${5}"
],
"description": "Element UI <el-card>"
},
"Others: Carousel": {
"prefix": "elcaro",
"body": [
"<el-carousel height=\"${1:150px}\" type=\"${2|default,card|}\" direction=\"${3|horizontal,vertical|}\"",
"\t:initial-index=\"${4:0}\" :autoplay=\"${5|true, false|}\" :interval=\"${6:3000}\" :loop=\"${7|true,false|}\"",
"\ttrigger=\"${8|hover,click|}\" indicator-position=\"${9|outside,inside,none|}\" arrow=\"${10|hover,always,never|}\">",
"\t<el-carousel-item v-for=\"${11:item} in ${12:items}\" :key=\"${11:item}.${13:key}\" :label=\"${14}\">",
"\t\t${15:<!-- content -->}",
"\t</el-carousel-item>",
"</el-carousel>",
"${16}"
],
"description": "Element UI <el-carousel> with <el-carousel-item>"
},
"Others: Carousel Item": {
"prefix": "elcaroi",
"body": [
"<el-carousel-item :label=\"${1}\">",
"\t${2:<!-- content -->}",
"</el-carousel-item>",
"${3}"
],
"description": "Element UI <el-carousel-item>"
},
"Others: Collapse": {
"prefix": "elcolla",
"body": [
"<el-collapse v-model=\"${1:activeNames}\" :accordion=\"${2:false}\" @change=\"$3\">",
"\t<el-collapse-item v-for=\"${4:item} in ${5:items}\"",
"\t\t:key=\"${4:item}.${6:id}\"",
"\t\t:title=\"${4:item}.${7:title}\"",
"\t\t:name=\"${4:item}.${6:id}\">",
"\t\t${8:<!-- content -->}",
"\t</el-collapse-item>",
"</el-collapse>",
"${9}"
],
"description": "Element UI <el-collapse> with <el-collapse-item>"
},
"Others: Collapse Item": {
"prefix": "elcollai",
"body": [
"<el-collapse-item :title=\"$1\" :name=\"$2\">",
"\t${3:<!-- content -->}",
"</el-collapse-item>",
"${4}"
],
"description": "Element UI <el-collapse-item>"
},
"Others: Collapse Timeline": {
"prefix": "elti",
"body": [
"<el-timeline :reverse=\"$1\">",
"\t<el-timeline-item v-for=\"${2:item} in ${3:items}\"",
"\t\t:key=\"${2:item}.${4:id}\"",
"\t\t:timestamp=\"${2:item}.${5:timestamp}\"",
"\t\tplacement=\"${6|top,bottom|}\"",
"\t\ttype=\"${7|primary,success,warning,danger,info|}\"",
"\t\tsize=\"${8|normal,large|}\">",
"\t\t${9:<!-- content -->}",
"\t</el-timeline-item>",
"</el-timeline>",
"${10}"
],
"description": "Element UI <el-timeline> with <el-timeline-item>"
},
"Others: Collapse Timeline Item": {
"prefix": "eltii",
"body": [
"<el-timeline-item",
"\ttimestamp=\"${1}\"",
"\tplacement=\"${2|top,bottom|}\"",
"\ttype=\"${3|primary,success,warning,danger,info|}\"",
"\tsize=\"${4|normal,large|}\">",
"\t${5:<!-- content -->}",
"</el-timeline-item>",
"${6}"
],
"description": "Element UI <el-timeline-item>"
},
"Others: Divider": {
"prefix": "eld",
"body": [
"<el-divider direction=\"${1|horizontal,vertical|}\" content-position=\"${2|left,right,center|}\">$3</el-divider>",
"${4}"
],
"description": "Element UI <el-divider>"
},
"Others: Calendar": {
"prefix": "elcal",
"body": [
"<el-calendar v-model=\"${1}\" :first-day-of-week=\"${2:1}\"></el-calendar>",
"${3}"
],
"description": "Element UI <el-calendar>"
},
"Others: Image": {
"prefix": "elim",
"body": [
"<el-image :src=\"${1}\" fit=\"${2|fill,contain,cover,none,scale-down|}\" :lazy=\"${3|true,false|}\"></el-image>",
"${4}"
],
"description": "Element UI <el-image>"
},
"Others: Backtop": {
"prefix": "elback",
"body": [
"<el-backtop :target=\"${1}\" :right=\"${2:40}\" :bottom=\"${3:40}\">$4</el-backtop>",
"${5}"
],
"description": "Element UI <el-backtop>"
},
"Others: InfiniteScroll": {
"prefix": "elinfi",
"body": [
"v-infinite-scroll=\"${1}\"",
":infinite-scroll-delay=\"${2}\"",
":infinite-scroll-distance=\"${3}\"",
":infinite-scroll-disabled=\"${4|false,true|}\"",
":infinite-scroll-immediate=\"${5|true,false|}\""
],
"description": "Element UI v-infinite-scroll"
},
"Others: Drawer": {
"prefix": "eldra",
"body": [
"<el-drawer title=\"${1}\" :visible.sync=\"${2}\" direction=\"${3|rtl,ltr,ttb,btt|}\" size=\"${4:30%}\"",
"\t:before-close=\"${5}\" :destroy-on-close=\"${6|true,false|}\" :show-close=\"${7|true,false|}\" :wrapperClosable=\"${8|true,false|}\">",
"</el-drawer>",
"${9}"
],
"description": "Element UI <el-drawer>"
},
//自己编写
"table-column-slot": {
"prefix": "elss",
"body": [
"<template slot-scope=\"scope\">",
"\t${1}",
"</template>",
"${0}"
],
"description": "template slot-scope"
}
//elementui提示结束
}
参考:https://github.com/snowffer/Element-UI-Snippets-VSCode
工具-代码设置-vue代码块
{
// 注意:本文档仅支持单行注释,并且'//'前不能有任何非空字符!!!
//
// HBuilderX使用json扩展代码块,兼容vscode的代码块格式
// 本文档修改完毕,保存即可生效,无需重启。
// 本文档用于用户自定义{1}代码块。
// 每个配置项的说明如下:
// 'key' :代码块显示名称,显示在代码助手列表中的名字,以下例子中'console.log'就是一个key。
// 'prefix' :代码块的触发字符,就是敲什么字母匹配这个代码块。
// 'body' :代码块的内容。内容中有如下特殊格式
// $1 表示代码块输入后光标的所在位置。如需要多光标,就在多个地方配置$1,如该位置有预置数据,则写法是${1:foo1}。多选项即下拉候选列表使用${1:foo1/foo2/foo3}
// $2 表示代码块输入后再次按tab后光标的切换位置tabstops(代码块展开后按tab可以跳到下一个tabstop)
// $0代表代码块输入后最终光标的所在位置(也可以按回车直接跳过去)。
// 双引号使用\\'转义
// 换行使用多个数组表示,每个行一个数组,用双引号包围,并用逗号分隔
// 缩进需要用\\t表示,不能直接输入缩进!
// 'triggerAssist' :为true表示该代码块输入到文档后立即在第一个tabstop上触发代码提示,拉出代码助手,默认为false。
// 每个代码块以key为主键,多个代码块需要逗号分隔。
// 如果json语法不合法,底部会弹出错误信息,请注意修正。
// 例子:
// "console.log": {
// "prefix": "logtwo",
// "body": [
// "console.log('$1');",
// "\tconsole.log('$2');"
// ],
// "triggerAssist": false,
// "description": "Log output to console twice"
// }
//elementui提示
//https://github.com/snowffer/Element-UI-Snippets-VSCode/tree/master/snippets
"Basic: Layout el-row": {
"prefix": "elrow",
"body": [
"<el-row :gutter=\"${1:20}\">",
"\t<el-col :span=\"${2:12}\" :offset=\"${3:0}\">${4}</el-col>",
"\t<el-col :span=\"${5:12}\" :offset=\"${6:0}\">${7}</el-col>",
"</el-row>",
"${8}"
],
"description": "Element UI <el-row> with <el-col>"
},
"Basic: Layout el-col": {
"prefix": "elcol",
"body": [
"<el-col :span=\"${1}\" :offset=\"${2:0}\">",
"\t${3}",
"</el-col>",
"${4}"
],
"description": "Element UI <el-col>"
},
"Basic: Layout hidden class": {
"prefix": "elhc",
"body": [
"${1|hidden-xs-only,hidden-sm-only,hidden-sm-and-down,hidden-sm-and-up,hidden-md-only,hidden-md-and-down,hidden-md-and-up,hidden-lg-only,hidden-lg-and-down,hidden-lg-and-up,hidden-xl-only|}"
],
"description": "Element UI hidden class"
},
"Basic: Container el-container": {
"prefix": "elcon",
"body": [
"<el-container :direction=\"${1:vertical}\">",
"\t<el-header height=\"$2\">",
"\t\t${3:<!-- Header content -->}",
"\t</el-header>",
"\t<el-container :direction=\"${4:horizontal}\">",
"\t\t<el-aside width=\"${5:200px}\">",
"\t\t\t${6:<!-- Aside content -->}",
"\t\t</el-aside>",
"\t\t<el-container :direction=\"${7:vertical}\">",
"\t\t\t<el-main height=\"$8\">",
"\t\t\t\t${9:<!-- Main content -->}",
"\t\t\t</el-main>",
"\t\t\t<el-footer height=\"$10\">",
"\t\t\t\t${11:<!-- Footer content -->}",
"\t\t\t</el-footer>",
"\t\t</el-container>",
"\t</el-container>",
"</el-container>",
"${12}"
],
"description": "Element UI <el-container>"
},
"Basic: Container el-header": {
"prefix": "elhe",
"body": [
"<el-header height=\"$1\">",
"\t${2:<!-- Header content -->}",
"</el-header>",
"${3}"
],
"description": "Element UI <el-header>"
},
"Basic: Container el-aside": {
"prefix": "elas",
"body": [
"<el-aside width=\"${1:200px}\">",
"\t${2:<!-- Aside content -->}",
"</el-aside>",
"${3}"
],
"description": "Element UI <el-aside>"
},
"Basic: Container el-main": {
"prefix": "elma",
"body": [
"<el-main height=\"${1}\">",
"\t${2:<!-- Main content -->}",
"</el-main>",
"${3}"
],
"description": "Element UI <el-main>"
},
"Basic: Container el-footer": {
"prefix": "elfo",
"body": [
"<el-footer height=\"${1}\">",
"\t${2:<!-- Footer content -->}",
"</el-footer>",
"${3}"
],
"description": "Element UI <el-footer>"
},
"Basic: Color blue": {
"prefix": "elcb",
"body": ["#409EFF"],
"description": "Element UI Color Blue"
},
"Basic: Color danger": {
"prefix": "elcd",
"body": ["#F56C6C"],
"description": "Element UI Color Danger"
},
"Basic: Color info": {
"prefix": "elci",
"body": ["#909399"],
"description": "Element UI Color Info"
},
"Basic: Color success": {
"prefix": "elcs",
"body": ["#67C23A"],
"description": "Element UI Color Success"
},
"Basic: Color waring": {
"prefix": "elcw",
"body": ["#E6A23C"],
"description": "Element UI Color Waring"
},
"Basic: Color primary text": {
"prefix": "elcpt",
"body": ["#303133"],
"description": "Element UI Color Primary Text"
},
"Basic: Color regular text": {
"prefix": "elcrt",
"body": ["#606266"],
"description": "Element UI Color Regular Text"
},
"Basic: Color secondary text": {
"prefix": "elcst",
"body": ["#909399"],
"description": "Element UI Color Secondary Text"
},
"Basic: Color placeholder text": {
"prefix": "elcht",
"body": ["#C0C4CC"],
"description": "Element UI Color Placeholder Text"
},
"Basic: Color Base Border": {
"prefix": "elcbb",
"body": ["#DCDFE6"],
"description": "Element UI Color Base Border"
},
"Basic: Color Light Border": {
"prefix": "elclb",
"body": ["#E4E7ED"],
"description": "Element UI Color Light Border"
},
"Basic: Color Lighter Border": {
"prefix": "elclrb",
"body": ["#EBEEF5"],
"description": "Element UI Color Lighter Border"
},
"Basic: Color Extra Light Border": {
"prefix": "elelb",
"body": ["#DCDFE6"],
"description": "Element UI Color Extra Light Border"
},
"Basic: Typography": {
"prefix": "eltypo",
"body": ["font-family: \"Helvetica Neue\",Helvetica,\"PingFang SC\",\"Hiragino Sans GB\",\"Microsoft YaHei\",\"微软雅黑\",Arial,sans-serif;"],
"description": "Element UI Font-family"
},
"Basic: Border Basic Shadow": {
"prefix": "elbbs",
"body": ["box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);"],
"description": "Element UI Border Basic Shadow"
},
"Basic: Border Light Shadow": {
"prefix": "elbls",
"body": ["box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);"],
"description": "Element UI Border Light Shadow"
},
"Basic: Button": {
"prefix": "elb",
"body": [
"<el-button type=\"${1|primary,text,info,success,warning,danger|}\" size=\"${2|default,medium,small,mini|}\" @click=\"$3\">${4}</el-button>",
"${5}"
],
"description": "Element UI <el-button>"
},
"Basic: Button Group": {
"prefix": "elbg",
"body": [
"<el-button-group>",
"\t<el-button type=\"${1|primary,text,info,success,warning,danger|}\" size=\"${2|default,medium,small,mini|}\" @click=\"$3\">${4}</el-button>",
"\t<el-button type=\"${5|primary,text,info,success,warning,danger|}\" size=\"${2|default,medium,small,mini|}\" @click=\"$6\">${7}</el-button>",
"</el-button-group>",
"${8}"
],
"description": "Element UI <el-button-group>"
},
"Basic: Link": {
"prefix": "ell",
"body": [
"<el-link type=\"${1|primary,success,warning,danger,info|}\" :underline=\"${2:false}\" href=\"${3}\" target=\"${4:_blank}\">${5}</el-link>",
"${6}"
],
"description": "Element UI <el-button>"
},
"Form: Radio": {
"prefix": "elr",
"body": [
"<el-radio v-model=\"${1}\" label=\"${2}\" @change=\"${3}\">${4}</el-radio>",
"${5}"
],
"description": "Element UI <el-radio>"
},
"Form: Radio Group": {
"prefix": "elrg",
"body": [
"<el-radio-group v-model=\"$1\" @change=\"$2\">",
"\t<el-radio v-for=\"${3:item} in ${4:items}\" :key=\"${3:item}.${5:key}\" :label=\"${3:item}.${6:label}\">",
"\t\t{{${3:item}.${7:title}}}",
"\t</el-radio>",
"</el-radio-group>",
"${8}"
],
"description": "Element UI <el-radio-group> with <el-radio>"
},
"Form: Radio Button Group": {
"prefix": "elrbg",
"body": [
"<el-radio-group v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" @change=\"$3\">",
"\t<el-radio-button v-for=\"${4:item} in ${5:items}\" :key=\"${4:item}.${6:key}\" :label=\"${4:item}.${7:label}\">",
"\t\t{{${4:item}.${8:title}}}",
"\t</el-radio-button>",
"</el-radio-group>",
"${9}"
],
"description": "Element UI <el-radio-group> with <el-radio-button>"
},
"Form: Radio Button": {
"prefix": "elrb",
"body": [
"<el-radio-button v-model=\"${1}\" label=\"${2}\">${3}</el-radio-button>",
"${4}"
],
"description": "Element UI <el-radio>"
},
"Form: Checkbox": {
"prefix": "elc",
"body": [
"<el-checkbox v-model=\"${1}\" label=\"${2}\" :indeterminate=\"${3:false}\" @change=\"${4}\">{{$5}}</el-checkbox>",
"${6}"
],
"description": "Element UI <el-checkbox>"
},
"Form: Checkbox Group": {
"prefix": "elcg",
"body": [
"<el-checkbox-group v-model=\"$1\" @change=\"${2}\">",
"\t<el-checkbox v-for=\"${3:item} in ${4:items}\" :key=\"${3:item}.${5:key}\" :label=\"${3:item}.${6:label}\">",
"\t\t{{${3:item}.${7:label}}}",
"\t</el-checkbox>",
"</el-checkbox-group>",
"${8}"
],
"description": "Element UI <el-checkbox-group> with <el-checkbox>"
},
"Form: Checkbox Button Group": {
"prefix": "elcbg",
"body": [
"<el-checkbox-group v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" @change=\"${3}\">",
"\t<el-checkbox-button v-for=\"${4:item} in ${5:items}\" :key=\"${4:item}.${6:key}\" :label=\"${4:item}.${7:label}\">",
"\t\t{{${4:item}.${8:label}}}",
"\t</el-checkbox-button>",
"</el-checkbox-group>",
"${9}"
],
"description": "Element UI <el-checkbox-group> with <el-checkbox-button>"
},
"Form: Checkbox Button": {
"prefix": "elcbt",
"body": [
"<el-checkbox-button v-model=\"${1}\" label=\"${2}\" :indeterminate=\"${3:false}\" @change=\"${4}\">{{$5}}</el-checkbox-button>",
"${6}"
],
"description": "Element UI <el-checkbox-button>"
},
"Form: Input": {
"prefix": "eli",
"body": [
"<el-input v-model=\"$1\" placeholder=\"$2\" size=\"${3|normal,medium,small,mini|}\" clearable @change=\"$4\">$5</el-input>",
"${6}"
],
"description": "Element UI <el-input>"
},
"Form: Textarea": {
"prefix": "elit",
"body": [
"<el-input type=\"${1|text,textarea|}\" :rows=\"${2:2}\" v-model=\"$3\" placeholder=\"$4\" ",
"\t:maxlength=\"${5:-1}\" :show-word-limit=\"${6|false,true|}\" :autosize=\"{ minRows: ${7:2}, maxRows: ${8:4} }\">",
"</el-input>",
"${9}"
],
"description": "Element UI <el-input type=\"text,textarea\">"
},
"Form: Autocomplete": {
"prefix": "ela",
"body": [
"<el-autocomplete v-model=\"$1\" value-key=\"$2\" placeholder=\"${3}\" clearable",
"\t:debounce=\"$4\" :fetch-suggestions=\"${5}\" @select=\"$6\">$7</el-autocomplete>",
"${8}"
],
"description": "Element UI <el-autocomplete>"
},
"Form: Input Slot": {
"prefix": "elis",
"body": [
"<template slot=\"${1|prefix,suffix,prepend,append|}\">$2</template>",
"${3}"
],
"description": "Element UI <template slot=''>"
},
"Form: InputNumber": {
"prefix": "elin",
"body": [
"<el-input-number v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" label=\"$3\"",
"\t:min=\"${4:1}\" :max=\"${5:10}\" :step=\"${6:1}\" :controls=\"${7|true,false|}\" controls-position=\"${8|both,right|}\" @change=\"$9\">",
"</el-input-number>",
"${10}"
],
"description": "Element UI <el-input-number>"
},
"Form: Select": {
"prefix": "elsel",
"body": [
"<el-select v-model=\"$1\" value-key=\"$2\" placeholder=\"$3\" clearable filterable @change=\"$4\">",
"\t<el-option v-for=\"${5:item} in ${6:options}\"",
"\t\t:key=\"${5:item}.${7:value}\"",
"\t\t:label=\"${5:item}.${8:label}\"",
"\t\t:value=\"${5:item}.${9:value}\">",
"\t</el-option>",
"</el-select>",
"${10}"
],
"description": "Element UI <el-select>"
},
"Form: Select Remote Search": {
"prefix": "elselr",
"body": [
"<el-select v-model=\"$1\" value-key=\"$2\" placeholder=\"$3\" clearable filterable",
"\tremote reserve-keyword :remote-method=\"$4\" :loading=\"$5\" @change=\"$6\">",
"\t<el-option v-for=\"${7:item} in ${8:options}\"",
"\t\t:key=\"${7:item}.${9:value}\"",
"\t\t:label=\"${7:item}.${10:label}\"",
"\t\t:value=\"${7:item}.${11:value}\">",
"\t</el-option>",
"</el-select>",
"${12}"
],
"description": "Element UI <el-select>"
},
"Form: Select Option": {
"prefix": "elop",
"body": [
"<el-option :key=\"$1\" :label=\"$2\" :value=\"$3\"></el-option>",
"${3}"
],
"description": "Element UI <el-option>"
},
"Form: Select Option Group": {
"prefix": "elopg",
"body": [
"<el-option-group v-for=\"${1:group} in ${2:options}\"",
"\t:key=\"${1:group}.${3:value}\"",
"\t:label=\"${1:group}.${4:label}\">",
"\t<el-option v-for=\"${5:item} in ${1:group}.${6:options}\"",
"\t\t:key=\"${5:item}.${7:value}\"",
"\t\t:label=\"${5:item}.${8:label}\"",
"\t\t:value=\"${5:item}.${9:value}\">",
"\t</el-option>",
"<el-option-group>",
"${10}"
],
"description": "Element UI <el-option-group>"
},
"Form: Cascader": {
"prefix": "elca",
"body": [
"<el-cascader :options=\"${1:options}\" v-model=\"${2}\" clearable filterable :show-all-levels=\"${3|false,true|}\"",
"\t:props=\"{ expandTrigger: ${4|'hover','click'|}, multiple: ${5|true,false|}, checkStrictly: ${6|true,false|} }\" @change=\"${7}\">",
"</el-cascader>",
"${8}"
],
"description": "Element UI <el-cascader>"
},
"Form: Cascader Panel": {
"prefix": "elcap",
"body": [
"<el-cascader :options=\"${1:options}\" v-model=\"${2}\" @change=\"${3}\"",
"\t:props=\"{ expandTrigger: ${4|'hover','click'|}, multiple: ${5|true,false|}, checkStrictly: ${6|true,false|} }\">",
"</el-cascader>",
"${7}"
],
"description": "Element UI <el-cascader-panel>"
},
"Form: Switch": {
"prefix": "elsw",
"body": [
"<el-switch v-model=\"$1\" :active-value=\"${2:true}\" :inactive-value=\"${3:false}\" @change=\"$4\">",
"</el-switch>",
"${5}"
],
"description": "Element UI <el-switch>"
},
"Form: Slider": {
"prefix": "elsl",
"body": [
"<el-slider v-model=\"$1\" :min=\"$2\" :max=\"$3\" :step=\"$4\" vertical=\"${5:false}\" @change=\"$6\">",
"</el-slider>",
"${7}"
],
"description": "Element UI <el-slider>"
},
"Form: Time Select": {
"prefix": "elts",
"body": [
"<el-time-select v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"$3\"",
"\t:picker-options=\"{",
"\t\tstart: '${4}',",
"\t\tstep: '${5:00:30}',",
"\t\tend: '${6}',",
"\t}\"",
"\tchange=\"${7}\">",
"</el-time-select>",
"${8}"
],
"description": "Element UI <el-time-select>"
},
"Form: Time Select Range": {
"prefix": "eltsr",
"body": [
"<el-time-select v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"$3\"",
"\t:picker-options=\"{",
"\t\tstart: '${4}',",
"\t\tstep: '${5:00:30}',",
"\t\tend: '${6}',",
"\t}\">",
"</el-time-select>",
"<el-time-select v-model=\"$7\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"$8\"",
"\t:picker-options=\"{",
"\t\tstart: '${4}',",
"\t\tstep: '${5:00:30}',",
"\t\tend: '${6}',",
"\t\tminTime: $1",
"\t}\">",
"</el-time-select>",
"${9}"
],
"description": "Element UI <el-time-select> range"
},
"Form: TimePicker": {
"prefix": "eltp",
"body": [
"<el-time-picker v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" arrow-control",
"\t:picker-options=\"{",
"\t\tselectableRange: '${3:18:30:00} - ${4:20:30:00}'",
"\t}\"",
"\tplaceholder=\"${5:任意时间点}\">",
"</el-time-picker>",
"${6}"
],
"description": "Element UI <el-time-picker>"
},
"Form: TimePicker Range": {
"prefix": "eltpr",
"body": [
"<el-time-picker v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" arrow-control",
"\tis-range range-separator=\"${3:-}\" start-placeholder=\"$4\" end-placeholder=\"$5\"",
"\t:picker-options=\"{",
"\t\tselectableRange: '${6:18:30:00} - ${7:20:30:00}'",
"\t}\">",
"</el-time-picker>",
"${8}"
],
"description": "Element UI <el-time-picker is-range>"
},
"Form: DatePicker": {
"prefix": "eldp",
"body": [
"<el-date-picker v-model=\"$1\" type=\"${2|year,month,date,dates,week|}\" size=\"${3|normal,medium,small,mini|}\" placeholder=\"${4:选择日期时间}\">",
"</el-date-picker>",
"${5}"
],
"description": "Element UI <el-date-picker>"
},
"Form: DatePicker Range": {
"prefix": "eldpr",
"body": [
"<el-date-picker v-model=\"$1\" type=\"${2|daterange,monthrange|}\" size=\"${3|normal,medium,small,mini|}\"",
"\trange-separator=\"${4:-}\" start-placeholder=\"$5\" end-placeholder=\"$6\">",
"</el-date-picker>",
"${7}"
],
"description": "Element UI <el-date-picker>"
},
"Form: DateTimePicker": {
"prefix": "eldtp",
"body": [
"<el-date-picker v-model=\"$1\" type=\"datetime\" size=\"${2|normal,medium,small,mini|}\" placeholder=\"${3:选择日期时间}\">",
"</el-date-picker>",
"${4}"
],
"description": "Element UI <el-date-picker type=\"datetime\">"
},
"Form: DateTimePicker Range": {
"prefix": "eldtpr",
"body": [
"<el-date-picker v-model=\"$1\" type=\"datetimerange\" size=\"${2|normal,medium,small,mini|}\"",
"\trange-separator=\"${3:-}\" start-placeholder=\"$4\" end-placeholder=\"$5\">",
"</el-date-picker>",
"${6}"
],
"description": "Element UI <el-date-picker type=\"datetime\">"
},
"Form: Upload": {
"prefix": "elu",
"body": [
"<el-upload",
"\taction=\"$1\"",
"\tref=\"${2:upload}\"",
"\t:on-remove=\"$3\"",
"\t:auto-upload=\"false\"",
"\tmultiple",
"\t:limit=\"${4:5}\"",
"\t:on-exceed=\"$5\"",
"\t:file-list=\"$6\">",
"\t<el-button slot=\"trigger\" size=\"small\" type=\"primary\">${7:select file}</el-button>",
"\t<el-button style=\"margin-left: 10px;\" size=\"small\" type=\"success\" @click=\"$8\">${9:upload to server}</el-button>",
"\t<div slot=\"tip\" class=\"el-upload__tip\">${10:jpg/png files with a size less than 500kb}</div>",
"</el-upload>",
"${11}"
],
"description": "Element UI <el-upload>"
},
"Form: Rate": {
"prefix": "elra",
"body": [
"<el-rate v-model=\"$1\" :allow-half=\"${2|false,true|}\" @change=\"$3\"></el-rate>",
"${4}"
],
"description": "Element UI <el-rate>"
},
"Form: ColorPicker": {
"prefix": "elcp",
"body": [
"<el-color-picker v-model=\"$1\" size=\"${2|normal,medium,small,mini|}\" :show-alpha=\"${3|true,false|}\" ></el-color-picker>",
"${4}"
],
"description": "Element UI <el-color-picker>"
},
"Form: Transfer": {
"prefix": "eltr",
"body": [
"<el-transfer v-model=\"$1\" :data=\"$2\" target-order=\"${3|original,push,unshift|}\" filterable @change=\"$4\"",
"\t:format=\"{noChecked: '\\${total}',hasChecked: '\\${checked}/\\${total}'}\">",
"</el-transfer>",
"${5}"
],
"description": "Element UI <el-transfer>"
},
"Form: Form": {
"prefix": "elf",
"body": [
"<el-form :model=\"${1:form}\" ref=\"${2:form}\" :rules=\"${3:rules}\" label-width=\"80px\" :inline=\"${4|false,true|}\" size=\"${5|normal,medium,small,mini|}\">",
"\t<el-form-item label=\"$6\">",
"\t\t<el-input v-model=\"${1:form}.${7}\"></el-input>",
"\t</el-form-item>",
"\t<el-form-item>",
"\t\t<el-button type=\"primary\" @click=\"onSubmit\">${8:立即创建}</el-button>",
"\t\t<el-button>${9:取消}</el-button>",
"\t</el-form-item>",
"</el-form>",
"${10}"
],
"description": "Element UI <el-form>"
},
"Form: Form Item": {
"prefix": "elfi",
"body": [
"<el-form-item label=\"$1\" size=\"${2|normal,medium,small,mini|}\">",
"\t$3",
"</el-form-item>",
"${4}"
],
"description": "Element UI <el-form-item>"
},
"Data: Table": {
"prefix": "elt",
"body": [
"<el-table :data=\"$1\" border stripe>",
"\t<el-table-column v-for=\"${2:col} in ${3:columns}\"",
"\t\t:prop=\"${2:col}.${4:id}\"",
"\t\t:key=\"${2:col}.${4:id}\"",
"\t\t:label=\"${2:col}.${5:label}\"",
"\t\t:width=\"${2:col}.${6:width}\">",
"\t</el-table-column>",
"</el-table>",
"${7}"
],
"description": "Element UI <el-table>"
},
"Data: Table Column": {
"prefix": "eltc",
"body": [
"<el-table-column :label=\"${1}\" :min-width=\"${2}\" :prop=\"${3}\" </el-table-column>",
"${0}"
],
"description": "Element UI <el-table-column>"
},
"Data: Tag": {
"prefix": "elta",
"body": [
"<el-tag type=\"${1|danger,info,success,warning|}\" size=\"${2|normal,medium,small,mini|}\" effect=\"${3|dark,plain|}\" closable @close=\"${4}\">$5</el-tag>",
"${6}"
],
"description": "Element UI <el-tag>"
},
"Data: Progress": {
"prefix": "elpr",
"body": [
"<el-progress type=\"${1|line,circle,dashboard|}\" :percentage=\"$2\" status=\"${3|success,exception,warning|}\" :stroke-width=\"${4:6}\"></el-progress>",
"${5}"
],
"description": "Element UI <el-progress>"
},
"Data: Tree": {
"prefix": "eltree",
"body": [
"<el-tree ref=\"${1:tree}\" :data=\"$2\" node-key=\"$3\" :props=\"$4\" empty-text=\"$5\" show-checkbox=\"${6|false,true|}\" highlight-current=\"${7|true,false|}\" @node-click=\"$8\">$9</el-tree>",
"${10}"
],
"description": "Element UI <el-tree>"
},
"Data: Pagination": {
"prefix": "elp",
"body": [
"<el-pagination",
"\t@size-change=\"${1:sizeChange}\"",
"\t@current-change=\"${2:currentChange}\"",
"\t:current-page.sync=\"${3:currentPage}\"",
"\t:page-sizes=\"${4:[20, 40, 80, 100]}\"",
"\t:page-size=\"${5:pageSize}\"",
"\tlayout=\"total, sizes, prev, pager, next, jumper\"",
"\t:total=\"${6:totalNum}\" background>",
"\t:pager-count=\"${7:7}\">",
"</el-pagination>",
"${8}"
],
"description": "Element UI <el-pagination>"
},
"Data: Badge": {
"prefix": "elba",
"body": [
"<el-badge :value=\"${1}\" :max=\"${2:99}\" :is-dot=\"${3|false,true|}\" :hidden=\"${4|false,true|}\" type=\"${5|primary,success,warning,danger,info|}\">",
"\t<el-button size=\"small\">$6</el-button>",
"</el-badge>",
"${7}"
],
"description": "Element UI <el-badge>"
},
"Data: Avatar": {
"prefix": "elav",
"body": [
"<el-avatar icon=\"el-icon-user-solid\" size=\"${1|large,medium,small|}\" shape=\"${2|circle,square|}\" :src=\"${3}\" fit=\"${4|fill,contain,cover,none,scale-down|}\"></el-avatar>",
"${5}"
],
"description": "Element UI <el-avatar>"
},
"Notice: Alert": {
"prefix": "elal",
"body": [
"<el-alert :title=\"$1\" type=\"${2|info,success,warning,error|}\" effect=\"${3|light,dark|}\" show-icon closable></el-alert>",
"${4}"
],
"description": "Element UI <el-alert>"
},
"Notice: Loading": {
"prefix": "elloads",
"body": [
"element-loading-text=\"${1:拼命加载中}\"",
"element-loading-spinner=\"${2:el-icon-loading}\"",
"element-loading-background=\"${3:rgba(0, 0, 0, 0.8)}\"",
"${4}"
],
"description": "Element UI loading options"
},
"Notice: Message": {
"prefix": "elme",
"body": [
"this.\\$message({",
"\tmessage: '$1',",
"\ttype: '${2|info,success,warning,error|}',",
"\tshowClose: ${3:true},",
"\tduration: ${4:3000},",
"});",
"${5}"
],
"description": "Element UI $message"
},
"Notice: Messagebox": {
"prefix": "elmebox",
"body": [
"this.\\$msgbox({",
"\ttitle: '$1',",
"\tmessage: '${2}',",
"\tshowCancelButton: true,",
"\tconfirmButtonText: '${3:OK}',",
"\tcancelButtonText: '${4:Cancel}',",
"\tcenter: ${5:false},",
"\tbeforeClose: (action, instance, done) => {",
"\t\t${6}",
"\t}",
"}).then(action => {",
"\t${7}",
"}).catch(() => {",
"\t${8}",
"});",
"${9}"
],
"description": "Element UI $msgbox"
},
"Notice: Messagebox Alert": {
"prefix": "elmeal",
"body": [
"this.\\$alert('${1:content}', '${2:title}', {",
"\tconfirmButtonText: '${3:OK}',",
"\tcallback: action => {",
"\t\t${4}",
"\t}",
"})",
"${5}"
],
"description": "Element UI $alert"
},
"Notice: Messagebox Confirm": {
"prefix": "elmecon",
"body": [
"this.\\$confirm('${1:content}', '${2:title}', {",
"\tconfirmButtonText: '${3:OK}',",
"\tcancelButtonText: '${4:Cancel}',",
"\ttype: '${5|success,info,warning,erro|}',",
"}).then(action => {",
"\t${6}",
"}).catch(() => {",
"\t${7}",
"});",
"${8}"
],
"description": "Element UI $confirm"
},
"Notice: Messagebox Prompt": {
"prefix": "elmepro",
"body": [
"this.\\$prompt('${1:content}', '${2:title}', {",
"\tconfirmButtonText: '${3:OK}',",
"\tcancelButtonText: '${4:Cancel}',",
"\tinputPattern: / ${5} /,",
"\tinputErrorMessage: '${6}',",
"}).then(({ value }) => {",
"\t${7}",
"}).catch(() => {",
"\t${8}",
"});",
"${9}"
],
"description": "Element UI $prompt"
},
"Notice: Notification": {
"prefix": "elno",
"body": [
"this.\\$notify({",
"\ttitle: '${1:title}',",
"\tmessage: '${2:message}',",
"\ttype: '${3|info,success,warning,error|}',",
"\tduration: '${4|4500, 0|}',",
"\tposition: '${5|top-right,top-left,bottom-right,bottom-left|}',",
"\tshowClose: '${6:true}',",
"});",
"${7}"
],
"description": "Element UI $notify"
},
"Notice: Notification with type": {
"prefix": "elnot",
"body": [
"this.\\$notify.${1|info,success,warning,error|}({",
"\ttitle: '${2:title}',",
"\tmessage: '${3:message}',",
"\tduration: '${4|4500, 0|}',",
"\tposition: '${5|top-right,top-left,bottom-right,bottom-left|}',",
"\tshowClose: '${6:true}',",
"});",
"${7}"
],
"description": "Element UI $notify.type"
},
"Navigation: NavMenu Menu": {
"prefix": "elmen",
"body": [
"<el-menu mode=\"${1|horizontal,vertical|}\" default-active=\"$2\" @select=\"$3\">",
"\t<el-submenu v-for=\"(${4:submenus}, ${5:index}) in ${6:menus}\"",
"\t\t:index=\"${5:index} + 1\"",
"\t\t:key=\"${4:submenus}.${7:key}\">",
"\t\t<template slot=\"title\">{{${4:submenus}.${8:title}}}</template>",
"\t\t<el-menu-item v-for=\"(${9:item}, ${10:subIndex}) in ${4:submenus}.${11:menus}\"",
"\t\t\t:index=\"(${5:index} + 1) + '-' + (${10:subIndex} + 1)\"",
"\t\t\t:key=\"${9:item}.${12:key}\">",
"\t\t\t\t{{${9:item}.${13:title}}}",
"\t\t</el-menu-item>",
"\t</el-submenu>",
"</el-menu>",
"${14}"
],
"description": "Element UI <el-menu> with <el-submenu> and <el-menu-item>"
},
"Navigation: NavMenu subMenu": {
"prefix": "elsubmen",
"body": [
"<el-submenu :index=\"$1\">",
"\t<template slot=\"title\">$2</template>",
"\t<el-menu-item v-for=\"(${3:item}, ${4:subIndex}) in $5\"",
"\t\t:index=\"${4:subIndex} + 1\"",
"\t\t:key=\"${3:item}.${6:key}\">",
"\t\t\t{{${3:item}.${7:title}}}",
"\t</el-menu-item>",
"</el-submenu>",
"${8}"
],
"description": "Element UI <el-submenu> with <el-menu-item>"
},
"Navigation: NavMenu Menu Item": {
"prefix": "elmeni",
"body": [
"<el-menu-item index=\"$1\" key=\"$2\">$3</el-menu-item>",
"${4}"
],
"description": "Element UI <el-menu-item>"
},
"Navigation: Tabs": {
"prefix": "eltabs",
"body": [
"<el-tabs v-model=\"$1\" type=\"${2|card,border-card,normal|}\" tab-position=\"${3|top,left,right,bottom|}\" @tab-click=\"$4\">",
"\t<el-tab-pane v-for=\"${5:item} in ${6:panes}\"",
"\t\t:key=\"${5:item}.${7:key}\"",
"\t\t:label=\"${5:item}.${8:label}\"",
"\t\t:name=\"${5:item}.${7:key}\">",
"\t\t$9",
"\t</el-tab-pane>",
"</el-tabs>",
"${10}"
],
"description": "Element UI <el-tabs> with <el-tab-pane>"
},
"Navigation: Tabs tab pane": {
"prefix": "eltabp",
"body": [
"<el-tab-pane :label=\"$1\" :name=\"$2\">",
"\t$3",
"</el-tab-pane>",
"${4}"
],
"description": "Element UI <el-tab-pane>"
},
"Navigation: Breadcrumb": {
"prefix": "elbr",
"body": [
"<el-breadcrumb separator-class=\"${1:el-icon-arrow-right}\">",
"\t<el-breadcrumb-item :to=\"{ path: '$2', name: '$3' }\">$4</el-breadcrumb-item>",
"\t<el-breadcrumb-item :to=\"{ path: '$5', name: '$6' }\">$7</el-breadcrumb-item>",
"</el-breadcrumb>",
"${8}"
],
"description": "Element UI <el-breadcrumb>"
},
"Navigation: Breadcrumb Item": {
"prefix": "elbri",
"body": [
"<el-breadcrumb-item :to=\"{ path: '$1', name: '$2' }\">$3</el-breadcrumb-item>",
"${4}"
],
"description": "Element UI <el-breadcrumb-item>"
},
"Navigation: PageHeader": {
"prefix": "elpa",
"body": [
"<el-page-header @back=\"$1\" content=\"$2\"></el-page-header>",
"${3}"
],
"description": "Element UI <el-page-header>"
},
"Navigation: Dropdown": {
"prefix": "eldr",
"body": [
"<el-dropdown trigger=\"${1:click}\" size=\"${2|default,medium,small,mini|}\" split-button type=\"${3|primary,success,warning,danger,info,text|}\" @command=\"$4\">",
"\t${5:title}",
"\t<el-dropdown-menu slot=\"dropdown\">",
"\t\t<el-dropdown-item v-for=\"${6:item} in ${7:items}\"",
"\t\t\t:key=\"${6:item}.${8:key}\" :command=\"${6:item}.${9:command}\">",
"\t\t\t{{${6:item}.${10:title}}}",
"\t\t</el-dropdown-item>",
"\t</el-dropdown-menu>",
"</el-dropdown>",
"${11}"
],
"description": "Element UI <el-dropdown> with <el-dropdown-item>"
},
"Navigation: Dropdown Item": {
"prefix": "eldri",
"body": [
"<el-dropdown-item :command=\"$1\">$2</el-dropdown-item>",
"${3}"
],
"description": "Element UI <el-dropdown-item>"
},
"Navigation: Steps": {
"prefix": "elsts",
"body": [
"<el-steps :active=\"$1\" direction=\"${2|horizontal,vertical|}\" process-status=\"${3|wait,process,finish,error,success|}\" finish-status=\"${4|wait,process,finish,error,success|}\">",
"\t<el-step v-for=\"${5:item} in ${6:items}\"",
"\t\t:key=\"${5:item}.${7:key}\"",
"\t\t:title=\"${5:item}.${8:title}\"",
"\t\t:description=\"${5:item}.${9:description}\"",
"\t\t:icon=\"${5:item}.${10:icon}\">",
"\t</el-step>",
"</el-steps>",
"${11}"
],
"description": "Element UI <el-steps> with <el-step>"
},
"Navigation: Steps Step": {
"prefix": "elst",
"body": [
"<el-step :title=\"$1\" :description=\"$2\" :icon=\"$3\"></el-step>",
"${4}"
],
"description": "Element UI <el-step>"
},
"Others: Dialog": {
"prefix": "eldi",
"body": [
"<el-dialog title=\"$1\" :visible.sync=\"$2\" width=\"${3:30%}\" @close=\"$4\">",
"\t<span>$5</span>",
"\t<span slot=\"footer\">",
"\t\t<el-button @click=\"$2 = false\">Cancel</el-button>",
"\t\t<el-button type=\"primary\" @click=\"$6\">OK</el-button>",
"\t</span>",
"</el-dialog>",
"${7}"
],
"description": "Element UI <el-dialog>"
},
"Others: Tooltip": {
"prefix": "elto",
"body": [
"<el-tooltip content=\"$1\" placement=\"${2|top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end|}\" effect=\"${3|dark,light|}\">",
"\t${4:<!-- content to trigger tooltip here -->}",
"</el-tooltip>",
"${5}"
],
"description": "Element UI <el-tooltip>"
},
"Others: Popover": {
"prefix": "elpo",
"body": [
"<el-popover",
"\t:ref=\"$1\"",
"\tplacement=\"${2|top,top-start,top-end,bottom,bottom-start,bottom-end,left,left-start,left-end,right,right-start,right-end|}\"",
"\ttitle=\"$3\"",
"\twidth=\"$4\"",
"\ttrigger=\"${5|click,focus,hover,manual|}\"",
"\tcontent=\"$6\">",
"\t${7: <!-- <el-button slot=\"reference\">content</el-button> -->}",
"</el-popover>",
"${8}"
],
"description": "Element UI <el-popover>"
},
"Others: Popconfirm": {
"prefix": "elpoco",
"body": [
"<el-popconfirm",
"\ttitle=\"$1\"",
"\tconfirmButtonText=\"$2\"",
"\tcancelButtonText=\"$3\"",
"\tconfirmButtonType=\"${4|primary,text,info,success,warning,danger|}\"",
"\tcancelButtonType=\"${5|text,primary,info,success,warning,danger|}\"",
"\ticon=\"${6:el-icon-question}\"",
"\ticonColor=\"${7:#f90}\"",
"\thideIcon=\"${8|false,true|}\">",
"\t<el-button slot=\"reference\">$9</el-button>",
"</el-popconfirm>",
"${10}"
],
"description": "Element UI <el-popconfirm>"
},
"Others: Card": {
"prefix": "elcard",
"body": [
"<el-card shadow=\"${1|always,hover,never|}\" :body-style=\"${2:{ padding: '20px' }}\">",
"\t<div slot=\"header\">",
"\t\t<span>${3:<!-- card title -->}</span>",
"\t</div>",
"\t${4:<!-- card body -->}",
"</el-card>",
"${5}"
],
"description": "Element UI <el-card>"
},
"Others: Carousel": {
"prefix": "elcaro",
"body": [
"<el-carousel height=\"${1:150px}\" type=\"${2|default,card|}\" direction=\"${3|horizontal,vertical|}\"",
"\t:initial-index=\"${4:0}\" :autoplay=\"${5|true, false|}\" :interval=\"${6:3000}\" :loop=\"${7|true,false|}\"",
"\ttrigger=\"${8|hover,click|}\" indicator-position=\"${9|outside,inside,none|}\" arrow=\"${10|hover,always,never|}\">",
"\t<el-carousel-item v-for=\"${11:item} in ${12:items}\" :key=\"${11:item}.${13:key}\" :label=\"${14}\">",
"\t\t${15:<!-- content -->}",
"\t</el-carousel-item>",
"</el-carousel>",
"${16}"
],
"description": "Element UI <el-carousel> with <el-carousel-item>"
},
"Others: Carousel Item": {
"prefix": "elcaroi",
"body": [
"<el-carousel-item :label=\"${1}\">",
"\t${2:<!-- content -->}",
"</el-carousel-item>",
"${3}"
],
"description": "Element UI <el-carousel-item>"
},
"Others: Collapse": {
"prefix": "elcolla",
"body": [
"<el-collapse v-model=\"${1:activeNames}\" :accordion=\"${2:false}\" @change=\"$3\">",
"\t<el-collapse-item v-for=\"${4:item} in ${5:items}\"",
"\t\t:key=\"${4:item}.${6:id}\"",
"\t\t:title=\"${4:item}.${7:title}\"",
"\t\t:name=\"${4:item}.${6:id}\">",
"\t\t${8:<!-- content -->}",
"\t</el-collapse-item>",
"</el-collapse>",
"${9}"
],
"description": "Element UI <el-collapse> with <el-collapse-item>"
},
"Others: Collapse Item": {
"prefix": "elcollai",
"body": [
"<el-collapse-item :title=\"$1\" :name=\"$2\">",
"\t${3:<!-- content -->}",
"</el-collapse-item>",
"${4}"
],
"description": "Element UI <el-collapse-item>"
},
"Others: Collapse Timeline": {
"prefix": "elti",
"body": [
"<el-timeline :reverse=\"$1\">",
"\t<el-timeline-item v-for=\"${2:item} in ${3:items}\"",
"\t\t:key=\"${2:item}.${4:id}\"",
"\t\t:timestamp=\"${2:item}.${5:timestamp}\"",
"\t\tplacement=\"${6|top,bottom|}\"",
"\t\ttype=\"${7|primary,success,warning,danger,info|}\"",
"\t\tsize=\"${8|normal,large|}\">",
"\t\t${9:<!-- content -->}",
"\t</el-timeline-item>",
"</el-timeline>",
"${10}"
],
"description": "Element UI <el-timeline> with <el-timeline-item>"
},
"Others: Collapse Timeline Item": {
"prefix": "eltii",
"body": [
"<el-timeline-item",
"\ttimestamp=\"${1}\"",
"\tplacement=\"${2|top,bottom|}\"",
"\ttype=\"${3|primary,success,warning,danger,info|}\"",
"\tsize=\"${4|normal,large|}\">",
"\t${5:<!-- content -->}",
"</el-timeline-item>",
"${6}"
],
"description": "Element UI <el-timeline-item>"
},
"Others: Divider": {
"prefix": "eld",
"body": [
"<el-divider direction=\"${1|horizontal,vertical|}\" content-position=\"${2|left,right,center|}\">$3</el-divider>",
"${4}"
],
"description": "Element UI <el-divider>"
},
"Others: Calendar": {
"prefix": "elcal",
"body": [
"<el-calendar v-model=\"${1}\" :first-day-of-week=\"${2:1}\"></el-calendar>",
"${3}"
],
"description": "Element UI <el-calendar>"
},
"Others: Image": {
"prefix": "elim",
"body": [
"<el-image :src=\"${1}\" fit=\"${2|fill,contain,cover,none,scale-down|}\" :lazy=\"${3|true,false|}\"></el-image>",
"${4}"
],
"description": "Element UI <el-image>"
},
"Others: Backtop": {
"prefix": "elback",
"body": [
"<el-backtop :target=\"${1}\" :right=\"${2:40}\" :bottom=\"${3:40}\">$4</el-backtop>",
"${5}"
],
"description": "Element UI <el-backtop>"
},
"Others: InfiniteScroll": {
"prefix": "elinfi",
"body": [
"v-infinite-scroll=\"${1}\"",
":infinite-scroll-delay=\"${2}\"",
":infinite-scroll-distance=\"${3}\"",
":infinite-scroll-disabled=\"${4|false,true|}\"",
":infinite-scroll-immediate=\"${5|true,false|}\""
],
"description": "Element UI v-infinite-scroll"
},
"Others: Drawer": {
"prefix": "eldra",
"body": [
"<el-drawer title=\"${1}\" :visible.sync=\"${2}\" direction=\"${3|rtl,ltr,ttb,btt|}\" size=\"${4:30%}\"",
"\t:before-close=\"${5}\" :destroy-on-close=\"${6|true,false|}\" :show-close=\"${7|true,false|}\" :wrapperClosable=\"${8|true,false|}\">",
"</el-drawer>",
"${9}"
],
"description": "Element UI <el-drawer>"
},
//自己编写
"table-column-slot": {
"prefix": "elss",
"body": [
"<template slot-scope=\"scope\">",
"\t${1}",
"</template>",
"${0}"
],
"description": "template slot-scope"
}
//elementui提示结束
}
收起阅读 »