{
// 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"
// }
"WpAntdVueImportSnippet": {
"prefix": "w-antd-import",
"body": [
"import { ComponentName } from 'ant-design-vue'",
],
"description": "AntdVue组件导入代码片段"
},
"WpAntdVuePageHeaderWrapperSnippet": {
"prefix": "w-phw",
"body": [
"<page-header-wrapper",
" ><!-- :title=\"false\" -->",
" <template #content>",
" <div class=\"page-header-content\">",
" <div class=\"avatar\">",
" <a-avatar size=\"large\" :src=\"currentUser.avatar\" />",
" </div>",
" <div class=\"content\">",
" <div class=\"content-title\">",
" {{ timeFix }}，{{ user.name }}<span class=\"welcome-text\">，{{ welcome }}</span>",
" </div>",
" <div>Hellow Antd Pro of Vue</div>",
" </div>",
" </div>",
" </template>",
" <template #extraContent>",
" <div class=\"extra-content\">",
" <div class=\"stat-item\">",
" <a-statistic title=\"项目数\" :value=\"56\" />",
" </div>",
" <div class=\"stat-item\">",
" <a-statistic title=\"团队内排名\" :value=\"8\" suffix=\"/ 24\" />",
" </div>",
" <div class=\"stat-item\">",
" <a-statistic title=\"项目访问\" :value=\"2223\" />",
" </div>",
" </div>",
" </template>",
" <div class=\"test-grid\" id=\"test-grid\">",
" <a-row",
" type=\"flex\"",
" justify=\"space-between\"",
" align=\"middle\"",
" :gutter=\"[",
" { xs: 8, sm: 8, md: 8, lg: 8 },",
" { xs: 8, sm: 8, md: 8, lg: 8 }",
" ]\"",
" >",
" <!-- gutter推荐使用 (16+8n)px,gutter数组形式 [水平间距, 垂直间距] -->",
" <a-col :span=\"4\" :offset=\"0\" :order=\"1\"><div style=\"background:#000; color:#FFF\">content</div></a-col>",
" <a-col :span=\"4\" :offset=\"0\" :order=\"2\">content</a-col>",
" <a-col :flex=\"1\" :offset=\"0\" :order=\"4\"><div style=\"background:#000; color:#FFF\">content</div></a-col>",
" <a-col :flex=\"2\" :offset=\"0\" :order=\"5\"><div style=\"background:red; color:#FFF\">content</div></a-col>",
" <a-col flex=\"100px\" :offset=\"0\" :order=\"6\"><div style=\"background:blue; color:#FFF\">content</div></a-col>",
" <a-col flex=\"auto\" :offset=\"0\" :order=\"7\"><div style=\"background:yellow; color:#FFF\">content</div></a-col>",
" <a-col",
" :xs=\"{ span: 1, offset: 0, order: 8 }\"",
" :sm=\"{ span: 1, offset: 0, order: 8 }\"",
" :md=\"{ span: 1, offset: 0, order: 8 }\"",
" :lg=\"{ span: 1, offset: 0, order: 8 }\"",
" :xl=\"{ span: 1, offset: 0, order: 8 }\"",
" :xxl=\"{ span: 1, offset: 0, order: 8 }\"",
" >cintent</a-col",
" >",
" </a-row>",
" </div>",
" </page-header-wrapper>",
],
"description": "AntdProLayoutPageHeaderWrapper"
},
"WpAntdVueGridSnippet": {
"prefix": "w-grid",
"body": [
"<a-row",
" type=\"flex\"",
" justify=\"space-between\"",
" align=\"middle\"",
" :gutter=\"[",
" { xs: 8, sm: 8, md: 8, lg: 8 },",
" { xs: 8, sm: 8, md: 8, lg: 8 }",
" ]\"",
" ><!-- gutter推荐使用 (16+8n)px,gutter数组形式 [水平间距, 垂直间距] -->",
" <a-col :span=\"4\" :offset=\"0\" :order=\"1\"><div style=\"background:#000; color:#FFF\">content</div></a-col>",
" <a-col :span=\"4\" :offset=\"0\" :order=\"2\">content</a-col>",
" <a-col :flex=\"1\" :offset=\"0\" :order=\"4\"><div style=\"background:#000; color:#FFF\">content</div></a-col>",
" <a-col :flex=\"2\" :offset=\"0\" :order=\"5\"><div style=\"background:red; color:#FFF\">content</div></a-col>",
" <a-col flex=\"100px\" :offset=\"0\" :order=\"6\"><div style=\"background:blue; color:#FFF\">content</div></a-col>",
" <a-col flex=\"auto\" :offset=\"0\" :order=\"7\"><div style=\"background:yellow; color:#FFF\">content</div></a-col>",
" <a-col",
" :xs=\"{ span: 1, offset: 0, order: 8 }\"",
" :sm=\"{ span: 1, offset: 0, order: 8 }\"",
" :md=\"{ span: 1, offset: 0, order: 8 }\"",
" :lg=\"{ span: 1, offset: 0, order: 8 }\"",
" :xl=\"{ span: 1, offset: 0, order: 8 }\"",
" :xxl=\"{ span: 1, offset: 0, order: 8 }\"",
" >cintent</a-col",
" >",
" </a-row>",
],
"description": "AntdVue栅格代码片段"
},
"WpAntdVueButtonSnippet": {
"prefix": "w-button",
"body": [
"<a-button",
" type=\"primary\"",
" shape=\"round\"",
" icon=\"search\"",
" :loading=\"loading\"",
" size=\"default\"",
" block",
" @click=\"handleClickEvent\"",
" >查询</a-button",
" >",
],
"description": "AntdVue按钮代码片段"
},
"WpAntdVueSpaceSnippet": {
"prefix": "w-space",
"body": [
" <a-space direction=\"horizontal\" align=\"center\" size=\"middle\"><!-- :size=\"200\" --></a-space>",
],
"description": "AntdVue间距代码片段"
},
"WpAntdVueIconSnippet": {
"prefix": "w-icon",
"body": [
" <a-icon",
" type=\"setting\"",
" theme=\"twoTone\"",
" two-tone-color=\"#52c41a\"",
" spin",
" :rotate=\"180\"",
" />",
],
"description": "AntdVue图标代码片段"
},
"WpAntdVueDropdownButtonSnippet": {
"prefix": "w-dropdown-button",
"body": [
"<a-dropdown-button",
" @click=\"handleButtonClick\"",
" >TestDropdown",
" <template",
" #overlay",
" ><a-menu>",
" <a-menu-item",
" @click=\"handleMenuClick\"",
" v-for=\"(item, index) in data\"",
" :key=\"index\"",
" :disabled=\"item.disabled\"",
" ><a-icon :type=\"item.type\" /> {{ item.content }}</a-menu-item",
" >",
" </a-menu></template",
" >",
" <template #icon> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" /></template>",
" </a-dropdown-button>",
],
"description": "AntdVue下拉菜单代码片段"
},
"WpAntdVuePaginationSnippet": {
"prefix": "w-pagination",
"body": [
"<pagination",
" show-size-changer",
" showQuickJumper",
" v-model=\"currentPage\"",
" :page-size-options=\"pageSizeOptions\"",
" :default-current=\"1\"",
" :total=\"total\"",
" @change=\"onChange\"",
" @showSizeChange=\"onshowSizeChange\"",
" >",
" <template slot=\"buildOptionText\" slot-scope=\"props\">",
" <span v-if=\"props.value !== '500'\">{{ props.value }}条/页</span>",
" <span v-if=\"props.value === '500'\">全部</span>",
" </template>",
" </pagination>",
],
"description": "AntdVue分页代码片段"
},
"WpAntdVueStepsSnippet": {
"prefix": "w-steps",
"body": [
"<a-steps",
" :current=\"currentStep\"",
" size=\"small\"",
" direction=\"horizontal\"",
" :status=\"status\"",
" ><!-- status:wait|process|finish|error -->",
" <a-step v-for=\"(item, index) in stepsData\" :key=\"index\">",
" <template #icon> <a-icon :type=\"item.type\" /></template>",
" <template #title> {{ item.title }} </template>",
" <template #description>{{ item.description }}</template>",
" </a-step>",
" </a-steps>",
" <!-- status: 'error', currentStep: 2, stepsData: [ { type: 'user', title: '标题1', description: '这里是步骤描述1',",
" content: '这是步骤1的内容' }, { type: 'solution', title: '标题2', description: '这里是步骤描述2', content:",
" '这是步骤2的内容' }, { type: 'loading', title: '标题3', description: '这里是步骤描述3', content:",
" '这是步骤3的内容' } ] -->",
],
"description": "AntdVue步骤条代码片段"
},
"WpAntdVueCascaderSnippet": {
"prefix": "w-cascader",
"body": [
"<cascader",
" size:large",
" :options=\"options\"",
" :default-value=\"defaultValues\"",
" :show-search=\"{ filter }\"",
" placeholder=\"请选择位置\"",
" change-on-select",
" @change=\"onChange\"",
" ><template #suffixIcon> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" spin /></template>",
" </cascader>",
" <!-- import { Cascader } from 'ant-design-vue'",
" defaultValues: ['shandong', 'yantai'], options: [ { value: 'shandong',",
" label: '山东省', children: [ { value: 'yantai', label: '烟台市', children: [ { value: 'kaifaqu', label: '开发区'",
" }, { value: 'fushanqu', label: '福山区', disabled: true } ] }, { value: 'qingdao', label: '青岛市', children: [",
" { value: 'shinanqu', label: '市南区' }, { value: 'shibeiqu', label: '市北区' } ] } ] }, { value: 'beijing',",
" label: '北京市', children: [ { value: 'dongchengqu', label: '东城区' }, { value: 'xichengqu', label: '西城区' }",
" ] } ]",
" onChange (val, selectedOptions) { console.log(...val, selectedOptions) },",
" filter (inputValue, path) {",
" return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1) } -->",
],
"description": "AntdVue级联选择器代码片段"
},
"WpAntdVueCheckboxSnippet": {
"prefix": "w-checkbox",
"body": [
"<a-checkbox",
" :default-checked=\"defaultChecked\"",
" :disabled=\"disabled\"",
" @change=\"onChange\"",
" >选择框测试</a-checkbox",
" >",
" <!-- defaultChecked: true,",
" disabled: true -->",
],
"description": "AntdVue多选框代码片段"
},
"WpAntdVueCheckboxGroupSnippet": {
"prefix": "w-checkboxgroup",
"body": [
"<a-checkbox-group",
" v-model=\"groupValue\"",
" :options=\"options\"",
" :default-value=\"defaultGroupValue\"",
" @change=\"onGroupChange\"",
" ></a-checkbox-group>",
" <!-- options: [ ",
" { label: '烟台', value: 'yantai' },",
" { label: '青岛', value: 'qingdao' },",
" { label: '临沂', value: 'linyi' } ],",
" groupValue: ['yantai'], ",
" defaultGroupValue: ['yantai'] -->",
],
"description": "AntdVue多选框组代码片段"
},
"WpAntdVueDateTimePickerSnippet": {
"prefix": "w-date-time-picker",
"body": [
"<a-date-picker",
" placeholder=\"请选择日期\"",
" :show-time=\"{ defaultValue: moment('08:00:00', dateTimeFormat) }\"",
" :format=\"dateTimeFormat\"",
" :default-value=\"moment(new Date().toLocaleDateString(), dateTimeFormat)\"",
" :disabled-date=\"disabledDate\"",
" :disabled-time=\"disabledTime\"",
" @change=\"onDateTimeChange\"",
" ><template #suffixIcon> <a-icon type=\"setting\" /></template",
" ></a-date-picker>",
" <!-- import moment from 'moment'",
" timeFormat: 'HH:mm:ss',",
" dateFormat: 'YYYY/MM/DD',",
" dateTimeFormat: 'YYYY/MM/DD HH:mm:ss',",
" monthFormat: 'YYYY/MM'",
" methods: {",
" moment,",
" range (start, end) {",
" const result = []",
" for (let i = start; i < end; i++) {",
" result.push(i)",
" }",
" return result",
" },",
" disabledDate (current) {",
" return current && current < moment().endOf('day')",
" },",
" disabledTime () {",
" return {",
" disabledHours: () => this.range(0, 24).splice(4, 18),",
" disabledMinutes: () => this.range(30, 60),",
" disabledSeconds: () => [55, 56]",
" }",
" },",
" onDateTimeChange (date, datestring) {",
" console.log(new Date().toLocaleDateString())",
" console.log('date', date, 'datestring', datestring)",
" }",
" }, -->",
],
"description": "AntdVue时间选择器代码片段"
},
"WpAntdVueRangePickerSnippet": {
"prefix": "w-range-picker",
"body": [
"<a-range-picker",
" :format=\"dateFormat\"",
" :disabled-date=\"disabledDate\"",
" :placeholder=\"['请选择开始时间', '请选择结束时间']\"",
" separator=\"到\"",
" @change=\"onRangeChange\"",
" @ok=\"onRangeOK\"",
" ><template #suffixIcon> <a-icon type=\"setting\" /></template",
" ></a-range-picker>",
" <!-- dateFormat: 'YYYY/MM/DD',",
" methods: {",
" moment,",
" range (start, end) {",
" const result = []",
" for (let i = start; i < end; i++) {",
" result.push(i)",
" }",
" return result",
" },",
" disabledDate (current) {",
" return current && current < moment().endOf('day')",
" }",
" }, -->",
],
"description": "AntdVue时间段选择器代码片段"
},
"WpAntdVueInputSnippet": {
"prefix": "w-input",
"body": [
"<a-input v-model=\"inputValue\" placeholder=\"请输入文本\" allow-clear @pressEnter=\"onPressEnter\">",
" <template #addonBefore>前置标签</template>",
" <template #addonAfter>后置标签 <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" /></template>",
" <template #prefix> <a-icon type=\"setting\" /></template",
" ><template #suffix>",
" <a-tooltip title=\"输入框测试\"> <a-icon type=\"setting\" /> </a-tooltip>",
" </template>",
" </a-input>",
],
"description": "AntdVue输入框代码片段"
},
"WpAntdVueInputSearchSnippet": {
"prefix": "w-input-search",
"body": [
"<a-input-search v-model=\"inputValue\" placeholder=\"请输入文本\" :loading=\"loading\" allow-clear @search=\"onSearch\">",
" <template #addonBefore>前置标签</template>",
" <template #prefix> <a-icon type=\"setting\" /></template",
" ><template #suffix>",
" <a-tooltip title=\"输入框测试\"> <a-icon type=\"setting\" /> </a-tooltip>",
" </template>",
" <template #enterButton>",
" <a-button type=\"primary\" icon=\"search\" size=\"default\" block>查询</a-button>",
" </template>",
" </a-input-search>",
],
"description": "AntdVue查询输入框代码片段"
},
"WpAntdVueInputGroupSnippet": {
"prefix": "w-input-group",
"body": [
"<a-input-group compact>",
" <a-input style=\"width: 40%\" placeholder=\"请输入文本\">",
" <template #prefix> <a-icon type=\"setting\" /></template",
" ><template #suffix>",
" <a-tooltip title=\"输入框测试\"> <a-icon type=\"setting\" /> </a-tooltip>",
" </template>",
" </a-input>",
" <a-input-search style=\"width: 50%\" placeholder=\"请输入文本\" :loading=\"loading\" @search=\"onSearch\">",
" <template #enterButton>",
" <a-button type=\"primary\" icon=\"search\" size=\"default\" block>查询</a-button>",
" </template>",
" </a-input-search>",
" </a-input-group>",
],
"description": "AntdVue输入框组代码片段"
},
"WpAntdVueInputNumberSnippet": {
"prefix": "w-input-number",
"body": [
"<a-input-number",
" v-model=\"value\"",
" :min=\"0\"",
" :max=\"10\"",
" :step=\"1\"",
" @change=\"onChange\"",
" @pressEnter=\"onPressEnter\">",
" </a-input-number",
" >",
],
"description": "AntdVue数字输入框代码片段"
},
"WpAntdVueMentionsSnippet": {
"prefix": "w-mentions",
"body": [
"<a-mentions",
" v-model=\"value\"",
" split=\" \"",
" :prefix=\"prefixs\"",
" @change=\"onChange\"",
" @select=\"onSelect\"",
" @search=\"onSearch\"",
" >",
" <a-mentions-option v-for=\"(item, index) in prefixOptions[prefix] || []\" :key=\"index\" :value=\"item\">{{",
" item",
" }}</a-mentions-option></a-mentions",
" >",
" <!-- data () {",
" return {",
" value: '',",
" prefixs: ['@', '#'],",
" prefix: '@',",
" prefixOptions: { '@': ['126.com', '163.com', 'qq.com'], '#': ['1.0', '1.2'] }",
" }",
" },",
" methods: {",
" onChange (value) {},",
" onSelect (option) {},",
" onSearch (val, prefix) {",
" this.prefix = prefix",
" }",
" }, -->",
],
"description": "AntdVue提及代码片段"
},
"WpAntdVueRadioGroupSnippet": {
"prefix": "w-radio-group",
"body": [
"<a-radio-group v-model=\"value\" @change=\"onChange\" :options=\"options\"></a-radio-group>",
" <!-- data () {",
" return {",
" value: '',",
" options: [",
" {",
" label: '北京',",
" value: 'beijing',",
" disabled: false",
" },",
" {",
" label: '上海',",
" value: 'shanghai',",
" disabled: false",
" },",
" {",
" label: '重庆',",
" value: 'chongqing',",
" disabled: false",
" },",
" {",
" label: '天津',",
" value: 'tianjin',",
" disabled: true",
" }",
" ]",
" }",
" },",
" methods: {",
" onChange (e) {",
" console.log(e.target.value)",
" }",
" },-->",
],
"description": "AntdVue单选框组代码片段"
},
"WpAntdVueRadioButtonGroupSnippet": {
"prefix": "w-radio-button-group",
"body": [
"<a-radio-group v-model=\"value\" button-style=\"solid\" @change=\"onChange\">",
" <a-radio-button v-for=\"(item, index) in options\" :key=\"index\" :value=\"item.value\" :disabled=\"item.disabled\">{{",
" item.label",
" }}</a-radio-button>",
" </a-radio-group>",
" <!-- data () {",
" return {",
" value: '',",
" options: [",
" {",
" label: '北京',",
" value: 'beijing',",
" disabled: false",
" },",
" {",
" label: '上海',",
" value: 'shanghai',",
" disabled: false",
" },",
" {",
" label: '重庆',",
" value: 'chongqing',",
" disabled: false",
" },",
" {",
" label: '天津',",
" value: 'tianjin',",
" disabled: true",
" }",
" ]",
" }",
" },",
" methods: {",
" onChange (e) {",
" console.log(e.target.value)",
" }",
" },-->",
],
"description": "AntdVue单选按钮组代码片段"
},
"WpAntdVueRateSnippet": {
"prefix": "w-rate",
"body": [
"<a-rate",
" v-model=\"value\"",
" allow-half",
" :tooltips=\"desc\"",
" :disabled=\"disabled\"",
" :count=\"count\"",
" @change=\"onChange\">",
" <template #character>",
" <a-icon type=\"star\" />",
" </template>",
" </a-rate>",
" <!-- data () {",
" return {",
" value: 0,",
" disabled: false,",
" count: 10,",
" desc: ['terrible', 'bad', 'normal', 'good', 'wonderful']",
" }",
" },",
" methods: {",
" onChange () {",
" console.log(this.value)",
" }",
" }, -->",
],
"description": "AntdVue评分代码片段"
},
"WpAntdVueSelectSnippet": {
"prefix": "w-select",
"body": [
"<a-select",
" label-in-value",
" v-model=\"value\"",
" placeholder=\"请选择一项\"",
" style=\"width: 300px\"",
" mode=\"tags\"",
" :allowClear=\"true\"",
" :token-separators=\"[',', '，', ' ']\"",
" :options=\"options\"",
" @change=\"onChange\"",
" @select=\"onSelect\"",
" >",
" <!-- <template #suffixIcon> <a-icon type=\"setting\" /></template>仅当mode='default'时有效 --> </a-select",
" ><!-- mode='default' | 'multiple' | 'tags' | 'combobox'",
" :token-separators=\"[',', '，', ' ']\"-->",
" <!-- data () {",
" return {",
" value: [],",
" options: [",
" {",
" label: '北京',",
" value: 'beijng',",
" disabled: false",
" },",
" {",
" label: '上海',",
" value: 'shanghai',",
" disabled: false",
" },",
" {",
" label: '重庆',",
" value: 'chongqing',",
" disabled: false",
" },",
" {",
" label: '天津',",
" value: 'tianjin',",
" disabled: true",
" }",
" ]",
" }",
" },",
" methods: {",
" onChange (val) {",
" val.map((v) => {",
" console.log(`key:${v.key} label:${v.label}`)",
" })",
" },",
" onSelect (val) {",
" this.value.map((v) => {",
" console.log(`this.key:${v.key} this.label:${v.label}`)",
" })",
" }",
" }, -->",
],
"description": "AntdVue选择器代码片段"
},
"WpAntdVueSelectGroupSnippet": {
"prefix": "w-select-group",
"body": [
"<a-select",
" label-in-value",
" v-model=\"value\"",
" placeholder=\"请选择一项\"",
" style=\"width: 300px\"",
" mode=\"multiple\"",
" :allowClear=\"true\"",
" @change=\"onChange\"",
" @select=\"onSelect\"",
" >",
" <!-- <template #suffixIcon> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" /> </template>仅当mode='default'时有效 -->",
" <!-- mode='default' | 'multiple' | 'tags' | 'combobox'",
" :token-separators=\"[',', '，', ' ']\"-->",
" <a-select-opt-group>",
" <template #label> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" />直辖市</template>",
" <a-select-option v-for=\"(item, index) in options\" :key=\"index\" :value=\"item.value\">{{",
" item.label",
" }}</a-select-option>",
" </a-select-opt-group>",
" </a-select>",
" <!-- data () {",
" return {",
" value: [],",
" options: [",
" {",
" label: '北京',",
" value: 'beijng',",
" disabled: false",
" },",
" {",
" label: '上海',",
" value: 'shanghai',",
" disabled: false",
" },",
" {",
" label: '重庆',",
" value: 'chongqing',",
" disabled: false",
" },",
" {",
" label: '天津',",
" value: 'tianjin',",
" disabled: true",
" }",
" ]",
" }",
" },",
" methods: {",
" onChange (val) {",
" val.map((v) => {",
" console.log(`key:${v.key} label:${v.label}`)",
" })",
" },",
" onSelect (val) {",
" this.value.map((v) => {",
" console.log(`this.key:${v.key} this.label:${v.label}`)",
" })",
" }",
" }, -->",
],
"description": "AntdVue分组选择器代码片段"
},
"WpAntdVueSliderSnippet": {
"prefix": "w-slider",
"body": [
"<a-slider",
" v-model=\"value\"",
" style=\"width: 300px\"",
" :min=\"0\"",
" :max=\"100\"",
" :step=\"1\"",
" :tip-formatter=\"formatter\"",
" :marks=\"marks\"",
" @change=\"onChange\"",
" @afterChange=\"onAfterChange\"",
" ></a-slider>",
" <!-- data () {",
" return {",
" value: 0,",
" marks: {",
" 0: '0°C',",
" 26: '26°C',",
" 37: '37°C',",
" 100: {",
" style: {",
" color: '#f50'",
" },",
" label: <strong>100°C</strong>",
" }",
" }",
" }",
" },",
" methods: {",
" onChange (val) {",
" console.log('onChangeValue:', val)",
" },",
" onAfterChange (val) {",
" console.log('onAfterChangeValue:', val)",
" },",
" formatter (value) {",
" return `${value}%`",
" }",
" }, -->",
],
"description": "AntdVue滑动输入条代码片段"
},
"WpAntdVueSliderRangeSnippet": {
"prefix": "w-slider-range",
"body": [
"<a-slider",
" range",
" v-model=\"rangeValue\"",
" style=\"width: 300px\"",
" :min=\"0\"",
" :max=\"100\"",
" :step=\"1\"",
" :tip-formatter=\"formatter\"",
" :marks=\"marks\"",
" @change=\"onRangeChange\"",
" @afterChange=\"onRangeAfterChange\"",
" ></a-slider>",
" <!-- data () {",
" return {",
" rangeValue: [20, 30],",
" marks: {",
" 0: '0°C',",
" 26: '26°C',",
" 37: '37°C',",
" 100: {",
" style: {",
" color: '#f50'",
" },",
" label: <strong>100°C</strong>",
" }",
" }",
" }",
" },",
" methods: {",
" onRangeChange (val) {",
" val.map((v) => {",
" console.log('onRangeChangeValue:', v)",
" })",
" },",
" onRangeAfterChange (val) {",
" val.map((v) => {",
" console.log('onRangeAfterChangeValue:', v)",
" })",
" },",
" formatter (value) {",
" return `${value}%`",
" }",
" }, -->",
],
"description": "AntdVue范围滑动输入条代码片段"
},
"WpAntdVueSwitchSnippet": {
"prefix": "w-switch",
"body": [
"<a-switch v-model=\"value\" :loading=\"loading\" default-checked @change=\"onChange\">",
" <template #checkedChildren> <a-icon type=\"check\" /></template>",
" <template #unCheckedChildren> <a-icon type=\"close\" /></template> </a-switch",
" >",
" <!-- data () {",
" return { value: true, loading: false }",
" },",
" methods: {",
" onChange () {",
" console.log(this.value)",
" }",
" }, -->",
],
"description": "AntdVue开关代码片段"
},
"WpAntdVueAvatarSnippet": {
"prefix": "w-avatar",
"body": [
"<a-avatar",
" shape=\"square\"",
" size=\"large\"",
" src=\"https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png\"",
" style=\"background-color: white; width: 1000px; height: 500px\"",
" >",
" <template #icon> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#f56a00\" /></template>",
" </a-avatar>",
],
"description": "AntdVue头像代码片段"
},
"WpAntdVueBadgeSnippet": {
"prefix": "w-badge",
"body": [
"<a-badge",
" :overflow-count=\"10\"",
" :count=\"count\"",
" title=\"Custom hover text\"",
" dot",
" color=\"#87d068\"",
" status=\"error\"",
" ><!-- status='success'|| 'processing'||'default'||'error'||'warning' -->",
" <!-- <template #count>",
" <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" />",
" </template> -->",
" </a-badge>",
],
"description": "AntdVue徽标代码片段"
},
"WpAntdVueCardSnippet": {
"prefix": "w-card",
"body": [
"<a-card title=\"卡片测试\" style=\"width: 300px\" :bordered=\"true\" hoverable>",
" <template",
" #extra",
" ><span @click=\"onClick\">",
" <a-tooltip title=\"提示\">",
" <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" />",
" </a-tooltip>",
" </span>",
" </template>",
" <p v-for=\"(item, index) in 6\" :key=\"index\">{{ item }}</p>",
" <a-card-meta title=\"数字列表\">",
" <template #description>数字列表描述</template>",
" </a-card-meta>",
" <template #actions>",
" <span @click=\"onClick\"> <a-icon type=\"setting\" /></span>",
" <span @click=\"onClick\"> <a-icon type=\"setting\" /></span>",
" <span @click=\"onClick\"> <a-icon type=\"setting\" /></span>",
" </template>",
" </a-card>",
],
"description": "AntdVue卡片代码片段"
},
"WpAntdVueCollapseSnippet": {
"prefix": "w-collapse",
"body": [
"<a-collapse accordion v-model=\"activeKey\" @change=\"onChange\" bordered style=\"width: 300px\">",
" <template #expandIcon=\"props\">",
" <a-icon type=\"caret-right\" :rotate=\"props.isActive ? 90 : 0\" />",
" </template>",
" <a-collapse-panel",
" v-for=\"item in contents\"",
" :key=\"item.key\"",
" :header=\"item.header\"",
" :disabled=\"item.disabled\"",
" :show-arrow=\"item.showArrow\"",
" ><!-- 注意：key只能为string类型 -->",
" <template #extra> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" /></template>",
" <p>{{ item.content }}</p>",
" </a-collapse-panel>",
" </a-collapse>",
" <!-- data () {",
" return {",
" activeKey: [],",
" contents: [",
" { key: '1', header: 'This is Header1', content: 'This is Content1', disabled: false, showArrow: true },",
" { key: '2', header: 'This is Header2', content: 'This is Content2', disabled: false, showArrow: true },",
" { key: '3', header: 'This is Header3', content: 'This is Content3', disabled: false, showArrow: false },",
" { key: '4', header: 'This is Header4', content: 'This is Content4', disabled: true, showArrow: true }",
" ]",
" }",
" },",
" methods: {",
" onChange (key) {",
" console.log(`key is ${key}`)",
" }",
" }, -->",
],
"description": "AntdVue折叠面板代码片段"
},
"WpAntdVueListSnippet": {
"prefix": "w-list",
"body": [
"<a-list item-layout=\"vertical\" :data-source=\"dataSource\" style=\"width: 1000px\" :bordered=\"true\" :split=\"true\">",
" <template #header>列表头</template>",
" <template #renderItem=\"item, index\">",
" <a-list-item>",
" <template #extra>",
" <img width=\"80\" alt=\"logo\" src=\"https://github.com/WuPan001/Wp.Icon/blob/main/NugetLogo.png?raw=true\" />",
" </template>",
" <template #actions>",
" <span",
" v-for=\"(item, index) in actions\"",
" :key=\"index\"",
" @click=\"onClick(index)\"",
" ><a-icon style=\"margin-right: 8px\" :type=\"item.type\" theme=\"twoTone\" two-tone-color=\"#52c41a\" />",
" {{ item.text }}",
" </span>",
" <!-- -->",
" </template>",
" <a-list-item-meta :description=\"item.description\">",
" <template #title>",
" <h1>{{ item.title }}</h1></template",
" >",
" <template #avatar>",
" <a-avatar shape=\"square\" size=\"large\" :src=\"item.avatar\"> </a-avatar>",
" </template>",
" </a-list-item-meta>",
" </a-list-item>",
" </template>",
" <template #footer>列表尾</template>",
" </a-list>",
" <!-- const avatar = 'https://github.com/WuPan001/Wp.Icon/blob/main/NugetLogo.png?raw=true'",
" data () {",
" return {",
" actions: [",
" { type: 'star-o', text: '156' },",
" { type: 'like-o', text: '156' },",
" { type: 'message', text: '2' }",
" ],",
" dataSource: [",
" {",
" title: '列表项1标题',",
" description: '列表项1描述',",
" avatar: avatar",
" },",
" {",
" title: '列表项2标题',",
" description: '列表项2描述',",
" avatar: avatar",
" }",
" ]",
" }",
" },",
" methods: {",
" onClick (index) {",
" console.log('ActionTest', index)",
" }",
" }, -->",
],
"description": "AntdVue列表代码片段"
},
"WpAntdVuePopoverSnippet": {
"prefix": "w-popover",
"body": [
"<a-popover title=\"气泡卡片测试\" trigger=\"hover\">",
" <template #content>",
" <p>气泡卡片测试内容</p>",
" <p>气泡卡片测试内容</p>",
" </template>",
" <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" />",
" </a-popover>",
],
"description": "AntdVue气泡卡片代码片段"
},
"WpAntdVueStatisticSnippet": {
"prefix": "w-statistic",
"body": [
"<a-statistic",
" title=\"统计数值标题\"",
" :value=\"123.456\"",
" :precision=\"2\"",
" style=\"margin-right: 100px\"",
" :value-style=\"{ color: '#3f8600' }\"",
" >",
" <template #suffix>% </template>",
" <template #prefix> <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" /></template>",
" </a-statistic>",
],
"description": "AntdVue数据统计代码片段"
},
"WpAntdVueStatisticCountDownSnippet": {
"prefix": "w-statistic-countdown",
"body": [
"<a-statistic-countdown title=\"倒计时组件标题\" :value=\"value\" @finish=\"onFinish\" :format=\"format\">",
" </a-statistic-countdown>",
" <!-- data () {",
" return {",
" /* format: 'HH:mm:ss:SSS', */",
" format: 'D 天 H 时 m 分 s 秒 SSS ',",
" value: Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30",
" }",
" },",
" methods: {",
" onFinish () {",
" console.log('Finished！')",
" }",
" }, -->",
],
"description": "AntdVue数据统计倒计时组件代码片段"
},
"WpAntdVueTabsSnippet": {
"prefix": "w-tabs",
"body": [
"<a-tabs",
" v-model=\"activeKey\"",
" style=\"width: 400px\"",
" tab-position=\"top\"",
" @change=\"onChange\"",
" @prevClick=\"callback\"",
" @nextClick=\"callback\"",
" >",
" <!-- tabPosition=\"left|right|top|bottom\" -->",
" <template #tabBarExtraContent>",
" <span> <a-icon type=\"setting\" /> </span>",
" </template>",
" <a-tab-pane v-for=\"item in tabs\" :key=\"item.title\" :disabled=\"item.disabled\">",
" <template #tab>",
" <a-icon type=\"setting\" theme=\"twoTone\" two-tone-color=\"#52c41a\" spin />{{ item.title }}</template",
" >",
" {{ item.content }}</a-tab-pane",
" >",
" </a-tabs>",
" <!-- data () {",
" return {",
" activeKey: '标签页标题1',",
" tabs: [",
" {",
" title: '标签页标题1',",
" content: '标签页内容1',",
" disabled: false",
" },",
" {",
" title: '标签页标题3',",
" content: '标签页内容3',",
" disabled: true",
" }",
" ]",
" }",
" },",
" methods: {",
" onChange () {",
" console.log(this.activeKey)",
" },",
" callback (val) {",
" console.log(val)",
" }",
" }, -->",
],
"description": "AntdVue标签页代码片段"
},
"WpAntdVueTagSnippet": {
"prefix": "w-tag",
"body": [
"<a-tag v-for=\"(item, index) in tags1\" :key=\"index\" closable @close=\"onClose(index)\" color=\"#f50\">{{",
" item",
" }}</a-tag>",
" <!-- data () { return { tags1: ['标签测试1', '标签测试2', '标签测试3', '标签测试4'] } }, ",
" methods: { onClose (e) {",
" console.log(e) }, }, -->",
],
"description": "AntdVue标签代码片段"
},
"WpAntdVueTagAddSnippet": {
"prefix": "w-tag-add",
"body": [
"<template>",
" <div>",
" <template v-for=\"(tag, index) in tags\">",
" <a-tooltip v-if=\"tag.length > 20\" :key=\"tag\" :title=\"tag\">",
" <a-tag :key=\"tag\" :closable=\"index !== 0\" @close=\"() => handleClose(tag)\">",
" {{ `${tag.slice(0, 20)}...` }}",
" </a-tag>",
" </a-tooltip>",
" <a-tag v-else :key=\"tag\" :closable=\"index !== 0\" @close=\"() => handleClose(tag)\">",
" {{ tag }}",
" </a-tag>",
" </template>",
" <a-input",
" v-if=\"inputVisible\"",
" ref=\"input\"",
" type=\"text\"",
" size=\"small\"",
" :style=\"{ width: '78px' }\"",
" :value=\"inputValue\"",
" @change=\"handleInputChange\"",
" @blur=\"handleInputConfirm\"",
" @keyup.enter=\"handleInputConfirm\"",
" />",
" <a-tag v-else style=\"background: #fff; borderstyle: dashed\" @click=\"showInput\">",
" <a-icon type=\"plus\" /> New Tag",
" </a-tag>",
" </div>",
" </template>",
" <!-- data () {",
" return {",
" tags: ['Unremovable', 'Tag 2', 'Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3Tag 3'],",
" inputVisible: false,",
" inputValue: ''",
" }",
" },",
" methods: {",
" handleClose (removedTag) {",
" const tags = this.tags.filter((tag) => tag !== removedTag)",
" console.log(tags)",
" this.tags = tags",
" },",
" showInput () {",
" this.inputVisible = true",
" this.$nextTick(function () {",
" this.$refs.input.focus()",
" })",
" },",
" handleInputChange (e) {",
" this.inputValue = e.target.value",
" },",
" handleInputConfirm () {",
" const inputValue = this.inputValue",
" let tags = this.tags",
" if (inputValue && tags.indexOf(inputValue) === -1) {",
" tags = [...tags, inputValue]",
" }",
" console.log(tags)",
" Object.assign(this, {",
" tags,",
" inputVisible: false,",
" inputValue: ''",
" })",
" }",
" }, -->",
],
"description": "AntdVue可以添加标签模板代码片段"
},
"WpAntdVueTimelineSnippet": {
"prefix": "w-timeline",
"body": [
"<a-timeline",
" pending=\"正在发生...\"",
" mode=\"alternate\"",
" style=\"width: 100%\"",
" ><!-- mode=left | alternate | right -->",
" <!-- <template",
" #pendingDot",
" ><a-icon type=\"icon-twitter\" theme=\"twoTone\" two-tone-color=\"#52c41a\" style=\"font-size: 18px\" />",
" </template> -->",
" <a-timeline-item v-for=\"(item, index) in contents\" :key=\"index\" :color=\"item.color\">",
" <template #dot> <a-icon :type=\"item.type\" :color=\"item.color\" spin /></template>",
" <h1>{{ item.title }}</h1>",
" <p>{{ item.content }}</p>",
" </a-timeline-item>",
" </a-timeline>",
" <!-- data () {",
" return {",
" contents: [",
" { type: 'setting', color: 'green', title: '2021-12-01', content: '大事件1' },",
" { type: 'setting', color: 'red', title: '2021-12-02', content: '大事件2' },",
" { type: 'setting', color: 'yellow', title: '2021-12-03', content: '大事件3' }",
" ]",
" }",
" }, -->",
],
"description": "AntdVue时间轴代码片段"
},
"WpAntdVueTooltipSnippet": {
"prefix": "w-tooltip",
"body": [
"<a-tooltip :auto-adjust-overflow=\"true\">",
" <template #title> <a-icon type=\"user\" /> 文字提示测试</template></a-tooltip",
" >",
],
"description": "AntdVue文字提示代码片段"
},
"WpAntdVueAlertSnippet": {
"prefix": "w-alert",
"body": [
"<a-alert",
" message=\"警告提示消息\"",
" type=\"error\"",
" :show-icon=\"true\"",
" closable",
" banner",
" style=\"min-width: 500px\"",
" @close=\"onClose\"",
" >",
" <template #description>",
" <p>这是一个<span style=\"color: red\">警告</span>提示测试</p>",
" </template>",
" <template #closeText>",
" <a-tooltip :auto-adjust-overflow=\"true\">",
" <template #title> 关闭消息</template>",
" <a-icon",
" type=\"setting\"",
" theme=\"twoTone\"",
" two-tone-color=\"#52c41a\"",
" spin",
" /></a-tooltip> </template",
" ></a-alert>",
" <!-- methods: {",
" onClose (e) {",
" console.log(e)",
" }",
" } -->",
],
"description": "AntdVue警告消息代码片段"
},
"WpAntdVueDrawerSnippet": {
"prefix": "w-drawer",
"body": [
"<a-drawer",
" title=\"抽屉标题\"",
" placement=\"right\"",
" :visible=\"visible\"",
" :closable=\"true\"",
" :width=\"700\"",
" @close=\"",
" () => {",
" this.visible = false",
" }",
" \"",
" >",
" </a-drawer>",
" <!-- data () {",
" return {",
" visible: false",
" }",
" } -->",
],
"description": "AntdVue抽屉代码片段"
},
"WpAntdVueMessageSnippet": {
"prefix": "w-message",
"body": [
"<a-button",
" type=\"primary\"",
" shape=\"round\"",
" size=\"default\"",
" block",
" @click=\"",
" () => {",
" this.\\$message",
" .loading('Action in progress..', 2.5)",
" .then(() => this.\\$message.success('Loading finished', 2.5))",
" .then(() => this.\\$message.info({ content: 'Loading finished is finished', duration: 2.5 }))",
" }",
" \"",
" >全局提示测试</a-button",
" ><!-- message.success(content, [duration], onClose)",
"message.error(content, [duration], onClose)",
"message.info(content, [duration], onClose)",
"message.warning(content, [duration], onClose)",
"message.warn(content, [duration], onClose) // alias of warning",
"message.loading(content, [duration], onClose) -->",
" <!-- message.open(config)",
"message.success(config)",
"message.error(config)",
"message.info(config)",
"message.warning(config)",
"message.warn(config) // alias of warning",
"message.loading(config) -->",
],
"description": "AntdVue全局提示代码片段"
},
}
03-30
3万+
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
