lycx-hx/.vscode/vue-html.code-snippets

669 lines
19 KiB
Plaintext
Raw Normal View History

2024-10-21 09:05:15 +08:00
{
"#ifdef": {
"body": [
"<!-- #ifdef ${1|APP-PLUS,MP,MP-ALIPAY,MP-BAIDU,MP-WEIXIN,MP-QQ,H5|} -->",
"$0",
"<!-- #endif -->"
],
"prefix": "ifdef",
"project": "uni-app",
"scope": "vue-html"
},
"#ifndef": {
"body": [
"<!-- #ifndef ${1|APP-PLUS,MP,MP-ALIPAY,MP-BAIDU,MP-WEIXIN,MP-QQ,H5|} -->",
"$0",
"<!-- #endif -->"
],
"prefix": "ifndef",
"project": "uni-app",
"scope": "vue-html"
},
"Vue Base": {
"body": [
"<template>",
"\t<${1:div}>",
"",
"\t</${1:div}>",
"</template>",
"",
"<script>",
"\texport default {",
"\t\t${0}",
"\t}",
"</script>",
"",
"<style scoped>",
"",
"</style>"
],
"description": "Base for Vue File",
"prefix": "vbase",
"scope": "vue-html"
},
"Vue Class Binding": {
"body": ["<${1|div|} :class=\"{ ${2:className}: ${3:data} }\"><,${1:div}>"],
"description": "vue class binding",
"prefix": "vclass",
"scope": "vue-html"
},
"Vue Class Binding Object": {
"body": [
"<${1|div|} :class=\"[${2:classNameA}, ${3:classNameB}]\"><,${1:div}>"
],
"description": "vue class binding",
"prefix": "vclass-obj",
"scope": "vue-html"
},
"Vue Component with Props Binding": {
"body": ["<${1|component|} :${1:propName}=\"${0}\"><,${1:component}>"],
"description": "component element with props",
"prefix": "vel-props",
"scope": "vue-html"
},
"Vue Image Source Binding": {
"body": [
"<img :src=\"'/path/to/images/' + ${1:fileName}\" alt=\"${2:altText}\"/>"
],
"description": "image source binding",
"prefix": "vsrc",
"scope": "vue-html"
},
"Vue Multiple Conditional Class Bindings": {
"body": [
"<${1|div|} :class=\"[${2:classNameA}, {${3:classNameB} : ${4:condition}}]\"><,${1:div}>"
],
"description": "vue multiple conditional class bindings",
"prefix": "vclass-obj-mult",
"scope": "vue-html"
},
"Vue Nuxt Routing Link": {
"body": ["<nuxt-link to=\"/${1:page}\">${1:page}</nuxt-link>"],
"description": "nuxt routing link",
"prefix": "vnuxtl",
"scope": "vue-html"
},
"Vue Style Binding": {
"body": [
"<${1|div|} :style=\"{ fontSize: ${2:data} + 'px' }\"><,${1:div}>"
],
"description": "vue inline style binding",
"prefix": "vstyle",
"scope": "vue-html"
},
"Vue Style Binding Object": {
"body": [
"<${1|div|} :style=\"[${2:styleObjectA}, ${3:styleObjectB]}\"><,${1:div}>"
],
"description": "vue inline style binding, objects",
"prefix": "vstyle-obj",
"scope": "vue-html"
},
"Vue Transition Component with JavaScript Hooks": {
"body": [
"<transition",
"\tmode=\"out-in\"",
"\t@before-enter=\"beforeEnter\"",
"\t@enter=\"enter\"",
"",
"\t@before-leave=\"beforeLeave\"",
"\t@leave=\"leave\"",
"\t:css=\"false\">",
"",
"</transition>"
],
"description": "transition component js hooks",
"prefix": "vanim",
"scope": "vue-html"
},
"Vue v-for": {
"body": [
"<${1:div} v-for=\"${2:item} in ${2:item}s\" :key=\"${2:item}.id\">",
"\t{{ ${2:item} }}",
"</${1:div}>"
],
"description": "vfor statement",
"prefix": "vfor",
"scope": "vue-html"
},
"Vue v-model Directive": {
"body": ["<input v-model=\"${1:data}\" type=\"text\" />"],
"description": "v-model directive",
"prefix": "vmodel",
"scope": "vue-html"
},
"Vue v-model Number Directive": {
"body": [
"<input v-model.number=\"${1:numData}\" type=\"number\" step=\"1\" />"
],
"description": "v-model directive number input",
"prefix": "vmodel-num",
"scope": "vue-html"
},
"Vue v-on Shortcut Directive": {
"body": ["@click=\"${1:handler}(${2:arg}, $event)\""],
"description": "v-on click handler with arguments",
"prefix": "von",
"scope": "vue-html"
},
"uAccordion": {
"body": [
"<view class=\"uni-list\">",
"\t<view class=\"uni-list-cell uni-collapse\" v-for=\"(item,index) in list$1\" :key=\"index\">",
"\t\t<view class=\"uni-list-cell-navigate uni-navigate-bottom\" :class=\"item.show ? 'uni-active' : ''\" @click=\"trigerCollapse$0(index)\">",
"\t\t\t折叠面板{{index}}",
"\t\t</view>",
"\t\t<view class=\"uni-collapse-content\" :class=\"item.show ? 'uni-active' : ''\">",
"\t\t\t<view class=\"page-pd\">",
"\t\t\t\t<view class=\"uni-h1\">hello uni-app</view>",
"\t\t\t\t<view class=\"uni-h2\">hello uni-app</view>",
"\t\t\t\t<view class=\"uni-h3\">hello uni-app</view>",
"\t\t\t</view>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "uaccordion",
"project": "uni-app",
"scope": "vue-html"
},
"uAudio": {
"body": [
"<audio :src=\"$1\" :poster=\"$0\" :name=\"$2\" :author=\"$3\" :action=\"$4\" controls></audio>"
],
"prefix": "uaudio",
"project": "uni-app",
"scope": "vue-html"
},
"uBadge": {
"body": ["<uni-badge text=\"$1\" type=\"$2\"></uni-badge>"],
"prefix": "ubadge",
"project": "uni-app",
"scope": "vue-html"
},
"uButton": {
"body": ["<button type=\"primary\">$1</button>"],
"prefix": "ubutton",
"project": "uni-app",
"scope": "vue-html"
},
"uCalendar": {
"body": [
"<uni-calendar lunar=\"\" @change=\"$1\" @to-click=\"$2\"></uni-calendar>"
],
"prefix": "ucalendar",
"project": "uni-app",
"scope": "vue-html"
},
"uCard": {
"body": [
"<uni-card title=\"标题文字\" thumbnail=\"$1\" extra=\"额外信息$2\" note=\"Tips$3\">",
"\t内容主体可自定义内容及样式$4",
"</uni-card>"
],
"prefix": "ucard",
"project": "uni-app",
"scope": "vue-html"
},
"uCheckbox": {
"body": [
"<label class=\"checkbox\">",
"\t<checkbox value=\"$1\" checked= />$0",
"</label>"
],
"prefix": "ucheckbox",
"project": "uni-app",
"scope": "vue-html"
},
"uCollapse": {
"body": [
"<uni-collapse @change=\"$1\">",
"\t<uni-collapse-item title=\"$2\">",
"\t\t内容$3",
"\t</uni-collapse-item>",
"</uni-collapse>"
],
"prefix": "uCollapse",
"project": "uni-app",
"scope": "vue-html"
},
"uCountDown": {
"body": [
"<uni-countdown font-color=\"$1\" bgr-color=\"$2\" timer=\"$3\"></uni-countdown>"
],
"prefix": "ucountdown",
"project": "uni-app",
"scope": "vue-html"
},
"uDrawer": {
"body": [
"<uni-drawer :visible=\"$1\">",
"\t<view style=\"padding:30upx;\">",
"\t\t$2",
"\t</view>",
"</uni-drawer>"
],
"prefix": "uDrawer",
"project": "uni-app",
"scope": "vue-html"
},
"uEditor": {
"body": ["<editor placeholder=\"$1\"></editor>"],
"prefix": "uEditor",
"project": "uni-app",
"scope": "vue-html"
},
"uForm": {
"body": [
"<form @submit=\"formSubmit\" @reset=\"formReset\">",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">switch$1</view>",
"\t\t<switch name=\"switch\" />",
"\t</view>",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">slider</view>",
"\t\t<slider name=\"slider\" show-value></slider>",
"\t</view>",
"\t<view class=\"section\">",
"\t\t<view class=\"section__title\">input</view>",
"\t\t<input name=\"input\" placeholder=\"please input here\" />",
"\t</view>",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">radio</view>",
"\t\t<radio-group name=\"radio-group\">",
"\t\t<label>",
"\t\t\t<radio value=\"radio1\" />radio1</label>",
"\t\t<label>",
"\t\t\t<radio value=\"radio2\" />radio2</label>",
"\t\t</radio-group>",
"\t</view>",
"\t<view class=\"section section_gap\">",
"\t\t<view class=\"section__title\">checkbox</view>",
"\t\t<checkbox-group name=\"checkbox\">",
"\t\t\t<label>",
"\t\t\t\t<checkbox value=\"checkbox1\" />checkbox1</label>",
"\t\t\t<label>",
"\t\t\t\t<checkbox value=\"checkbox2\" />checkbox2</label>",
"\t\t</checkbox-group>",
"\t</view>",
"\t<view class=\"btn-area\">",
"\t\t<button formType=\"submit\">Submit</button>",
"\t\t<button formType=\"reset\">Reset</button>",
"\t</view>",
"</form>"
],
"prefix": "uform",
"project": "uni-app",
"scope": "vue-html"
},
"uGrid": {
"body": ["<uni-grid :data=\"$1\"></uni-grid>"],
"prefix": "ugrid",
"project": "uni-app",
"scope": "vue-html"
},
"uIcon": {
"body": ["<uni-icon type=\"$1\"></uni-icon>"],
"prefix": "uicon",
"project": "uni-app",
"scope": "vue-html"
},
"uImage": {
"body": ["<image src=\"$1\" mode=\"$2\">$0</image>"],
"prefix": "uimage",
"project": "uni-app",
"scope": "vue-html"
},
"uInput": {
"body": ["<input type=\"text$1\" value=\"$0\" />"],
"prefix": "uinput",
"project": "uni-app",
"scope": "vue-html"
},
"uList": {
"body": [
"<uni-list>",
"\t<uni-list-item title=\"$1\" note=\"$2\"></uni-list-item>",
"\t<uni-list-item title=\"$3\" note=\"$4\"></uni-list-item>",
"</uni-list>"
],
"prefix": "ulist",
"project": "uni-app",
"scope": "vue-html"
},
"uListMedia": {
"body": [
"<view class=\"uni-list\">",
"\t<view class=\"uni-list-cell\" hover-class=\"uni-list-cell-hover\" v-for=\"(item,index) in list$1\" :key=\"index\">",
"\t\t<view class=\"uni-media-list\">",
"\t\t\t<image class=\"uni-media-list-logo\" :src=\"item.img$2\"></image>",
"\t\t\t<view class=\"uni-media-list-body\">",
"\t\t\t\t<view class=\"uni-media-list-text-top\">{{item.title$3}}</view>",
"\t\t\t\t<view class=\"uni-media-list-text-bottom uni-ellipsis\">{{item.content$4}}</view>",
"\t\t\t</view>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "ulistmedia",
"project": "uni-app",
"scope": "vue-html"
},
"uLoadMore": {
"body": [
"<uni-load-more :loadingType=\"$1\" :contentText=\"$2\"></uni-load-more>"
],
"prefix": "uloadmore",
"project": "uni-app",
"scope": "vue-html"
},
"uMap": {
"body": ["<map :latitude=\"$1\" :longitude=\"$0\"></map>"],
"prefix": "umap",
"project": "uni-app",
"scope": "vue-html"
},
"uNavBar": {
"body": [
"<uni-nav-bar left-icon=\"back\" left-text=\"返回\" right-text=\"菜单\" title=\"标题$1\"></uni-nav-bar>"
],
"prefix": "unavbar",
"project": "uni-app",
"scope": "vue-html"
},
"uNavigator": {
"body": ["<navigator url=\"$1\">$0</navigator>"],
"prefix": "unavigator",
"project": "uni-app",
"scope": "vue-html"
},
"uNoticeBar": {
"body": ["<uni-notice-bar single=\"$1\" text=\"$2\"></uni-notice-bar>"],
"prefix": "uNoticeBar",
"project": "uni-app",
"scope": "vue-html"
},
"uNumberBox": {
"body": ["<uni-number-box @change=\"$1\"></uni-number-box>"],
"prefix": "unumberbox",
"project": "uni-app",
"scope": "vue-html"
},
"uPagination": {
"body": [
"<uni-pagination title=\"$1\" show-icon=\"$2\" total=\"$3\" current=\"$4\"></uni-pagination>"
],
"prefix": "uPagination",
"project": "uni-app",
"scope": "vue-html"
},
"uPicker": {
"body": [
"<picker mode=\"$1\" :range=\"$2\" @change=\"$3\">",
"\t<view>picker组件</view>",
"</picker>"
],
"prefix": "upicker",
"project": "uni-app",
"scope": "vue-html"
},
"uPickerView": {
"body": [
"<picker-view indicator-style=\"height: 50px;\" :value=\"value$1\" @change=\"bindChange\">",
"\t<picker-view-column>",
"\t\t$0",
"\t</picker-view-column>",
"\t<picker-view-column>",
"\t\t$2",
"\t</picker-view-column>",
"\t<picker-view-column>",
"\t\t",
"\t</picker-view-column>",
"</picker-view>"
],
"prefix": "upickerview",
"project": "uni-app",
"scope": "vue-html"
},
"uPopup": {
"body": [
"<uni-popup msg=\"$1\" :show=\"true$2\" type=\"middle$3\"></uni-popup>"
],
"prefix": "upopup",
"project": "uni-app",
"scope": "vue-html"
},
"uProductList": {
"body": [
"<view class=\"uni-product-list\">",
"\t<view class=\"uni-product\" v-for=\"(product,index) in productList$1\" :key=\"index\">",
"\t\t<view class=\"image-view\">",
"\t\t\t<image v-if=\"renderImage\" class=\"uni-product-image\" :src=\"product.image\"></image>",
"\t\t</view>",
"\t\t<view class=\"uni-product-title\">{{product.title}}</view>",
"\t\t<view class=\"uni-product-price\">",
"\t\t\t<text class=\"uni-product-price-favour\">¥{{product.originalPrice}}</text>",
"\t\t\t<text class=\"uni-product-price-original\">¥{{product.favourPrice}}</text>",
"\t\t\t<text class=\"uni-product-tip\">{{product.tip}}</text>",
"\t\t</view>",
"\t</view>",
"</view>"
],
"prefix": "uproductlist",
"project": "uni-app",
"scope": "vue-html"
},
"uProgress": {
"body": [" <progress percent=\"$1\" show-info$0 />"],
"prefix": "uprogress",
"project": "uni-app",
"scope": "vue-html"
},
"uRadio": {
"body": [
"<label class=\"radio\">",
"\t<radio value=\"$1\" checked= />$0",
"</label>"
],
"prefix": "uradio",
"project": "uni-app",
"scope": "vue-html"
},
"uRate": {
"body": ["<uni-rate value=\"$1\"></uni-rate>"],
"prefix": "uRate",
"project": "uni-app",
"scope": "vue-html"
},
"uRichText": {
"body": ["<rich-text :nodes=\"$1\"></rich-text>"],
"prefix": "urichtext",
"project": "uni-app",
"scope": "vue-html"
},
"uScrollView": {
"body": [
"<scroll-view scroll-y$1>",
"\t<view>$0</view>",
"\t<view></view>",
"\t<view></view>",
"\t<view></view>",
"</scroll-view>"
],
"prefix": "uscrollview",
"project": "uni-app",
"scope": "vue-html"
},
"uSegmentedControl": {
"body": [
"<uni-segmented-control :current=\"current$1\" :values=\"$0\" @clickItem=\"$2\"></uni-segmented-control>",
"<view class=\"content\">",
"\t<view v-show=\"current === 0\">",
"\t\t选项卡1的内容",
"\t</view>",
"\t<view v-show=\"current === 1\">",
"\t\t选项卡2的内容",
"\t</view>",
"\t<view v-show=\"current === 2\">",
"\t\t选项卡3的内容",
"\t</view>",
"</view>"
],
"prefix": "usegmentedcontrol",
"project": "uni-app",
"scope": "vue-html"
},
"uSlider": {
"body": ["<slider @change=\"$1\" show-value$0/>"],
"prefix": "uslider",
"project": "uni-app",
"scope": "vue-html"
},
"uSteps": {
"body": ["<uni-steps :options=\"$1\" :active=\"0$2\"></uni-steps>"],
"prefix": "usteps",
"project": "uni-app",
"scope": "vue-html"
},
"uSwipeAction": {
"body": [
"<uni-swipe-action :options=\"$1\">",
"\t$2",
"</uni-swipe-action>"
],
"prefix": "uSwipeAction",
"project": "uni-app",
"scope": "vue-html"
},
"uSwiper": {
"body": [
"<swiper :indicator-dots=\"true\" :autoplay=\"true\" :interval=\"3000\" :duration=\"1000\">",
"\t<swiper-item>",
"\t\t<view class=\"swiper-item\">$1</view>",
"\t</swiper-item>",
"\t<swiper-item>",
"\t\t<view class=\"swiper-item\">$2</view>",
"\t</swiper-item>",
"\t<swiper-item>",
"\t\t<view class=\"swiper-item\">$0</view>",
"\t</swiper-item>",
"</swiper>"
],
"prefix": "uswiper",
"project": "uni-app",
"scope": "vue-html"
},
"uSwipermsg": {
"body": [
"<view class=\"uni-swiper-msg\">",
"\t<view class=\"uni-swiper-msg-icon\">",
"\t\t<image src=\"$1\" mode=\"widthFix\"></image>",
"\t</view>",
"\t<swiper vertical=\"true\" autoplay=\"true\" circular=\"true\" interval=\"3000\">",
"\t\t<swiper-item>",
"\t\t\t<navigator>消息1</navigator>",
"\t\t</swiper-item>",
"\t\t<swiper-item>",
"\t\t\t<navigator>消息2</navigator>",
"\t\t</swiper-item>",
"\t\t<swiper-item>",
"\t\t\t<navigator>消息3</navigator>",
"\t\t</swiper-item>",
"\t</swiper>",
"</view>"
],
"prefix": "uswipermsg",
"project": "uni-app",
"scope": "vue-html"
},
"uSwitch": {
"body": ["<switch checked @change=\"$1\" />"],
"prefix": "uswitch",
"project": "uni-app",
"scope": "vue-html"
},
"uTag": {
"body": ["<uni-tag text=\"$1\" type=\"$2\"></uni-tag>"],
"prefix": "utag",
"project": "uni-app",
"scope": "vue-html"
},
"uTemplate": {
"body": ["<template>", "\t<view>$0</view>", "</template>"],
"prefix": "utemplate",
"project": "uni-app",
"scope": "vue-html"
},
"uText": {
"body": ["<text>$0</text>"],
"prefix": "utext",
"project": "uni-app",
"scope": "vue-html"
},
"uTextarea": {
"body": ["<textarea value=\"$1\" placeholder=\"$0\" />"],
"prefix": "utextarea",
"project": "uni-app",
"scope": "vue-html"
},
"uTimeline": {
"body": [
"<view class=\"uni-timeline\">",
"\t<view class=\"uni-timeline-item uni-timeline-first-item\">",
"\t\t<view class=\"uni-timeline-item-keynode\">日期1$1</view>",
"\t\t<view class=\"uni-timeline-item-divider\"></view>",
"\t\t<view class=\"uni-timeline-item-content\">事件1</view>",
"\t</view>",
"\t<view class=\"uni-timeline-item\">",
"\t\t<view class=\"uni-timeline-item-keynode\">日期2</view>",
"\t\t<view class=\"uni-timeline-item-divider\"></view>",
"\t\t<view class=\"uni-timeline-item-content\">事件2</view>",
"\t</view>",
"\t<view class=\"uni-timeline-item uni-timeline-last-item\">",
"\t\t<view class=\"uni-timeline-item-keynode\">日期3</view>",
"\t\t<view class=\"uni-timeline-item-divider\"></view>",
"\t\t<view class=\"uni-timeline-item-content\">事件3</view>",
"\t</view>",
"</view>"
],
"prefix": "utimeline",
"project": "uni-app",
"scope": "vue-html"
},
"uVideo": {
"body": ["<video src=\"$1\" controls></video>"],
"prefix": "uvideo",
"project": "uni-app",
"scope": "vue-html"
},
"uView": {
"body": ["<view class=\"$1\">$0</view>"],
"prefix": "uview",
"project": "uni-app",
"scope": "vue-html"
},
"uWebView": {
"body": ["<web-view src=\"$1\"></web-view>"],
"prefix": "uwebview",
"project": "uni-app",
"scope": "vue-html"
},
"view for": {
"body": [
"<view v-for=\"(item,index) in ${1:dataList}\" :key=\"index\">",
"\t$0",
"</view>"
],
"description": "view带for循环",
"prefix": "viewfor",
"project": "uni-app",
"scope": "vue-html"
},
"view_class": {
"body": ["<view class=\"$1\">", "\t$0", "</view>"],
"prefix": "viewclass",
"scope": "vue-html",
"triggerAssist": true
}
}