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