文章目录
前言
配置用户代码片段
1、提升开发效率，节省时间
2、更好的统一样式布局
一、配置方法
1、快捷键打开
通过快捷键「Ctrl + Shift + P」打开命令窗口
2、新建代码片段
可新建全局/编辑现有/新建当前文件夹代码(暂时没用过)/根据语言新建(自用)片段
3、删除代码片段
需要查找根目录进行删除，命令：`rm vue.json`
4、json文件说明
{
// Place your global snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and
// description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope
// is left empty or omitted, the snippet gets applied to all languages. The prefix is what is
// used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders.
// Placeholders with the same ids are connected.
// Example:
// "Print to console 类似于分类名称": {
// "scope 范围(全局配置文件生效)": "javascript,typescript",
// "prefix": "log片段名称(触发使用)",
// "body": [
// "console.log('$1插入内容');",
// "$2"
// ],
// "description": "Log output to console 片段说明"
// }
}
5、生成代码片段工具
生成代码片段工具（涉及语法/转译相关需要自行更改）
二、配置语法
1.官方教程
2.常用语法
制表位
使用制表位，您可以使编辑器光标在片段内移动。使用$1,$2指定光标位置。数字是访问制表位的顺序，而$0表示最终光标位置。同一制表位的多次出现被链接并同步更新。
占位符
占位符是带有值的制表位，例如${1:foo}.占位符文本将被插入和选择，以便可以轻松更改。占位符可以嵌套，例如${1:another ${2:placeholder}}.
占位符可以有选择作为值。语法是逗号分隔的值枚举，用竖线字符括起来，例如${1|one,two,three|}. 当插入片段并选择占位符时，选项将提示用户选择其中一个值。
变量
使用${name:default}，您可以插入变量的值。如果未设置变量，则插入其默认值或空字符串。当变量未知（即未定义其名称）时，将插入变量的名称并将其转换为占位符。
可以使用以下变量：(常用，详情请查看官方文档 ）
TM_CURRENT_LINE当前行的内容TM_FILENAME当前文档的文件名TM_FILENAME_BASE当前文档的文件名，不带扩展名CLIPBOARD剪贴板的内容
插入当前日期和时间：
CURRENT_YEAR本年度CURRENT_YEAR_SHORT本年度的最后两位数CURRENT_MONTH两位数的月份（例如“02”）CURRENT_MONTH_NAME_SHORT月份的简称（例如“Jul”）CURRENT_DATE两位数的月份日期（例如“08”）CURRENT_SECONDS_UNIX自 Unix 纪元以来的秒数
对于插入随机值：
UUID版本 4 UUID
对于插入行或块注释，尊重当前语言：
BLOCK_COMMENT_START示例输出：PHP/*或 HTML<!–BLOCK_COMMENT_END示例输出：PHP*/或 HTML–>- `LINE_COMMENT``示例输出：在 PHP 中//
下面的代码片段插入/* Hello World */到 JavaScript 文件和 HTML 文件中：
{
"hello": {
"scope": "javascript,html",
"prefix": "hello",
"body": "$BLOCK_COMMENT_START Hello World $BLOCK_COMMENT_END"
}
}
变量变换
转换允许您在插入变量之前修改它的值。转换的定义由三部分组成：
- 与变量值匹配的正则表达式，或者当变量无法解析时为空字符串。
- 允许从正则表达式引用匹配组的“格式字符串”。格式字符串允许有条件的插入和简单的修改。
- 传递给正则表达式的选项。
占位符转换
与变量转换一样，占位符的转换允许在移动到下一个制表位时更改占位符的插入文本。插入的文本与正则表达式匹配，并且匹配项或匹配项（取决于选项）被替换为指定的替换格式文本。占位符的每次出现都可以使用第一个占位符的值独立定义自己的转换。占位符变换的格式与变量变换的格式相同。
转换示例
正则表达式
这些示例显示在双引号内，就像它们出现在片段正文中一样，以说明需要双重转义某些字符。示例转换和文件名的结果输出example-123.456-TEST.js。
/(^.)/正则表达式${1:/upcase}/正则匹配的处理*
| 例子 | 输出 | 解释 |
|---|---|---|
"${TM_FILENAME/[\\.]/_/}" | example-123_456-TEST.js | 将第一个替换.为_ |
"${TM_FILENAME/[\\.-]/_/g}" | example_123_456_TEST_js | 替换每个.或-_ |
"${TM_FILENAME/(.*)/${1:/upcase}/}" | EXAMPLE-123.456-TEST.JS | 改为全部大写 |
"${TM_FILENAME/[^0-9^a-z]//gi}" | example123456TESTjs | 删除非字母数字字符 |
"${TM_FILENAME/(^.)/${1:/upcase}/}" | Example-123.456-TEST.js | 首字母大写 |
语法（转译）
使用\ （反斜杠），您可以转义$、}和.在选择元素中，反斜杠也会转义逗号和管道字符。
转译变量：使用\\转义$emit中的$，以便片段扩展阶段不会对其进行解析。
"VariableSnippet":{
"prefix": "_Var",
"body": "this.\\$emit(\"emit\")",
"description": "A basic snippet that places a variable into script with the $ prefix"
}
最终输出：
this.$emit("emit")
三、代码片段
1、vue
{
"vue": {
"prefix": "vue-waim",
"body": [
"<template>",
" <div class=\"$TM_FILENAME_BASE\">\n",
" $0",
" </div>",
"</template>\n",
"<script>",
"// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）",
"// 例如：import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}',",
" // import引入的组件需要注入到对象中才能使用",
" components: {\n",
" },",
" data() {",
" // 这里存放数据",
" return {\n",
" }",
" },",
" // 生命周期 - 创建完成（可以访问当前this实例）",
" created () {",
"",
" },",
" // 生命周期 - 挂载完成（可以访问DOM元素）",
" mounted () {",
"",
" },",
"methods: {\n",
"},",
"}",
"</script>\n",
"<style scoped lang=\"less\">\n",
"//@import 'xxx.less';引入公共css类",
"</style>",
"$2"
],
"description": "快速生成vue页面"
},
"vue-com": {
"prefix": "vue-com",
"body": [
"<template>",
" <div class=\"$TM_FILENAME_BASE\">\n",
" $0",
" </div>",
"</template>\n",
"<script>",
"// 导入其他文件例如：import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}'," /** /(^.)/ () 里面放正则表达式 ${1:/upcase}/ 正则匹配的处理*/,
" props: {",
" title: {",
" type: String,",
" default: '',",
" },",
" },",
" // import引入的组件需要注入到对象中才能使用",
" components: {\n",
" },",
" data() {",
" // 这里存放数据",
" return {\n",
" }",
" },",
" // 生命周期 - 创建完成（可以访问当前this实例）",
" created () {",
"",
" },",
" // 生命周期 - 挂载完成（可以访问DOM元素）",
" mounted () {",
"",
" },",
"methods: {\n",
"},",
"}",
"</script>\n",
"<style scoped lang=\"less\">\n",
"//@import 'xxx.less';引入公共css类",
"</style>",
"$2"
],
"description": "快速生成vue组件"
},
"vue-drawer": {
"prefix": "vue-drawer",
"body": [
"<template>",
" <el-drawer",
" :title='title'",
" :visible.sync='drawerVisible'",
" :size='960'",
" :wrapperClosable='false'",
" :before-close='handleDrawerClose'",
" >\n",
" $0",
" </el-drawer>",
"</template>\n",
"<script>",
"// 导入其他文件例如：import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}',",
" props: {",
" title: {",
" type: String,",
" default: '',",
" },",
" drawerVisible: {",
" type: Boolean,",
" default: false,",
" },",
" },",
" // import引入的组件需要注入到对象中才能使用",
" components: {\n",
" },",
" data() {",
" // 这里存放数据",
" return {\n",
" }",
" },",
" // 生命周期 - 创建完成（可以访问当前this实例）",
" created () {",
"",
" },",
" // 生命周期 - 挂载完成（可以访问DOM元素）",
" mounted () {",
"",
" },",
"methods: {\n",
" handleDrawerClose(){",
" this.\\$emit('drawerClose')",
" $0",
" },",
"},",
"}",
"</script>\n",
"<style scoped lang=\"less\">\n",
"//@import 'xxx.less';引入公共css类",
"</style>",
"$2"
],
"description": "快速生成drawer抽屉组件"
},
}
2、element-ui
{
"el-tabs": {
"prefix": "el-tabs",
"body": [
"<el-tabs v-model=\"activeName\" @tab-click=\"handleTabsClick\">",
" <el-tab-pane",
" v-for=\"tab in tabsOptions\"",
" :key=\"tab.label\"",
" :label=\"tab.label\"",
" :name=\"tab.name\"",
" />",
" </el-tabs>"
],
"description": "element快速生成tabs栏组件"
},
"element上传图片": {
"prefix": "el-upload",
"body": [
"<!-- token: {Authorization: getToken()} -->",
"<el-upload",
" accept=\"image/jpeg,image/jpg,image/png\"",
" class=\"avatar-uploader\"",
" :headers=\"token\"",
" :action=\"uploadUrl\"",
" :show-file-list=\"false\"",
" :on-success=\"handleUploadSuccess\"",
" :before-upload=\"beforeUpload\">",
" <img v-if=\"imageUrl\" :src=\"imageUrl\" class=\"avatar\">",
" <i v-else class=\"el-icon-plus avatar-uploader-icon\"></i>",
"</el-upload>"
],
"description": "element上传图片"
},
"element 树状图": {
"prefix": "el-tree",
"body": [
"<!-- this.$refs.tree.getCheckedKeys() 获取选中数组 -->",
"<el-tree",
" class=\"filter-tree\"",
" :data=\"treeData\"",
" v-loading=\"loading\"",
" show-checkbox",
" node-key=\"id\"",
" default-expand-all",
" :props=\"defaultProps\"",
" :render-after-expand=\"false\"",
" @check-change=\"handleCheckChange\"",
" ref=\"tree\"",
"/>"
],
"description": "element 树状图"
},
"element时间组件": {
"prefix": "el-date",
"body": [
"<el-date-picker",
" v-model=\"form.dateTime\"",
" type=\"daterange\"",
" value-format=\"timestamp\"",
" @change=\"changeDateTime\"",
" :editable=\"false\"",
" :clearable=\"false\"",
"/>"
],
"description": "element时间组件"
},
"element select组件": {
"prefix": "el-select",
"body": [
"<el-select",
" class=\"global-el-input\"",
" v-model=\"form.type\"",
" placeholder=\"请选择店铺\"",
">",
" <el-option",
" v-for=\"option in Options\"",
" :key=\"option.value\"",
" :label=\"option.label\"",
" :value=\"option.value\"",
" />",
"</el-select>"
],
"description": "element select组件"
},
"element messageBox二次确认框": {
"prefix": "el-messageBox",
"body": [
"this.\\$confirm('确认删除吗', '删除提醒', {",
" confirmButtonText: '确定',",
" cancelButtonText: '取消'",
"})",
" .then(() => {",
" $0 ",
" })",
" .catch(() => {})",
""
],
"description": "element 二次确认框"
}
}
3、wxml
{
"wxml-page": {
"prefix": "wxml-page",
"body": [
"import { showToast } from '@/utils/util';",
"const app = getApp();",
"Page({",
"/** 页面的初始数据 */",
"data: {",
" navData: {",
" title: '核销列表',",
" titleColor: '#fff',",
" white: 1,",
" bg: 'transparent',",
"},",
" $0",
"},",
"onLoad(options){",
" console.log(options)",
"},",
"onShow(){",
"$0",
"},",
"/** 页面上拉触底事件的处理函数*/",
"onReachBottom: function () {",
" let { page, isLastAll } = this.data;",
" page = page + 1;",
" this.setData({",
" page,",
" });",
" if (isLastAll) return;",
" this.getData();",
"},",
"/** 获取页面初始数据 */",
"getData(){",
" showToast('获取页面初始数据')",
"$0",
"}",
"})",
"$2"
],
"description": "小程序页面js"
},
"wxml-com": {
"prefix": "wxml-com",
"body": [
"Component({",
" /** 组件的属性列表 */",
"properties: {",
" id: {",
" type: Number,",
" value: 0,",
" observer: function (val) {",
" console.log(val);",
" }",
" }",
"},",
"lifetimes: {",
" attached: function () {",
" // 在组件实例进入页面节点树时执行\n",
" $0",
" },",
" detached: function () {",
" // 在组件实例被从页面节点树移除时执行\n",
" $0",
" }",
"},",
"/** 组件的初始数据 */",
"data: {",
" $0",
"},",
"/** 组件的方法列表 */",
"methods: {",
" $0",
"}\n",
"})",
"$2"
],
"description": "小程序组件js"
}
}
4、项目使用
{
"picp vue页面": {
"prefix": "picp-vue",
"body": [
"<template>",
" <div class=\"normal-search-page package-page\">",
" <!-- 搜索头部 -->",
" <search-bar",
" :formData=\"formData\"",
" :options=\"searchOptions\"",
" :loading=\"loading\"",
" @handleReset=\"handleReset\"",
" @handleQuery=\"handleQuery\"",
" />",
" <div class=\"normal-table\">",
" <!-- table列表 -->",
" <component",
" :is=\"showTable\"",
" :loading=\"loading\"",
" :tableData=\"tableData\"",
" @refresh=\"refresh\"",
" @handleEdit=\"handleEdit\"",
" />",
" </div>",
" <div class=\"normal-pagination-bar\">",
" <!-- 分页 -->",
" <pagination",
" v-show=\"page.totalCount > 0\"",
" :total=\"page.totalCount\"",
" :page.sync=\"page.pageNum\"",
" :limit.sync=\"page.pageSize\"",
" @pagination=\"handlePageChange\"",
" />",
" </div>",
" </div>",
"</template>",
"",
"<script>",
"// import 《组件名称》 from '《组件路径》'",
"import SearchBar from '@/components/SearchBar'",
"export default {",
" // import引入的组件需要注入到对象中才能使用",
" components: {",
" SearchBar,",
" HeadQuartersTable,",
" StoresTable,",
" },",
" data() {",
" return {",
" loading: false,",
" tableData: [],",
" searchOptions: {",
" queryArray: [",
" {",
" type: 'input',",
" label: '名称',",
" model: 'name',",
" },",
" ],",
" btnArray: [",
" {",
" label: '新增',",
" cb: this.handleAdd,",
" },",
" ],",
" },",
" // 搜索数据",
" formData: {},",
" // 分页",
" page: {",
" pageNum: 1,",
" pageSize: 10,",
" totalCount: 0,",
" },",
" }",
" },",
" created() {},",
" mounted() {",
" this.fetchList()",
" },",
" methods: {",
" // 获取数据",
" async fetchList() {",
" this.loading = true",
" try {",
" const { data } = await tableMap[this.selectTab].api({",
" ...this.page,",
" ...this.formData,",
" })",
" this.page.totalCount = data.totalCount",
" this.tableData = data.list",
" } catch (error) {",
" console.log(error)",
" } finally {",
" this.loading = false",
" }",
" },",
" // 搜索",
" handleQuery() {",
" this.resetPage()",
" this.fetchList()",
" },",
" // 刷新",
" refresh() {",
" this.fetchList()",
" },",
" // 重置页码刷新",
" resetRefresh() {",
" this.resetPage()",
" this.fetchList()",
" },",
" // 重置",
" handleReset() {",
" this.tableData = []",
" this.formData = {}",
" this.resetPage()",
" this.fetchList()",
" },",
" //切换tab",
" handleClick() {",
" this.handleReset()",
" },",
" // 切换页码",
" handlePageChange(e) {",
" this.page = Object.assign(this.page, e)",
" this.fetchList()",
" },",
" // 编辑",
" handleEdit(id) {",
" console.log('编辑', id) ",
" },",
" // 重置页面配置",
" resetPage() {",
" this.page = {",
" pageNum: 1,",
" pageSize: 10,",
" totalCount: 0,",
" }",
" },",
" },",
"}",
"</script>",
"",
"<style scoped lang=\"less\">",
"//@import 'xxx.less';引入公共css类",
"</style>",
"",
""
],
"description": "快速生成picp页面"
},
"picp table组件页面": {
"prefix": "picp-table",
"body": [
"<template>",
" <el-table v-loading=\"loading\" :data=\"listData\" stripe border>",
" <el-table-column",
" v-for=\"col in Columns\"",
" :key=\"col.prop\"",
" :label=\"col.label\"",
" :prop=\"col.prop\"",
" :width=\"col.width\"",
" :show-overflow-tooltip=\"true\"",
" align=\"center\"",
" />",
" <el-table-column label=\"操作\" align=\"center\" width=\"180\" fixed=\"right\">",
" <template slot-scope=\"{ row }\">",
" <div class=\"split-btns\">",
" <el-button type=\"text\" size=\"mini\" @click=\"handleOff(row)\">{{",
" row.shelvesState === 1 ? '下架' : '上架'",
" }}</el-button>",
" <el-button",
" type=\"text\"",
" size=\"mini\"",
" class=\"error-btn\"",
" style=\"margin-left: 10px\"",
" @click=\"handleDelete(row)\"",
" >删除</el-button",
" >",
" </div>",
" </template>",
" </el-table-column>",
" </el-table>",
"</template>",
"",
"<script>",
"// 导入其他文件例如：import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}',",
" props: {",
" listData: {",
" type: Array,",
" default: () => [],",
" },",
" },",
" // import引入的组件需要注入到对象中才能使用",
" components: {},",
" data() {",
" // 这里存放数据",
" return {",
" Columns:[],",
" loading: false,",
" }",
" },",
" // 生命周期 - 创建完成（可以访问当前this实例）",
" created() {},",
" // 生命周期 - 挂载完成（可以访问DOM元素）",
" mounted() {},",
" methods: {",
" handleOff(row) {",
" console.log(row)",
" if (row.shelvesState === 1) {",
" // 下架",
" this.$confirm('确定下架该商品吗？', '下架提醒', {",
" confirmButtonText: '确定下架',",
" type: 'warning',",
" })",
" .then((_) => {",
" downApi({ id: row.id }).then((res) => {",
" this.\\$message.success(res.msg)",
" this.\\$emit('refresh')",
" })",
" })",
" .catch((_) => {})",
" } else {",
" // 上架",
" upApi({ id: row.id }).then((res) => {",
" this.\\$message.success(res.msg)",
" this.\\$emit('refresh')",
" })",
" }",
" },",
" handleDelete(row) {",
" this.$confirm(",
" '您确定要删除吗？请谨慎操作！',",
" '删除提醒'",
" )",
" .then((_) => {",
" deleteApi({}).then((res) => {",
" this.\\$message.success(res.msg)",
" this.\\$emit('refresh')",
" })",
" })",
" .catch((_) => {})",
" },",
" },",
"}",
"</script>",
"",
"<style scoped lang=\"less\">",
"//@import 'xxx.less';引入公共css类",
"</style>",
""
],
"description": "picp table组件页面"
},
"picp-search": {
"prefix": "picp-search",
"body": [
"<template>",
" <div class=\"normal-search-mod\">\n",
" <div class=\"search-field\">\n",
" <el-form ref=\"queryForm\" :inline=\"true\" size=\"small\" label-width=\"100px\" label-position=\"top\" :model=\"queryParams\" >",
" <el-form-item>",
" <div class=\"search-btns-box\">",
" <div class=\"search-flex-btns\">",
" <el-button style=\"margin-left: 30px\" type=\"primary\" size=\"small\" :loading=\"loading\" @click=\"handleSearch\" >搜索</el-button>",
" <el-button type=\"primary\" size=\"small\" plain @click=\"handleReset\">重置</el-button>",
" </div>",
" </div>",
" </el-form-item>",
" </el-form>",
" </div>",
" </div>",
"</template>\n",
"<script>",
"// import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}',",
" props: {",
" loading: {",
" type: Boolean,",
" default: false,",
" },",
" },",
" components: {\n",
" },",
" data() {",
" return {\n",
" queryParams:{}",
" }",
" },",
" created () {",
"",
" },",
" mounted () {",
"",
" },",
"methods: {\n",
" handleSearch(){\n",
" this.\\$emit('search', this.queryParams)\n",
" },\n",
" handleReset(){\n",
" this.\\$emit('reset')\n",
" }\n",
"},\n",
"}",
"</script>\n",
"<style scoped lang=\"less\">\n",
"//@import 'xxx.less';引入公共css类",
"</style>",
"$2"
],
"description": "快速生成picp搜索组件"
},
"picp-header-button": {
"prefix": "picp-header-button",
"body": [
"<div class=\"normal-search-body\">",
" <div class=\"option-bar\">",
" <!-- 头部按钮 -->",
" <el-button",
" type=\"primary\"",
" size=\"small\"",
" plain",
" icon=\"el-icon-plus\"",
" :disabled=\"isEdit\"",
" :loading=\"loading\"",
" @click=\"add\"",
" >新增",
" </el-button>",
" </div>",
"</div>"
],
"description": "picp页面头部按钮"
},
"picp-el-table": {
"prefix": "picp-el-table",
"body": [
"<div class=\"normal-search-body\">",
" <div class=\"normal-table\">",
" <el-table v-loading=\"loading\" :data=\"tableData\" stripe border>",
" <el-table-column",
" v-for=\"col in columns\"",
" :key=\"col.prop\"",
" :label=\"col.label\"",
" :prop=\"col.prop\"",
" :width=\"col.width\"",
" :show-overflow-tooltip=\"true\"",
" align=\"center\"",
" />",
" <el-table-column",
" label=\"操作\"",
" align=\"center\"",
" width=\"180\"",
" fixed=\"right\"",
" >",
" <template slot-scope=\"{row}\">",
" <div class=\"split-btns\">",
" <el-button",
" type=\"text\"",
" size=\"mini\"",
" @click=\"edit(row.id)\"",
" >编辑</el-button",
" >",
" <el-popconfirm",
" title=\"确定删除吗？\"",
" @confirm=\"handleDelete(row.id)\"",
" :ref=\"`popconfirm-${row.id}`\"",
" >",
" <el-button",
" slot=\"reference\"",
" type=\"text\"",
" size=\"mini\"",
" class=\"error-btn\"",
" style=\"margin-left: 10px\"",
" >删除</el-button",
" >",
" </el-popconfirm>",
" </div>",
" </template>",
" </el-table-column>",
" </el-table>",
" </div>",
" <div class=\"normal-pagination-bar\">",
" <!-- 分页 -->",
" <pagination",
" v-show=\"page.totalCount > 0\"",
" :total=\"page.totalCount\"",
" :page.sync=\"page.pageNum\"",
" :limit.sync=\"page.pageSize\"",
" @pagination=\"handlePageChange\"",
" />",
" </div>",
"</div>"
],
"description": "picp快速生成table表格组件"
},
"picp-el-form": {
"prefix": "picp-el-form",
"body": [
"<div class=\"${1|drawercustom,dialogcustom|}_div\">",
" <el-form",
" ref='form'",
" :model='form'",
" :rules='formRules'",
" label-width='120px'",
" class='demo-ruleForm'",
" >",
" <el-form-item label='' prop=''>",
" <el-select",
" class='global-el-input search-input'",
" v-model='form.id'",
" placeholder='请选择'",
" filterable",
" clearable",
" >,",
" <el-option",
" v-for='option in options'",
" :key='option.value'",
" :label='option.label'",
" :value='option.value'",
" ></el-option>",
" </el-select>",
" </el-form-item>",
" <el-form-item label='' prop=''>",
" <el-input",
" type='text'",
" class='global-el-input'",
" v-model='form.name'",
" placeholder='请输入'",
" :maxlength='inputMaxLength'",
" clearable",
" ></el-input>",
" </el-form-item>",
" <div class=\"${1|drawercustom,dialogcustom|}_footer\">",
" <el-divider></el-divider>",
" <el-form-item>",
" <div class=\"${1|drawercustom,dialogcustom|}_footer_action\">",
" <el-button type=\"primary\" size=\"small\" @click=\"handleSubmit\"",
" >保存</el-button",
" >",
" <el-button size=\"small\" plain @click=\"handleDrawerClose\"",
" >取消</el-button",
" >",
" </div>",
" </el-form-item>",
" </div>",
" </div>",
"</el-form>",
"$2"
],
"description": "picp快速生成form表单组件"
},
"picp-el-dialog": {
"prefix": "picp-el-dialog",
"body": [
"<template>",
" <el-dialog",
" title=\"提示\"",
" :visible.sync=\"show\"",
" width=\"30%\"",
" :before-close=\"closeDialog\"",
" custom-class=\"dialogcustom\"",
" >",
" <el-divider></el-divider>",
" <el-form ref=\"form\" :model=\"form\" :rules=\"formRules\" label-width=\"120px\">",
" <el-form-item label=\"测试\" prop=\"name\">",
" <el-input",
" type=\"text\"",
" class=\"global-el-input\"",
" v-model=\"form.name\"",
" placeholder=\"请输入\"",
" maxlength=\"20\"",
" clearable",
" ></el-input>",
" </el-form-item>",
"",
" <div class=\"dialogcustom_footer\">",
" <el-divider></el-divider>",
" <el-form-item>",
" <div class=\"dialogcustom_footer_action\">",
" <el-button size=\"small\" plain @click=\"closeDialog\">取消</el-button>",
" <el-button type=\"primary\" size=\"small\" @click=\"submitForm\"",
" >确认</el-button",
" >",
" </div>",
" </el-form-item>",
" </div>",
" </el-form>",
" </el-dialog>",
"</template>",
"",
"<script>",
"// import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}',",
" props: {",
" show: {",
" type: Boolean,",
" default: false,",
" },",
" title: {",
" type: String,",
" default: '',",
" },",
" },",
" components: {},",
" data() {",
" return {",
" formRules: {",
" name: [{ required: true }],",
" },",
" form: { name: '' },",
" }",
" },",
" created() {},",
" mounted() {},",
" methods: {",
" submitForm() {",
" console.log('提交')",
" this.$refs['form'].validate(async (valid) => {",
" if (valid) {",
" this.\\$emit('submitForm')",
" }",
" })",
" },",
" closeDialog() {",
" this.\\$emit('update:show',false)",
" },",
" },",
"}",
"</script>",
"",
"<style scoped lang=\"less\">",
"//@import 'xxx.less';引入公共css类",
"</style>",
""
],
"description": "picp快速生成dialog表单组件"
},
"picp-el-drawer": {
"prefix": "picp-el-drawer",
"body": [
"<template>",
" <el-drawer",
" custom-class=\"drawercustom\"",
" :visible.sync=\"show\"",
" size=\"80%\"",
" :wrapperClosable=\"false\"",
" :before-close=\"closeDrawer\"",
" >",
" <div slot=\"title\">",
" <p class=\"drawercustom_title\">{{ title }}</p>",
" <el-divider></el-divider>",
" </div>",
" <div class=\"drawercustom_div\">",
" <el-form ref=\"form\" :rules=\"formRules\" :model=\"form\" label-width=\"120px\">",
" <div class=\"drawercustom_footer\">",
" <el-divider></el-divider>",
" <el-form-item>",
" <div class=\"drawercustom_footer_action\">",
" <el-button type=\"primary\" size=\"small\" @click=\"submitForm\"",
" >保存</el-button",
" >",
" <el-button size=\"small\" plain @click=\"closeDrawer\"",
" >取消</el-button",
" >",
" </div>",
" </el-form-item>",
" </div>",
" </el-form>",
" </div>",
" </el-drawer>",
"</template>",
"<script>",
"// 导入其他文件例如：import 《组件名称》 from '《组件路径》'",
"export default {",
" name: '${TM_FILENAME_BASE/(^.)/${1:/upcase}/}',",
" props: {",
" show: {",
" type: Boolean,",
" default: false,",
" },",
" title: {",
" type: String,",
" default: '',",
" },",
" },",
" // import引入的组件需要注入到对象中才能使用",
" components: {},",
" data() {",
" // 这里存放数据",
" return {",
" form: {},",
" formRules: {},",
" }",
" },",
" // 生命周期 - 创建完成（可以访问当前this实例）",
" created() {},",
" // 生命周期 - 挂载完成（可以访问DOM元素）",
" mounted() {},",
" methods: {",
" closeDrawer() {",
" this.\\$emit('update:show',false)",
" },",
" submitForm() {",
" console.log('提交')",
" this.$refs['form'].validate(async (valid) => {",
" if (valid) {",
" this.\\$emit('submitForm')",
" }",
" })",
" },",
" },",
"}",
"</script>",
"",
"<style scoped lang=\"less\">",
"</style>"
],
"description": "picp快速生成drawer页面"
},
"picp-api": {
"prefix": "picp-api",
"body": [
"/*",
" * @Description: ${TM_CURRENT_LINE:当前行内容}${TM_SELECTED_TEXT:当前选中的文本}-Api",
" * @Author: weiguoqiang",
" * @LastEditors: weiguoqiang",
" * @Date: ${CURRENT_YEAR}-${CURRENT_MONTH}-${CURRENT_DATE} ${CURRENT_HOUR}:${CURRENT_MINUTE}:${CURRENT_SECOND}",
" */",
"",
"import request from '@/utils/request'",
"",
"/**",
" * 获取列表",
" * 地址：",
" */",
"export function extensionChannelListApi(data) {",
" return request({",
" requestBase: '${TM_CURRENT_WORD/(.*)/${1:/upcase}/}',",
" url: `/order/nutrition/goods/onlineRetailers/get/spu`,",
" method: 'post',",
" data,",
" })",
"}"
],
"description": "picp快速生成api页面"
}
}
5、项目全局样式
@import './variables.less';
@import './mixin.less';
@import './transition.less';
@import './sidebar.less';
// @import './element-ui.scss';
.underline {
cursor: pointer;
text-decoration: underline;
color: #3739b2;
}
body {
height: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
Microsoft YaHei, Arial, sans-serif;
}
label {
font-weight: 700;
}
html {
height: 100%;
box-sizing: border-box;
}
#app {
height: 100%;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
a:focus,
a:active {
outline: none;
}
a,
a:focus,
a:hover {
cursor: pointer;
color: inherit;
text-decoration: none;
}
div:focus {
outline: none;
}
.clearfix {
&:after {
visibility: hidden;
display: block;
font-size: 0;
content: ' ';
clear: both;
height: 0;
}
}
// main-container global css
.app-container {
// padding: 20px;
}
.mr10 {
margin-right: 10px;
}
// 固定input等宽度
.global-el-input {
width: 210px !important;
}
// 时间搜索
.global-el-date {
width: 210px !important;
}
.global-el-date .el-range-separator {
min-width: 20px !important;
}
.global-el-date .el-range__close-icon {
width: 5px !important;
}
.global-el-date .el-range-input {
width: 77px;
}
// 省市区县选择器宽度
.global-el-cascader .el-cascader-menu {
min-width: 210px !important;
}
// 表格头样式
.normal-table {
thead th {
background-color: #f5f5f5;
}
}
// 表格分割
.split-btns {
display: flex;
justify-content: center;
align-items: center;
.el-button--text {
color: #3739b2;
text-decoration: underline;
&:hover {
opacity: 0.8;
}
&.error-btn {
color: red;
}
&.warning-btn {
color: red;
}
&.success-btn {
color: #68bd68;
}
&.info-btn {
color: #c8c9cc;
}
}
.split-icon {
color: #dadada;
padding-left: 10px;
padding-right: 10px;
}
}
.drawer-mod {
.drawer-bd {
padding: 16px;
.sub-drawer-title {
font-size: 16px;
}
}
.drawer-ft {
display: flex;
justify-content: flex-end;
padding: 16px;
}
}
.el-input-number {
text-align: left !important;
}
// list列表样式
.normal-search-page {
background: #fff;
padding: 16px;
text-align: left !important;
}
.normal-search-page {
background: #fff;
padding: 16px;
.normal-search-header {
}
.normal-search-body {
.option-bar {
padding-bottom: 16px;
}
}
}
// search组件样式
.normal-search-mod {
display: flex;
justify-content: space-between;
.search-btns {
min-width: 180px;
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
}
//解决使用el-select 时，会出现IOS端点击两次的兼容bug
.el-scrollbar .el-scrollbar__bar {
opacity: 1 !important;
}
.normal-drawer-body {
padding: 16px;
}
.info-item-mod {
margin: 0 0 20px 0;
padding: 0;
.info-item-hd {
margin: 0;
padding: 0;
font-size: 16px;
margin-bottom: 8px;
}
.info-item-bd {
margin: 0;
padding: 0;
.normal-table {
}
}
&.dl-line {
padding-bottom: 20px;
display: flex;
align-items: center;
margin-bottom: 16px;
.info-item-hd {
margin-bottom: 0;
margin-right: 16px;
}
.info-item-bd {
padding-bottom: 0;
}
}
}
.room-info-table {
width: 100%;
font-size: 14px;
th,
td {
padding: 15px;
}
th {
text-align: right;
}
td {
text-align: left;
}
.room-nights {
padding-right: 40px;
span {
color: #999;
}
}
.with-days {
display: flex;
justify-content: space-between;
}
}
// 房态二级弹窗
.sub-layout-mod {
display: flex;
flex-direction: column;
height: 100%;
overflow: hidden;
.sub-layout-hd {
display: flex;
justify-content: space-between;
border-bottom: 1px solid #f5f5f5;
align-items: center;
.sub-layout-hd-title {
padding-left: 16px;
display: flex;
.btn-back {
margin-right: 40px;
}
}
.sub-layout-hd-btn {
padding: 10px;
cursor: pointer;
}
}
.sub-layout-bd {
flex: 1;
padding: 16px;
overflow-y: auto;
}
.sub-layout-ft {
border-top: 1px solid #f5f5f5;
padding: 16px;
display: flex;
&.space-between {
justify-content: space-between;
}
&.flex-end {
justify-content: flex-end;
}
}
}
.more-opt-list {
ul {
padding: 0;
margin: 0;
list-style: none;
li {
line-height: 32px;
height: 32px;
padding-left: 16px;
&:hover {
background-color: #f5f5f5;
cursor: pointer;
}
}
}
}
.mr-16 {
margin-right: 16px;
}
.color-9 {
color: #999;
}
.info-item-mod .remark-indent {
padding-left: 40px;
}
.csp-system {
.el-form--label-top .el-form-item__label {
padding: 0;
line-height: 32px;
}
.el-form-item--small.el-form-item {
margin-bottom: 16px;
}
}
.search-btns-box {
display: inline-block;
height: 65px;
margin-bottom: 6px;
.search-flex-btns {
height: 65px;
display: flex;
align-items: flex-end;
justify-content: flex-end;
}
}
// drawer=>form表单提交按钮样式
.formclass {
padding-bottom: 150px;
&_footer {
width: 100%;
background: white;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
&_action {
width: 100%;
height: 50px;
padding-right: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
}
.form-textarea {
.el-form-item.el-form-item--small {
width: 100%;
.el-form-item__content {
width: calc(100% - 130px);
.global-el-input {
width: 100% !important;
}
}
}
}
// drawer自定义样式
.drawercustom {
padding-bottom: 120px;
.el-drawer__header {
color: #333;
margin-bottom: 0 !important;
padding: 20px 0 0;
}
.el-drawer__close-btn {
position: absolute;
top: 35px;
right: 20px;
}
&_title {
padding-left: 20px;
}
&_div {
padding: 0 20px;
}
&_form {
padding-bottom: 100px;
}
&_footer {
width: 100%;
background: white;
position: absolute;
bottom: 0;
left: 0;
z-index: 1;
&_action {
width: 100%;
height: 50px;
padding-right: 30px;
display: flex;
justify-content: flex-end;
align-items: center;
}
}
}
//dialog自定义样式
.dialogcustom {
.el-dialog__header {
color: #333;
padding-bottom: 0;
}
.el-dialog__body {
margin: 0;
padding: 0;
}
&_div {
padding: 0 20px 20px;
}
&_footer {
margin-top: 10px;
padding-bottom: 1px;
&_action {
margin-right: 20px;
text-align: right;
}
}
}
// el-table 图片样式
.tableimage {
display: flex;
align-items: center;
.el-image {
width: 100px;
height: 100px;
}
&_span {
margin-left: 10px;
}
}
// el-input-number 样式
.global-el-input-number .el-input__inner {
padding-left: 15px !important;
text-align: left !important;
}
// el-upload 自定义样式
.uploadcustom .avatar-uploader .el-upload {
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.uploadcustom .avatar-uploader .el-upload:hover {
border-color: #409eff;
}
.uploadcustom .avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 178px;
height: 178px;
line-height: 178px;
text-align: center;
}
.uploadcustom .avatar {
width: 178px;
height: 178px;
display: block;
}
总结
例如：以上就是今天要讲的内容，本文仅仅简单介绍了vscode用户代码片段简单的使用，上述内容只是本人对文档中一些实用功能整理与自己的理解，如有错误之处，敬请指出，谢谢！
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
