本文已参与「新人创作礼」活动，一起开启掘金创作之路
"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全局提示代码片段"
},
