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

669 lines
19 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

{
"#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
}
}