配置cv-pc-ui自动标签补齐 ¶
1、 打开vscode
2、 配置
- mac 电脑 按下
shift + command + p - window电脑 按下
shift + ctrl + p
3、 在输入框 搜索 代码片段 再选择 首选项:配置用户代码片段
4、 选择 新建全局代码片段
5、 输入代码片段储存文件名称 cv-pc-ui 按回车确定。
6、 把以下内容复制到文件 （下面代码区域右上角，点击按钮可快捷复制）
::: demo
{
// Place your 全局 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"
// }
"cv-input-text": {
"prefix": "<cv-input-text",
//"scope": "javascript,typescript,html,vue",
"body": ["<cv-form-item label=\"文本\">", " <cv-input-text v-model=\"formData.name\" />", "</cv-form-item>", "$2"],
"description": "input文本"
},
"cv-input-btn": {
"prefix": "<cv-input-btn",
"body": [
"<cv-form-item label=\"带按钮文本\">",
" <cv-input-btn v-model=\"formData.txtbtn\" @click=\"onClick\" />",
"</cv-form-item>",
"$2"
],
"description": "input按钮-btn自带按钮的输入框"
},
"cv-input-number": {
"prefix": "<cv-input-number",
"body": ["<cv-form-item label=\"数字\">", " <cv-input-number v-model=\"formData.number\" />", "</cv-form-item>", "$2"],
"description": "input数字"
},
"cv-input-idcard": {
"prefix": "<cv-input-idcard",
"body": ["<cv-form-item label=\"身份证\">", " <cv-input-idcard v-model=\"formData.idcard\" />", "</cv-form-item>", "$2"],
"description": "input身份证-idcard身份证输入框"
},
"cv-input-digit": {
"prefix": "<cv-input-digit",
"body": ["<cv-form-item label=\"小数金额\">", " <cv-input-digit v-model=\"formData.price\" />", "</cv-form-item>", "$2"],
"description": "input小数-digit带小数点输入框"
},
"cv-input-password": {
"prefix": "<cv-input-password",
"body": ["<cv-form-item label=\"密码\">", " <cv-input-password v-model=\"formData.password\" />", "</cv-form-item>", "$2"],
"description": "input密码-password输入框"
},
"cv-input-mobile": {
"prefix": "<cv-input-mobile",
"body": ["<cv-form-item label=\"手机号\">", " <cv-input-mobile v-model=\"formData.mobile\" />", "</cv-form-item>", "$2"],
"description": "input手机号"
},
"cv-input-email": {
"prefix": "<cv-input-email",
"body": ["<cv-form-item label=\"邮箱\">", " <cv-input-email v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "input邮箱"
},
"cv-autocomplete-base": {
"prefix": "<cv-autocomplete-base",
"body": [
"<cv-form-item label=\"搜索内容\">",
" <cv-autocomplete-base v-model=\"formData.search\" :dataLists=\"settSearchData\" />",
"</cv-form-item>",
"$2"
],
"description": "input带网络搜索"
},
"cv-autocomplete-load": {
"prefix": "<cv-autocomplete-load",
"body": [
"<cv-form-item label=\"搜索内容\">",
" <cv-autocomplete-load v-model=\"formData.search\" :compConfig=\"{ apiFunc: HttpObj.flagGet('XXX_XXX_XXX') }\" />",
"</cv-form-item>",
"$2"
],
"description": "input带网络搜索"
},
/**
* ======================== textarea
*/
"cv-textarea": {
"prefix": "<cv-textarea",
"body": ["<cv-form-item label=\"多行文本\">", " <cv-textarea v-model=\"formData.textarea\" />", "</cv-form-item>", "$2"],
"description": "textarea多行输入框"
},
"cv-textarea-btn": {
"prefix": "<cv-textarea-btn",
"body": ["<cv-form-item label=\"多行文本按钮\">", " <cv-textarea-btn v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "多行文本带按钮"
},
/**
* ======================== 计数器
*/
"cv-input-counter": {
"prefix": "<cv-input-counter",
"body": ["<cv-form-item label=\"数量\">", " <cv-input-counter v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "input计数器"
},
/**
* ======================== radio
*/
"cv-radio-group": {
"prefix": "<cv-radio-group",
"body": [
"<cv-form-item label=\"单选\">",
" <cv-radio-group v-model=\"formData.radio\" :dataLists=\"settRadioData1\" />",
" <cv-radio-group v-model=\"formData.radio\">",
" <cv-radio-opt-base label=\"内容\" value=\"1\">内容</cv-radio-opt-base>",
" </cv-radio-group>",
"</cv-form-item>",
"$2"
],
"description": "radio单选框"
},
"cv-radio-opt": {
"prefix": "<cv-radio-opt-base",
"body": [" <cv-radio-opt-base label=\"xxx\" />", "$2"],
"description": "radio普通样式单选"
},
"cv-radio-opt-btn": {
"prefix": "<cv-radio-opt-btn",
"body": [" <cv-radio-opt-btn label=\"xxx\" />", "$2"],
"description": "radio按钮样式单选"
},
"cv-radio-tag": {
"prefix": "<cv-radio-tag",
"body": [
"<cv-form-item label=\"单选标签\">",
" <cv-radio-tag v-model=\formData.radio\" :dataLists=\"radioLists\" />",
"</cv-form-item>",
"$2"
],
"description": "radio-tag标签单选框"
},
/**
* ======================== checkbox
*/
"cv-checkbox-group": {
"prefix": "<cv-checkbox-group",
"body": [
"<cv-form-item label=\"多选\">",
" <cv-checkbox-group v-model=\"formData.checkbox\" :dataLists=\"settCheckData1\" :maxNumber=\"maxNumber\" />",
"</cv-form-item>",
"$2"
],
"description": "checkbox多选框"
},
"cv-checkbox-all": {
"prefix": "<cv-checkbox-all",
"body": [
"<cv-form-item label=\"选择\">",
" <cv-checkbox-all v-model=\"formData.checkboxbase1\" :dataLists=\"settCheckData1\" />",
"</cv-form-item>",
"$2"
],
"description": "check多选框全选按钮"
},
"cv-checkbox-opt-base": {
"prefix": "<cv-checkbox-opt-base",
"body": [
"<cv-form-item label=\"多选标签\">",
" <cv-checkbox-opt-base v-model=\"formData.checkboxTag\" :dataLists=\"checkLists\" :maxNumber=\"maxNumber\" />",
"</cv-form-item>",
"$2"
],
"description": "checkbox-opt - 基础样式"
},
"cv-checkbox-opt-btn": {
"prefix": "<cv-checkbox-opt-btn",
"body": [
"<cv-form-item label=\"多选标签\">",
" <cv-checkbox-opt-btn v-model=\"formData.checkboxTag\" :dataLists=\"checkLists\" :maxNumber=\"maxNumber\" />",
"</cv-form-item>",
"$2"
],
"description": "checkbox-opt - 按钮模式"
},
/**
* ======================== switch滑块开关
*/
"cv-switch-base": {
"prefix": "<cv-switch-base",
"body": ["<cv-form-item label=\"开关\">", " <cv-switch-base v-model=\"formData.switch1\" />", "</cv-form-item>", "$2"],
"description": "switch滑块开关"
},
/**
* ======================== tag标签
*/
"cv-tag-base": {
"prefix": "<cv-tag-base",
"body": ["<cv-form-item label=\"标签\">", " <cv-tag-base v-model=\"formData.tag1\" />", "</cv-form-item>", "$2"],
"description": "tag标签"
},
/**
* ======================== 列表选择器
*/
"cv-select-base": {
"prefix": "<cv-select-base",
"body": [
"<cv-form-item label=\"选择\">",
" <cv-select-base v-model=\"formData.xxx\" :dataLists=\"settSelectList\" />",
"</cv-form-item>",
"$2"
],
"description": "select单列选择"
},
"cv-select-opt": {
"prefix": "<cv-select-opt",
"body": ["<cv-select-opt label=\"文本\" value=\"\"></cv-select-opt>", "$2"],
"description": "select选项"
},
"cv-select-tree": {
"prefix": "<cv-select-tree",
"body": [
"<cv-form-item label=\"选择\">",
" <cv-select-tree v-model=\"formData.xxx\" :dataLists=\"settSelectList\" />",
"</cv-form-item>",
"$2"
],
"description": "select树形选择"
},
"cv-geo-city": {
"prefix": "<cv-geo-city",
"body": ["<cv-form-item label=\"选择城市\">", " <cv-geo-city v-model=\"formData.selectCity\" />", "</cv-form-item>", "$2"],
"description": "select城市选择"
},
"cv-cascader-base": {
"prefix": "<cv-cascader-base",
"body": [
"<cv-form-item label=\"级联选择\">",
" <cv-cascader-base v-model=\"formData.xxx\" :dataLists=\"settCascaderList\" />",
"</cv-form-item>",
"$2"
],
"description": "cascader级联选择"
},
/**
* ======================== 时间和日期选择
*/
"cv-time-base": {
"prefix": "<cv-time-base",
"body": ["<cv-form-item label=\"时间\">", " <cv-time-base v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "time时间选择"
},
"cv-time-range": {
"prefix": "<cv-time-range",
"body": ["<cv-form-item label=\"时间区间\">", " <cv-time-range v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "time时间区间"
},
"cv-date-base": {
"prefix": "<cv-date-base",
"body": ["<cv-form-item label=\"日期选择\">", " <cv-date-base v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "data日期选择"
},
"cv-date-range": {
"prefix": "<cv-date-range",
"body": ["<cv-form-item label=\"日期区间\">", " <cv-date-range v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "data日期区间"
},
"cv-datetime-base": {
"prefix": "<cv-datetime-base",
"body": ["<cv-form-item label=\"日期时间\">", " <cv-datetime-base v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "日期和日期选择"
},
"cv-datetime-range": {
"prefix": "<cv-datetime-range",
"body": ["<cv-form-item label=\"日期时间\">", " <cv-datetime-range v-model=\"formData.xxx\" />", "</cv-form-item>", "$2"],
"description": "日期和日期区间"
},
/**
* ======================== layout布局
*/
"cv-row": {
"prefix": "<cv-row",
"body": ["<cv-row :gutter=\"20\">$2</cv-row>"],
"description": "row栅格布局 行"
},
"cv-col": {
"prefix": "<cv-col",
"body": ["<cv-col :span=\"24\">$2</cv-col>"],
"description": "col栅格布局 列"
},
/**
* ======================== form 表单
*/
"cv-form-base": {
"prefix": "<cv-form-base",
"body": [
"<cv-form-base ref=\"refFormBase\" :rules=\"formRules\" :model=\"formData\" label-width=\"auto\" label-position=\"right\">",
"$2",
"</cv-form-base>"
],
"description": "form表单"
},
"cv-form-inline": {
"prefix": "<cv-form-inline",
"body": ["<cv-form-inline>$2</cv-form-inline>"],
"description": "form表单横向排列"
},
"cv-form-item": {
"prefix": "<cv-form-item",
"body": ["<cv-form-item label=\"label\">$2</cv-form-item>"],
"description": "头部搜索专用form表单"
},
/**
* ======================== button按钮
*/
"cv-btn-base": {
"prefix": "<cv-btn-base",
"body": ["<cv-btn-base>$2</cv-btn-base>"],
"description": "button按钮"
},
"cv-btn-text": {
"prefix": "<cv-btn-text",
"body": ["<cv-btn-text>$2</cv-btn-text>"],
"description": "button text按钮"
},
/**
* ======================== transfer穿梭框
*/
"cv-transfer": {
"prefix": "<cv-transfer",
"body": ["<cv-transfer>$2</cv-transfer>"],
"description": "transfer按钮"
},
/**
* ======================== tabs 切换卡
*/
"cv-tabs-jump": {
"prefix": "<cv-tabs-jump",
"body": ["<cv-tabs-jump>$2</cv-tabs-jump>"],
"description": "tabs 切换卡"
},
"cv-tab-pane": {
"prefix": "<cv-tab-pane",
"body": ["<cv-tab-pane>$2</cv-tab-pane>"],
"description": "tabs 切换卡单项"
},
/**
* ======================== 验证码
*/
"cv-code-sms": {
"prefix": "<cv-code-sms",
"body": [
"<cv-form-item label=\"验证码\">",
" <cv-code-sms v-model=\"formData.code\" :mobile=\"formData.phone\" />",
"</cv-form-item>",
"$2"
],
"description": "sms短信验证码"
},
/**
* ======================== upload上传
*/
"cv-upload-avatar": {
"prefix": "<cv-upload-avatar",
"body": ["<cv-upload-avatar v-model=\"formData.img\" :src=\"formData.img_original\" />", "$2"],
"description": "upload-avatar头像上传"
},
"cv-upload-image": {
"prefix": "<cv-upload-image",
"body": [
"<cv-form-item label=\"图片\">",
" <cv-upload-image v-model=\"formData.img\" :src=\"formData.img_cdn\" />",
"</cv-form-item>",
"$2"
],
"description": "upload-image图片上传"
},
"cv-upload-video": {
"prefix": "<cv-upload-video",
"body": [
"<cv-form-item label=\"视频\">",
" <cv-upload-video v-model=\"formData.video\" :src=\"formData.video_cdn\" />",
"</cv-form-item>",
"$2"
],
"description": "upload-video视频上传"
},
/**
* ======================== 展示文本框
*/
"cv-show-text": {
"prefix": "<cv-show-text",
"body": ["<cv-show-text label=\"内容\" :text=\"text\" />", "$2"],
"description": "展示文本"
},
/**
* ======================== 展示图片框
*/
"cv-show-image": {
"prefix": "<cv-show-image",
"body": ["<cv-show-image label=\"图片\" :url=\"url\" width=\"80px\" height=\"80px\" />", "$2"],
"description": "展示图片"
},
/**
* ======================== 表格
*/
"cvTbColumnText": {
"prefix": "<cvTbColumnText",
"body": ["<cvTbColumnText label=\"表头11\" prop=\"xxx_xxx\" />", "$2"],
"description": "表格列文本"
},
"cvTbColumnImg": {
"prefix": "<cvTbColumnImg",
"body": ["<cvTbColumnImg label=\"表头11\" prop=\"xxx_xxx\" />", "$2"],
"description": "表格列图片"
},
"cvTbColumnIndex": {
"prefix": "<cvTbColumnIndex",
"body": ["<cvTbColumnIndex label=\"序号\" />", "$2"],
"description": "表格列索引"
},
"cvTbColumnCheck": {
"prefix": "<cvTbColumnCheck",
"body": ["<cvTbColumnCheck label=\"选择\" />", "$2"],
"description": "表格列选择"
},
"cvTbColumnEnum": {
"prefix": "<cvTbColumnEnum",
"body": ["<cvTbColumnEnum label=\"枚举\" :dataLists=\"{0:'aa',1:'bb'}\" />", "$2"],
"description": "表格枚举"
},
"cvTbColumnBase": {
"prefix": "<cvTbColumnBase",
"body": ["<cvTbColumnBase label=\"表头11\" v-slot=\"{row}\">", "$2", "</cvTbColumnBase>"],
"description": "表格列基础"
},
"cvTbColumnExpand": {
"prefix": "<cvTbColumnExpand",
"body": ["<cvTbColumnExpand label=\"表头11\" >", "$2", "</cvTbColumnExpand>"],
"description": "表格列扩展"
},
"cvTbColumnOpt": {
"prefix": "<cvTbColumnOpt",
"body": ["<cvTbColumnOpt label=\"操作\" v-slot=\"{row}\" minWidth=\"250\">", "$2", "</cvTbColumnOpt>"],
"description": "表格列操作"
},
"cvTbEditRadio": {
"prefix": "<cvTbEditRadio",
"body": ["<cvTbEditRadio label=\"单选\" prop=\"xxx\" :dataLists=\"{0:'aa',1:'bb'}\" />", "$2"],
"description": "表格列编辑单选"
},
"cvTbEditSelect": {
"prefix": "<cvTbEditSelect",
"body": ["<cvTbEditSelect label=\"选择\" prop=\"xxx\" :dataLists=\"{0:'aa',1:'bb'}\" />", "$2"],
"description": "表格列编辑下拉"
},
"cvTbEditCheckbox": {
"prefix": "<cvTbEditCheckbox",
"body": ["<cvTbEditCheckbox label=\"选择\" prop=\"xxx\" :dataLists=\"{0:'aa',1:'bb'}\" />", "$2"],
"description": "表格列编辑多选"
},
"cvTbEditOpt": {
"prefix": "<cvTbEditOpt",
"body": ["<cvTbEditOpt label=\"操作\"/>", "$2"],
"description": "表格列编辑多选"
},
"cvTbEditText": {
"prefix": "<cvTbEditText",
"body": ["<cvTbEditText label=\"文本\" prop=\"xxx\" />", "$2"],
"description": "表格列编辑文本"
},
"cvTableEditor": {
"prefix": "<cvTableEditor",
"body": ["<cvTableEditor v-model=\"tableData\">", "$2", "</cvTableEditor>"],
"description": "表格编辑"
},
/**
* ======================== 其他
*/
"cv-editor-tinymce": {
"prefix": "<cv-editor-tinymce",
"body": ["<cv-form-item label=\"富文本\">", " <cv-editor-tinymce v-model=\"formData.content\" />", "</cv-form-item>", "$2"],
"description": "富文本"
},
"$cvDialogRender": {
"prefix": "cvDialogRender",
"body": [
"handleDiaAdd() {",
" this.\\$cvDialogRender(",
" dialogCompEdit,",
" { title: '添加xxxx' },",
" {},",
" {",
" handleCallback: () => {",
" this.tableRefresh++",
" // code$2",
" }",
" }",
" ).show();",
"},",
"handleDiaEdit(row) {",
" this.\\$cvDialogRender(",
" dialogCompEdit,",
" { title: '编辑xxxx' },",
" { id: row.xxxx_id },",
" {",
" handleCallback: () => {",
" // code$2",
" }",
" }",
" ).show();",
"},"
],
"description": "动态弹窗"
},
"$cvDrawerRender": {
"prefix": "cvDrawerRender",
"body": [
"handleDwAdd() {",
" this.\\$cvDrawerRender(",
" dialogCompEdit,",
" { title: '标题', size: '60%' },",
" {},",
" {",
" handleCallback: () => {",
" // code$2",
" }",
" }",
" ).show();",
"},"
],
"description": "动态弹窗"
}
}:::