/*! For license information please see 4995.e6dfc808.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["4995"],{35173:function(n,t,s){"use strict";s.r(t);var a=s("80681");let e=["innerHTML"];t.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Skeleton \u9AA8\u67B6\u5C4F

\n

\u4ECB\u7ECD

\n

\u7528\u4E8E\u5728\u5185\u5BB9\u52A0\u8F7D\u8FC7\u7A0B\u4E2D\u5C55\u793A\u4E00\u7EC4\u5360\u4F4D\u56FE\u5F62\u3002

\n

\u5F15\u5165

\n

\u901A\u8FC7\u4EE5\u4E0B\u65B9\u5F0F\u6765\u5168\u5C40\u6CE8\u518C\u7EC4\u4EF6\uFF0C\u66F4\u591A\u6CE8\u518C\u65B9\u5F0F\u8BF7\u53C2\u8003\u7EC4\u4EF6\u6CE8\u518C\u3002

\n
import { createApp } from 'vue';\nimport {\n  Skeleton,\n  SkeletonTitle,\n  SkeletonImage,\n  SkeletonAvatar,\n  SkeletonParagraph,\n} from 'vant';\n\nconst app = createApp();\napp.use(Skeleton);\napp.use(SkeletonTitle);\napp.use(SkeletonImage);\napp.use(SkeletonAvatar);\napp.use(SkeletonParagraph);\n
\n

\u4EE3\u7801\u6F14\u793A

\n

\u57FA\u7840\u7528\u6CD5

\n

\u901A\u8FC7 title \u5C5E\u6027\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FE\uFF0C\u901A\u8FC7 row \u5C5E\u6027\u914D\u7F6E\u5360\u4F4D\u6BB5\u843D\u884C\u6570\u3002

\n
<van-skeleton title :row="3" />\n
\n

\u663E\u793A\u5934\u50CF

\n

\u901A\u8FC7 avatar \u5C5E\u6027\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FE\u3002

\n
<van-skeleton title avatar :row="3" />\n
\n

\u5C55\u793A\u5B50\u7EC4\u4EF6

\n

\u5C06 loading \u5C5E\u6027\u8BBE\u7F6E\u6210 false \u8868\u793A\u5185\u5BB9\u52A0\u8F7D\u5B8C\u6210\uFF0C\u6B64\u65F6\u4F1A\u9690\u85CF\u5360\u4F4D\u56FE\uFF0C\u5E76\u663E\u793A Skeleton \u7684\u5B50\u7EC4\u4EF6\u3002

\n
<van-skeleton title avatar :row="3" :loading="loading">\n  <div>\u5B9E\u9645\u5185\u5BB9</div>\n</van-skeleton>\n
\n
import { ref, onMounted } from 'vue';\n\nexport default {\n  setup() {\n    const loading = ref(true);\n\n    onMounted(() => {\n      loading.value = false;\n    });\n\n    return {\n      loading,\n    };\n  },\n};\n
\n

\u81EA\u5B9A\u4E49\u5C55\u793A\u5185\u5BB9

\n

\u901A\u8FC7 template \u63D2\u69FD\u5B8C\u6210\u81EA\u5B9A\u4E49\u5185\u5BB9\u7684\u5C55\u793A\u3002

\n
<van-skeleton>\n  <template #template>\n    <div :style="{ display: 'flex', width: '100%' }">\n      <van-skeleton-image />\n      <div :style="{ flex: 1, marginLeft: '16px' }">\n        <van-skeleton-paragraph row-width="60%" />\n        <van-skeleton-paragraph />\n        <van-skeleton-paragraph />\n        <van-skeleton-paragraph />\n      </div>\n    </div>\n  </template>\n</van-skeleton>\n
\n

API

\n

Skeleton Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
row\u6BB5\u843D\u5360\u4F4D\u56FE\u884C\u6570number | string0
row-width\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6\uFF0C\u53EF\u4F20\u6570\u7EC4\u6765\u8BBE\u7F6E\u6BCF\u4E00\u884C\u7684\u5BBD\u5EA6number | string |
(number | string)[]		100%
title\u662F\u5426\u663E\u793A\u6807\u9898\u5360\u4F4D\u56FEbooleanfalse
avatar\u662F\u5426\u663E\u793A\u5934\u50CF\u5360\u4F4D\u56FEbooleanfalse
loading\u662F\u5426\u663E\u793A\u9AA8\u67B6\u5C4F\uFF0C\u4F20 false \u65F6\u4F1A\u5C55\u793A\u5B50\u7EC4\u4EF6\u5185\u5BB9booleantrue
animate\u662F\u5426\u5F00\u542F\u52A8\u753Bbooleantrue
round\u662F\u5426\u5C06\u6807\u9898\u548C\u6BB5\u843D\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683Cbooleanfalse
title-width\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6number | string40%
avatar-size\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0Fnumber | string32px
avatar-shape\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
\n

SkeletonParagraph Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
round\u662F\u5426\u5C06\u6BB5\u843D\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683Cbooleanfalse
row-width\u6BB5\u843D\u5360\u4F4D\u56FE\u5BBD\u5EA6string100%
\n

SkeletonTitle Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
round\u662F\u5426\u5C06\u6807\u9898\u663E\u793A\u4E3A\u5706\u89D2\u98CE\u683Cbooleanfalse
title-width\u6807\u9898\u5360\u4F4D\u56FE\u5BBD\u5EA6number | string40%
\n

SkeletonAvatar Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
avatar-size\u5934\u50CF\u5360\u4F4D\u56FE\u5927\u5C0Fnumber | string32px
avatar-shape\u5934\u50CF\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
\n

SkeletonImage Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u53C2\u6570\u8BF4\u660E\u7C7B\u578B\u9ED8\u8BA4\u503C
image-size\u56FE\u7247\u5360\u4F4D\u56FE\u5927\u5C0Fnumber | string32px
image-shape\u56FE\u7247\u5360\u4F4D\u56FE\u5F62\u72B6\uFF0C\u53EF\u9009\u503C\u4E3A squarestringround
\n

Skeleton Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u8BF4\u660E
default\u9AA8\u67B6\u5C4F\u5185\u5BB9
template\u81EA\u5B9A\u4E49\u5185\u5BB9
\n

\u7C7B\u578B\u5B9A\u4E49

\n

\u7EC4\u4EF6\u5BFC\u51FA\u4EE5\u4E0B\u7C7B\u578B\u5B9A\u4E49\uFF1A

\n
import type {\n  SkeletonProps,\n  SkeletonImageProps,\n  SkeletonTitleProps,\n  SkeletonImageShape,\n  SkeletonAvatarShape,\n  SkeletonParagraphProps,\n} from 'vant';\n
\n

\u4E3B\u9898\u5B9A\u5236

\n

\u6837\u5F0F\u53D8\u91CF

\n

\u7EC4\u4EF6\u63D0\u4F9B\u4E86\u4E0B\u5217 CSS \u53D8\u91CF\uFF0C\u53EF\u7528\u4E8E\u81EA\u5B9A\u4E49\u6837\u5F0F\uFF0C\u4F7F\u7528\u65B9\u6CD5\u8BF7\u53C2\u8003 ConfigProvider \u7EC4\u4EF6\u3002

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
\u540D\u79F0\u9ED8\u8BA4\u503C\u63CF\u8FF0
--van-skeleton-paragraph-height16px-
--van-skeleton-paragraph-backgroundvar(--van-active-color)-
--van-skeleton-paragraph-margin-topvar(--van-padding-sm)-
--van-skeleton-title-width40%-
--van-skeleton-avatar-size32px-
--van-skeleton-avatar-backgroundvar(--van-active-color)-
--van-skeleton-duration1.2s-
--van-skeleton-image-size96px
--van-skeleton-image-radius24px-
\n
'},null,8,e))}}}]);