VsCode Ant Design of Vue组件代码片段（1）

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

"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栅格代码片段"
	}