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