配置cv-mobile-ui自动标签补齐 ¶
1、 打开vscode
2、
- mac 电脑 按下
shift + command + p
- window电脑 按下
shift + ctrl + p
3、 在输入框 搜索 代码片段
再选择 首选项:配置用户代码片段
4、 选择 新建全局代码片段
5、 输入代码片段储存文件名称 cv-ui
按回车确定。
6、 把以下内容复制到文件 (下面代码区域右上角,点击按钮可快捷复制)
jsonc
{
// 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-input-search": {
"prefix": "<cv-input-search",
"body": [
"<cv-form-item label=\"搜索内容\">",
" <cv-input-search v-model=\"formData.search\" :dataLists=\"settSearchData\" :apiParam=\"{}\" />",
"</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-form-item>",
"$2"
],
"description": "radio单选框"
},
"cv-radio-opt": {
"prefix": "<cv-radio-opt",
"body": [
" <cv-radio-opt v-model=\"formData.radio\" :dataLists=\"settRadioData1\" />",
"$2"
],
"description": "radio普通样式单选"
},
"cv-radio-btn": {
"prefix": "<cv-radio-btn",
"body": [
" <cv-radio-btn v-model=\"formData.radio\" :dataLists=\"settRadioData1\" />",
"$2"
],
"description": "radio按钮样式单选"
},
"cv-radio-sex": {
"prefix": "<cv-radio-sex",
"body": [
"<cv-form-item label=\"性别\">",
" <cv-radio-sex v-model=\"formData.sex\" :unsecrecy=\"unsecrecy\" />",
"</cv-form-item>",
"$2"
],
"description": "radio-sex性别单选框"
},
"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-tag": {
"prefix": "<cv-checkbox-tag",
"body": [
"<cv-form-item label=\"多选标签\">",
" <cv-checkbox-tag v-model=\"formData.checkboxTag\" :dataLists=\"checkLists\" :maxNumber=\"maxNumber\" />",
"</cv-form-item>",
"$2"
],
"description": "checkbox-tag标签多选框"
},
"cv-checkbox-btn": {
"prefix": "<cv-checkbox-btn",
"body": [
"<cv-form-item label=\"选择按钮\">",
" <cv-checkbox-btn v-model=\"formData.checkboxbase1\" :dataLists=\"settCheckData1\" />",
"</cv-form-item>",
"$2"
],
"description": "check按钮样式多选框"
},
/**
* ======================== switch滑块开关
*/
"cv-switch-base": {
"prefix": "<cv-switch-base",
"body": [
"<cv-form-item label=\"开关\" :tip=\"tip\">",
" <cv-switch-base v-model=\"formData.switch1\" />",
"</cv-form-item>",
"$2"
],
"description": "switch滑块开关"
},
"cv-switch-text": {
"prefix": "<cv-switch-text",
"body": [
"<cv-form-item label=\"开关\">",
" <cv-switch-text v-model=\"formData.xxx\" />",
"</cv-form-item>",
"$2"
],
"description": "开关附加两侧文本显示"
},
/**
* ======================== picker1 一级选择框
*/
"cvPicker1": {
"prefix": "<cv-picker1",
"body": [
"<cv-picker1 label=\"单列选择\" v-model=\"formData.picker\" :dataLists=\"pickerLists\" />",
"$2"
],
"description": "picker1一级选择框"
},
/**
* ======================== picker2二级联动选择框
*/
"cvPicker2": {
"prefix": "<cv-picker2",
"body": [
"<cv-picker2 label=\"两列选择\" v-model=\"formData.picker2\" :dataLists=\"pickerLists\" />",
"$2"
],
"description": "picker2二级联动选择框"
},
/**
* ======================== picker3三级联动选择框
*/
"cvPicker3": {
"prefix": "<cv-picker3",
"body": [
"<cv-picker3 label=\"三列选择\" v-model=\"formData.picker3\" :dataLists=\"pickerLists\" />",
"$2"
],
"description": "picker3三级联动选择框"
},
/**
* ======================== datetime 日期时间选择 | 五联动
*/
"cvDatetimeLinkage": {
"prefix": "<cv-datetime-linkage",
"body": [
"<cv-datetime-linkage label=\"时间\" v-model=\"formData.picker\" />",
"$2"
],
"description": "datetime日期时间选择|五联动"
},
/**
* ======================== form 表单
*/
"cvFormGroup": {
"prefix": "<cv-form-group",
"body": [
"<cv-form-group label=\"基本信息\" >",
"</cv-form-group>",
"$2"
],
"description": "form-group表单分组"
},
/**
* ======================== 验证码
*/
"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头像上传"
},
/**
* ======================== info不可编辑的输入框
*/
"cvInfo": {
"prefix": "<cv-info",
"body": [
"<cv-info label=\"姓名\" :info=\"info1\" :infoAlign=\"infoAlign\" />",
"$2"
],
"description": "info不可编辑的输入框"
},
/**
* ======================== treaty阅读协议
*/
"cvTreaty": {
"prefix": "<cv-treaty",
"body": [
"<cv-treaty v-model=\"formData.treaty\" />",
"$2"
],
"description": "treaty阅读协议"
},
/**
* ======================== editor-quill富文本编辑器
*/
"cvEditorQuill": {
"prefix": "<cv-editor-quill",
"body": [
"<cv-editor-quill label=\"详情\" v-model=\"formData.editor\" />",
"$2"
],
"description": "editor-quill富文本编辑器"
},
/**
* ======================== local地址输入框
*/
"cvGeoLocal": {
"prefix": "<cv-geo-local",
"body": [
"<cv-geo-local label=\"详细地址\" v-model=\"formData.address\" @location=\"onLocation\" />",
"$2"
],
"description": "local地址输入框"
},
/**
* ======================== region省市区联动选择框
*/
"cvGeoRegion": {
"prefix": "<cv-geo-region",
"body": [
"<cv-geo-region label=\"省市区\" v-model=\"formData.region\" />",
"$2"
],
"description": "region省市区联动选择框"
},
/**
* ======================== rate评分
*/
"cvRate": {
"prefix": "<cv-rate",
"body": [
"<cv-rate label=\"评分\" />",
"$2"
],
"description": "rate评分"
},
/**
* ======================== specs规格选择
*/
"cvSpecs": {
"prefix": "<cv-specs",
"body": [
"<cv-specs :specList=\"specList\" :skuList=\"skuList\" @change=\"change\" />",
"$2"
],
"description": "specs规格选择"
},
/**
* ======================== banner幻灯片
*/
"cvBanner": {
"prefix": "<cv-banner",
"body": [
"<cv-banner :dataLists=\"dataLists\" :paramConfig=\"{image:'image',text:'text'}\"/>",
"$2"
],
"description": "banner幻灯片"
},
/**
* ======================== 数列导航
*/
"cvNavCol": {
"prefix": "<cv-nav-col",
"body": [
"<cv-box col=\"4\">",
"<cv-nav-col img=\"/static/logo.png\" label=\"十云\"/>",
"</cv-box>",
"$2"
],
"description": "cv-nav-col数列导航"
},
/**
* ========================cv-search 搜索
*/
"cvSearch": {
"prefix": "<cv-search",
"body": [
"<cv-search v-model=\"formData.name\" @search=\"onSearch\"></cv-search>",
"$2"
],
"description": "search搜索"
},
/**
* ========================icon图标
*/
"cvIcons": {
"prefix": "<cv-icons",
"body": [
"<cv-icons type=\"people-my\" size=\"30\"/>",
"$2"
],
"description": "icon图标"
},
/**
* ========================底部弹窗
*/
"cvDialogButtom": {
"prefix": "<cv-dialog-buttom",
"body": [
"<cv-dialog-buttom :show=\"show\" @confirm=\"onConfirm\"></cv-dialog-buttom>",
"$2"
],
"description": "底部弹窗"
},
/**
* ========================全屏弹窗
*/
"cvDialogFull": {
"prefix": "<cv-dialog-full",
"body": [
"<cv-dialog-full :show=\"show\" @confirm=\"onConfirm\"></cv-dialog-full>",
"$2"
],
"description": "全屏弹窗"
},
/**
* ========================弹框加载中
*/
"cvDialogLoading": {
"prefix": "<cv-dialog-loading",
"body": [
"<cv-dialog-loading :show=\"show\" :content=\"content\" />",
"$2"
],
"description": "弹框加载中"
}
}