VsCode Ant Design of Vue组件代码片段(4)

275 阅读1分钟

本文已参与「新人创作礼」活动,一起开启掘金创作之路

"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分组选择器代码片段"
	},