1 line
39 KiB
JavaScript
1 line
39 KiB
JavaScript
(window.webpackJsonp=window.webpackJsonp||[]).push([[16],{1284:function(t,s,a){},1285:function(t,s,a){},1416:function(t,s,a){"use strict";var n=a(1284);a.n(n).a},1417:function(t,s,a){"use strict";var n=a(1285);a.n(n).a},1463:function(t,s,a){"use strict";a.r(s);var n=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:"\n <a-skeleton/>\n",script:null,style:null,us:"\n#### Basic\nSimplest Skeleton usage.\n",cn:"\n#### 基本\n最简单的占位效果。\n",sourceCode:"<template>\n <a-skeleton />\n</template>\n"}}},[a("template",{slot:"component"},[a("a-skeleton")],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"基本"}},[t._v("基本 "),a("a",{staticClass:"anchor",attrs:{href:"#基本"}},[t._v("#")])]),t._v(" "),a("p",[t._v("最简单的占位效果。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Basic"}},[t._v("Basic "),a("a",{staticClass:"anchor",attrs:{href:"#Basic"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Simplest Skeleton usage.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(" />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};n._withStripped=!0;var e=a(31),l=Object(e.a)({},n,[],!1,null,null,null);l.options.__file="components/skeleton/demo/basic.md";var i=l.exports,v=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-skeleton active=""/>\n',script:null,style:null,us:"\n#### Active Animation\nDisplay active animation.\n",cn:"\n#### 动画效果\n显示动画效果。\n",sourceCode:"<template>\n <a-skeleton active />\n</template>\n"}}},[a("template",{slot:"component"},[a("a-skeleton",{attrs:{active:""}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"动画效果"}},[t._v("动画效果 "),a("a",{staticClass:"anchor",attrs:{href:"#动画效果"}},[t._v("#")])]),t._v(" "),a("p",[t._v("显示动画效果。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Active-Animation"}},[t._v("Active Animation "),a("a",{staticClass:"anchor",attrs:{href:"#Active-Animation"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Display active animation.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("active")]),t._v(" />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};v._withStripped=!0;var _=Object(e.a)({},v,[],!1,null,null,null);_.options.__file="components/skeleton/demo/active.md";var r=_.exports,o=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div class="article">\n <a-skeleton :loading="loading">\n <div>\n <h4>Ant Design Vue, a design language</h4>\n <p>\n We supply a series of design principles, practical patterns and high quality design\n resources (Sketch and Axure), to help people create their product prototypes beautifully\n and efficiently.\n </p>\n </div>\n </a-skeleton>\n <a-button @click="showSkeleton" :disabled="loading">\n Show Skeleton\n </a-button>\n </div>\n',script:"\n export default {\n data() {\n return {\n loading: false,\n };\n },\n methods: {\n showSkeleton() {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n }, 3000);\n },\n },\n };\n",style:"\n .article h4 {\n margin-bottom: 16px;\n }\n .article button {\n margin-top: 16px;\n }\n",us:"\n#### Contains sub component\nSkeleton contains sub component.\n",cn:"\n#### 包含子组件\n加载占位图包含子组件。\n",sourceCode:'<template>\n <div class="article">\n <a-skeleton :loading="loading">\n <div>\n <h4>Ant Design Vue, a design language</h4>\n <p>\n We supply a series of design principles, practical patterns and high quality design\n resources (Sketch and Axure), to help people create their product prototypes beautifully\n and efficiently.\n </p>\n </div>\n </a-skeleton>\n <a-button @click="showSkeleton" :disabled="loading">\n Show Skeleton\n </a-button>\n </div>\n</template>\n<script>\n export default {\n data() {\n return {\n loading: false,\n };\n },\n methods: {\n showSkeleton() {\n this.loading = true;\n setTimeout(() => {\n this.loading = false;\n }, 3000);\n },\n },\n };\n<\/script>\n<style>\n .article h4 {\n margin-bottom: 16px;\n }\n .article button {\n margin-top: 16px;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",{staticClass:"article"},[a("a-skeleton",{attrs:{loading:t.loading}},[a("div",[a("h4",[t._v("Ant Design Vue, a design language")]),t._v(" "),a("p",[t._v("\n We supply a series of design principles, practical patterns and high quality design\n resources (Sketch and Axure), to help people create their product prototypes beautifully\n and efficiently.\n ")])])]),t._v(" "),a("a-button",{attrs:{disabled:t.loading},on:{click:t.showSkeleton}},[t._v("\n Show Skeleton\n ")])],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"包含子组件"}},[t._v("包含子组件 "),a("a",{staticClass:"anchor",attrs:{href:"#包含子组件"}},[t._v("#")])]),t._v(" "),a("p",[t._v("加载占位图包含子组件。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Contains-sub-component"}},[t._v("Contains sub component "),a("a",{staticClass:"anchor",attrs:{href:"#Contains-sub-component"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Skeleton contains sub component.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("class")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"article"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":loading")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("h4")]),t._v(">")]),t._v("Ant Design Vue, a design language"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("h4")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n We supply a series of design principles, practical patterns and high quality design\n resources (Sketch and Axure), to help people create their product prototypes beautifully\n and efficiently.\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("p")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@click")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"showSkeleton"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":disabled")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(">")]),t._v("\n Show Skeleton\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-button")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("loading")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(",\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n showSkeleton() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(";\n setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[t._v("()")]),t._v(" =>")]),t._v(" {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = "),a("span",{staticClass:"hljs-literal"},[t._v("false")]),t._v(";\n }, "),a("span",{staticClass:"hljs-number"},[t._v("3000")]),t._v(");\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".article")]),t._v(" "),a("span",{staticClass:"hljs-selector-tag"},[t._v("h4")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-bottom")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".article")]),t._v(" "),a("span",{staticClass:"hljs-selector-tag"},[t._v("button")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("margin-top")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("16px")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};o._withStripped=!0;var p={data:function(){return{loading:!1}},methods:{showSkeleton:function(){var t=this;this.loading=!0,setTimeout((function(){t.loading=!1}),3e3)}}},c=(a(1416),Object(e.a)(p,o,[],!1,null,null,null));c.options.__file="components/skeleton/demo/children.md";var h=c.exports,d=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <a-skeleton avatar="" :paragraph="{rows: 4}"/>\n',script:null,style:null,us:"\n#### Complex combination\nComplex combination with avatar and multiple paragraphs.\n",cn:"\n#### 复杂的组合\n更复杂的组合。\n",sourceCode:'<template>\n <a-skeleton avatar :paragraph="{rows: 4}" />\n</template>\n'}}},[a("template",{slot:"component"},[a("a-skeleton",{attrs:{avatar:"",paragraph:{rows:4}}})],1),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"复杂的组合"}},[t._v("复杂的组合 "),a("a",{staticClass:"anchor",attrs:{href:"#复杂的组合"}},[t._v("#")])]),t._v(" "),a("p",[t._v("更复杂的组合。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"Complex-combination"}},[t._v("Complex combination "),a("a",{staticClass:"anchor",attrs:{href:"#Complex-combination"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Complex combination with avatar and multiple paragraphs.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("avatar")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":paragraph")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{rows: 4}"')]),t._v(" />")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n")])])])],2)]],2)};d._withStripped=!0;var m=Object(e.a)({},d,[],!1,null,null,null);m.options.__file="components/skeleton/demo/complex.md";var g=m.exports,C=function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[[a("demo-box",{attrs:{jsfiddle:{html:'\n <div>\n <a-switch :checked="!loading" @change="onChange"/>\n\n <a-list itemLayout="vertical" size="large" :dataSource="listData">\n <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">\n <template v-if="!loading" slot="actions" v-for="{type, text} in actions">\n <span :key="type">\n <a-icon :type="type" style="margin-right: 8px"/>\n {{text}}\n </span>\n </template>\n <img v-if="!loading" slot="extra" width="272" alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"/>\n <a-skeleton :loading="loading" active="" avatar="">\n <a-list-item-meta :description="item.description">\n <a slot="title" :href="item.href">{{item.title}}</a>\n <a-avatar slot="avatar" :src="item.avatar"/>\n </a-list-item-meta>\n {{item.content}}\n </a-skeleton>\n </a-list-item>\n </a-list>\n </div>\n',script:"\n const listData = [];\n for (let i = 0; i < 3; i++) {\n listData.push({\n href: 'https://www.antdv.com/',\n title: `ant design vue part ${i}`,\n avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',\n description:\n 'Ant Design, a design language for background applications, is refined by Ant UED Team.',\n content:\n 'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.',\n });\n }\n export default {\n data() {\n return {\n loading: true,\n listData,\n actions: [\n { type: 'star-o', text: '156' },\n { type: 'like-o', text: '156' },\n { type: 'message', text: '2' },\n ],\n };\n },\n methods: {\n onChange(checked) {\n this.loading = !checked;\n },\n },\n };\n",style:"\n .skeleton-demo {\n border: 1px solid #f4f4f4;\n }\n",us:"\n#### List\nUse skeleton in list component.\n",cn:"\n#### 列表\n在列表组件中使用加载占位符。\n",sourceCode:'<template>\n <div>\n <a-switch :checked="!loading" @change="onChange" />\n\n <a-list itemLayout="vertical" size="large" :dataSource="listData">\n <a-list-item slot="renderItem" slot-scope="item, index" key="item.title">\n <template v-if="!loading" slot="actions" v-for="{type, text} in actions">\n <span :key="type">\n <a-icon :type="type" style="margin-right: 8px" />\n {{text}}\n </span>\n </template>\n <img\n v-if="!loading"\n slot="extra"\n width="272"\n alt="logo"\n src="https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"\n />\n <a-skeleton :loading="loading" active avatar>\n <a-list-item-meta :description="item.description">\n <a slot="title" :href="item.href">{{item.title}}</a>\n <a-avatar slot="avatar" :src="item.avatar" />\n </a-list-item-meta>\n {{item.content}}\n </a-skeleton>\n </a-list-item>\n </a-list>\n </div>\n</template>\n<script>\n const listData = [];\n for (let i = 0; i < 3; i++) {\n listData.push({\n href: \'https://www.antdv.com/\',\n title: `ant design vue part ${i}`,\n avatar: \'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png\',\n description:\n \'Ant Design, a design language for background applications, is refined by Ant UED Team.\',\n content:\n \'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.\',\n });\n }\n export default {\n data() {\n return {\n loading: true,\n listData,\n actions: [\n { type: \'star-o\', text: \'156\' },\n { type: \'like-o\', text: \'156\' },\n { type: \'message\', text: \'2\' },\n ],\n };\n },\n methods: {\n onChange(checked) {\n this.loading = !checked;\n },\n },\n };\n<\/script>\n<style>\n .skeleton-demo {\n border: 1px solid #f4f4f4;\n }\n</style>\n'}}},[a("template",{slot:"component"},[a("div",[a("a-switch",{attrs:{checked:!t.loading},on:{change:t.onChange}}),t._v(" "),a("a-list",{attrs:{itemLayout:"vertical",size:"large",dataSource:t.listData},scopedSlots:t._u([{key:"renderItem",fn:function(s,n){return a("a-list-item",{key:"item.title"},[t._l(t.actions,(function(s){var n=s.type,e=s.text;return t.loading?t._e():a("template",{slot:"actions"},[a("span",{key:n},[a("a-icon",{staticStyle:{"margin-right":"8px"},attrs:{type:n}}),t._v("\n "+t._s(e)+"\n ")],1)])})),t._v(" "),t.loading?t._e():a("img",{attrs:{slot:"extra",width:"272",alt:"logo",src:"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"},slot:"extra"}),t._v(" "),a("a-skeleton",{attrs:{loading:t.loading,active:"",avatar:""}},[a("a-list-item-meta",{attrs:{description:s.description}},[a("a",{attrs:{slot:"title",href:s.href},slot:"title"},[t._v(t._s(s.title))]),t._v(" "),a("a-avatar",{attrs:{slot:"avatar",src:s.avatar},slot:"avatar"})],1),t._v("\n "+t._s(s.content)+"\n ")],1)],2)}}])})],1)]),t._v(" "),a("template",{slot:"description"},[a("h4",{attrs:{id:"列表"}},[t._v("列表 "),a("a",{staticClass:"anchor",attrs:{href:"#列表"}},[t._v("#")])]),t._v(" "),a("p",[t._v("在列表组件中使用加载占位符。")])]),t._v(" "),a("template",{slot:"us-description"},[a("h4",{attrs:{id:"List"}},[t._v("List "),a("a",{staticClass:"anchor",attrs:{href:"#List"}},[t._v("#")])]),t._v(" "),a("p",[t._v("Use skeleton in list component.")])]),t._v(" "),a("template",{slot:"code"},[a("pre",[a("code",{staticClass:"language-html"},[a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-switch")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":checked")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"!loading"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("@change")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"onChange"')]),t._v(" />")]),t._v("\n\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("itemLayout")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"vertical"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("size")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"large"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":dataSource")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"listData"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"renderItem"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot-scope")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item, index"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item.title"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"!loading"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"actions"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("v-for")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"{type, text} in actions"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":key")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"type"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-icon")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":type")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"type"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("style")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"margin-right: 8px"')]),t._v(" />")]),t._v("\n "),a("span",[t._v("{{")]),t._v("text"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("span")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("img")]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("v-if")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"!loading"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"extra"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("width")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"272"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("alt")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"logo"')]),t._v("\n "),a("span",{staticClass:"hljs-attr"},[t._v("src")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"https://gw.alipayobjects.com/zos/rmsportal/mqaQswcyDLcXyDKnZfES.png"')]),t._v("\n />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":loading")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"loading"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("active")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("avatar")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":description")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item.description"')]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"title"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":href")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item.href"')]),t._v(">")]),a("span",[t._v("{{")]),t._v("item.title"),a("span",[t._v("}}")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("a-avatar")]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v("slot")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"avatar"')]),t._v(" "),a("span",{staticClass:"hljs-attr"},[t._v(":src")]),t._v("="),a("span",{staticClass:"hljs-string"},[t._v('"item.avatar"')]),t._v(" />")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-list-item-meta")]),t._v(">")]),t._v("\n "),a("span",[t._v("{{")]),t._v("item.content"),a("span",[t._v("}}")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-skeleton")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-list-item")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("a-list")]),t._v(">")]),t._v("\n "),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("div")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("template")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),a("span",{staticClass:"javascript"},[t._v("\n "),a("span",{staticClass:"hljs-keyword"},[t._v("const")]),t._v(" listData = [];\n "),a("span",{staticClass:"hljs-keyword"},[t._v("for")]),t._v(" ("),a("span",{staticClass:"hljs-keyword"},[t._v("let")]),t._v(" i = "),a("span",{staticClass:"hljs-number"},[t._v("0")]),t._v("; i < "),a("span",{staticClass:"hljs-number"},[t._v("3")]),t._v("; i++) {\n listData.push({\n "),a("span",{staticClass:"hljs-attr"},[t._v("href")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'https://www.antdv.com/'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("title")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("`ant design vue part "),a("span",{staticClass:"hljs-subst"},[t._v("${i}")]),t._v("`")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("avatar")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("description")]),t._v(":\n "),a("span",{staticClass:"hljs-string"},[t._v("'Ant Design, a design language for background applications, is refined by Ant UED Team.'")]),t._v(",\n "),a("span",{staticClass:"hljs-attr"},[t._v("content")]),t._v(":\n "),a("span",{staticClass:"hljs-string"},[t._v("'We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently.'")]),t._v(",\n });\n }\n "),a("span",{staticClass:"hljs-keyword"},[t._v("export")]),t._v(" "),a("span",{staticClass:"hljs-keyword"},[t._v("default")]),t._v(" {\n data() {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("return")]),t._v(" {\n "),a("span",{staticClass:"hljs-attr"},[t._v("loading")]),t._v(": "),a("span",{staticClass:"hljs-literal"},[t._v("true")]),t._v(",\n listData,\n "),a("span",{staticClass:"hljs-attr"},[t._v("actions")]),t._v(": [\n { "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'star-o'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'156'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'like-o'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'156'")]),t._v(" },\n { "),a("span",{staticClass:"hljs-attr"},[t._v("type")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'message'")]),t._v(", "),a("span",{staticClass:"hljs-attr"},[t._v("text")]),t._v(": "),a("span",{staticClass:"hljs-string"},[t._v("'2'")]),t._v(" },\n ],\n };\n },\n "),a("span",{staticClass:"hljs-attr"},[t._v("methods")]),t._v(": {\n onChange(checked) {\n "),a("span",{staticClass:"hljs-keyword"},[t._v("this")]),t._v(".loading = !checked;\n },\n },\n };\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("script")]),t._v(">")]),t._v("\n"),a("span",{staticClass:"hljs-tag"},[t._v("<"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),a("span",{staticClass:"css"},[t._v("\n "),a("span",{staticClass:"hljs-selector-class"},[t._v(".skeleton-demo")]),t._v(" {\n "),a("span",{staticClass:"hljs-attribute"},[t._v("border")]),t._v(": "),a("span",{staticClass:"hljs-number"},[t._v("1px")]),t._v(" solid "),a("span",{staticClass:"hljs-number"},[t._v("#f4f4f4")]),t._v(";\n }\n")]),a("span",{staticClass:"hljs-tag"},[t._v("</"),a("span",{staticClass:"hljs-name"},[t._v("style")]),t._v(">")]),t._v("\n")])])])],2)]],2)};C._withStripped=!0;for(var u=[],j=0;j<3;j++)u.push({href:"https://www.antdv.com/",title:"ant design vue part "+j,avatar:"https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png",description:"Ant Design, a design language for background applications, is refined by Ant UED Team.",content:"We supply a series of design principles, practical patterns and high quality design resources (Sketch and Axure), to help people create their product prototypes beautifully and efficiently."});var f={data:function(){return{loading:!0,listData:u,actions:[{type:"star-o",text:"156"},{type:"like-o",text:"156"},{type:"message",text:"2"}]}},methods:{onChange:function(t){this.loading=!t}}},y=(a(1417),Object(e.a)(f,C,[],!1,null,null,null));y.options.__file="components/skeleton/demo/list.md";var k=y.exports,b=function(){var t=this.$createElement;this._self._c;return this._m(0)};b._withStripped=!0;var S=Object(e.a)({},b,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("h3",{attrs:{id:"Skeleton"}},[t._v("Skeleton "),a("a",{staticClass:"anchor",attrs:{href:"#Skeleton"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("active")]),t._v(" "),a("td",[t._v("是否展示动画效果")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("avatar")]),t._v(" "),a("td",[t._v("是否显示头像占位图")]),t._v(" "),a("td",[t._v("boolean | "),a("a",{attrs:{href:"#SkeletonAvatarProps"}},[t._v("SkeletonAvatarProps")])]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("loading")]),t._v(" "),a("td",[t._v("为 "),a("code",{pre:!0},[t._v("true")]),t._v(" 时，显示占位图。反之则直接展示子组件")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("paragraph")]),t._v(" "),a("td",[t._v("是否显示段落占位图")]),t._v(" "),a("td",[t._v("boolean | "),a("a",{attrs:{href:"#SkeletonParagraphProps"}},[t._v("SkeletonParagraphProps")])]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("是否显示标题占位图")]),t._v(" "),a("td",[t._v("boolean | "),a("a",{attrs:{href:"#SkeletonTitleProps"}},[t._v("SkeletonTitleProps")])]),t._v(" "),a("td",[t._v("true")])])])]),t._v(" "),a("h3",{attrs:{id:"SkeletonAvatarProps"}},[t._v("SkeletonAvatarProps "),a("a",{staticClass:"anchor",attrs:{href:"#SkeletonAvatarProps"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("设置头像占位图的大小")]),t._v(" "),a("td",[t._v("Enum{ 'large', 'small', 'default' }")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("shape")]),t._v(" "),a("td",[t._v("指定头像的形状")]),t._v(" "),a("td",[t._v("Enum{ 'circle', 'square' }")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"SkeletonTitleProps"}},[t._v("SkeletonTitleProps "),a("a",{staticClass:"anchor",attrs:{href:"#SkeletonTitleProps"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("设置标题占位图的宽度")]),t._v(" "),a("td",[t._v("number | string")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"SkeletonParagraphProps"}},[t._v("SkeletonParagraphProps "),a("a",{staticClass:"anchor",attrs:{href:"#SkeletonParagraphProps"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("属性")]),t._v(" "),a("th",[t._v("说明")]),t._v(" "),a("th",[t._v("类型")]),t._v(" "),a("th",[t._v("默认值")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("rows")]),t._v(" "),a("td",[t._v("设置段落占位图的行数")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度")]),t._v(" "),a("td",[t._v("number | string | Array<number | string>")]),t._v(" "),a("td",[t._v("-")])])])])])}],!1,null,null,null);S.options.__file="components/skeleton/index.zh-CN.md";var w=S.exports,x=function(){var t=this.$createElement;this._self._c;return this._m(0)};x._withStripped=!0;var A=Object(e.a)({},x,[function(){var t=this,s=t.$createElement,a=t._self._c||s;return a("div",[a("h2",{attrs:{id:"API"}},[t._v("API "),a("a",{staticClass:"anchor",attrs:{href:"#API"}},[t._v("#")])]),t._v(" "),a("h3",{attrs:{id:"Skeleton"}},[t._v("Skeleton "),a("a",{staticClass:"anchor",attrs:{href:"#Skeleton"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("active")]),t._v(" "),a("td",[t._v("Show animation effect")]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("avatar")]),t._v(" "),a("td",[t._v("Show avatar placeholder")]),t._v(" "),a("td",[t._v("boolean | "),a("a",{attrs:{href:"#SkeletonAvatarProps"}},[t._v("SkeletonAvatarProps")])]),t._v(" "),a("td",[t._v("false")])]),t._v(" "),a("tr",[a("td",[t._v("loading")]),t._v(" "),a("td",[t._v("Display the skeleton when "),a("code",{pre:!0},[t._v("true")])]),t._v(" "),a("td",[t._v("boolean")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("paragraph")]),t._v(" "),a("td",[t._v("Show paragraph placeholder")]),t._v(" "),a("td",[t._v("boolean | "),a("a",{attrs:{href:"#SkeletonParagraphProps"}},[t._v("SkeletonParagraphProps")])]),t._v(" "),a("td",[t._v("true")])]),t._v(" "),a("tr",[a("td",[t._v("title")]),t._v(" "),a("td",[t._v("Show title placeholder")]),t._v(" "),a("td",[t._v("boolean | "),a("a",{attrs:{href:"#SkeletonTitleProps"}},[t._v("SkeletonTitleProps")])]),t._v(" "),a("td",[t._v("true")])])])]),t._v(" "),a("h3",{attrs:{id:"SkeletonAvatarProps"}},[t._v("SkeletonAvatarProps "),a("a",{staticClass:"anchor",attrs:{href:"#SkeletonAvatarProps"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("size")]),t._v(" "),a("td",[t._v("Set the size of avatar")]),t._v(" "),a("td",[t._v("Enum{ 'large', 'small', 'default' }")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("shape")]),t._v(" "),a("td",[t._v("Set the shape of avatar")]),t._v(" "),a("td",[t._v("Enum{ 'circle', 'square' }")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"SkeletonTitleProps"}},[t._v("SkeletonTitleProps "),a("a",{staticClass:"anchor",attrs:{href:"#SkeletonTitleProps"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("Set the width of title")]),t._v(" "),a("td",[t._v("number | string")]),t._v(" "),a("td",[t._v("-")])])])]),t._v(" "),a("h3",{attrs:{id:"SkeletonParagraphProps"}},[t._v("SkeletonParagraphProps "),a("a",{staticClass:"anchor",attrs:{href:"#SkeletonParagraphProps"}},[t._v("#")])]),t._v(" "),a("table",[a("thead",[a("tr",[a("th",[t._v("Property")]),t._v(" "),a("th",[t._v("Description")]),t._v(" "),a("th",[t._v("Type")]),t._v(" "),a("th",[t._v("Default")])])]),t._v(" "),a("tbody",[a("tr",[a("td",[t._v("rows")]),t._v(" "),a("td",[t._v("Set the row count of paragraph")]),t._v(" "),a("td",[t._v("number")]),t._v(" "),a("td",[t._v("-")])]),t._v(" "),a("tr",[a("td",[t._v("width")]),t._v(" "),a("td",[t._v("Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width")]),t._v(" "),a("td",[t._v("number | string | Array<number | string>")]),t._v(" "),a("td",[t._v("-")])])])])])}],!1,null,null,null);A.options.__file="components/skeleton/index.en-US.md";var P=A.exports,D="# 加载占位图\n\n 在需要等待加载内容的位置提供一个占位图。\n\n ## 何时使用\n\n - 网络较慢，需要长时间等待加载处理的情况下。\n - 图文信息内容较多的列表/卡片中。\n ## 代码演示",T="# Skeleton\n\n Provide a placeholder at the place which need waiting for loading.\n\n # When To Use\n\n - When resource needs long time to load, like low network speed.\n - The component contains much information. Such as List or Card.\n ## Examples\n ",E={category:"Components",subtitle:"加载占位图",type:"Feedback",title:"Skeleton",cols:1,render:function(){var t=arguments[0];return t("div",[t("md",{attrs:{cn:D,us:T}}),t("br"),t(i),t("br"),t(g),t("br"),t(r),t("br"),t(h),t("br"),t(k),t("br"),t("api",[t("template",{slot:"cn"},[t(w)]),t(P)])])}},q=Object(e.a)(E,void 0,void 0,!1,null,null,null);q.options.__file="components/skeleton/demo/index.vue";s.default=q.exports}}]); |