Skeleton组件api、demo优化讨论

[xingyan95]

skeleton是真实DOM结构的抽象，组件内部没办法把所有DOM排版方式包括进去，比如头像可以在段落的旁边，也可以在段落的上面。
skeleton组件的核心应该是提供不同DOM结构的抽象，然后提供默认的排版和动画等能力。

基础用法

默认排版：一个标题+三个段落，标题默认宽度为40%，中间两个段落默认宽度100%，最后一个段落默认宽度为60%。

<d-skeleton></d-skeleton>

自定义排版

<d-skeleton>
    <img src="animal.png" />
    <p>内容比较短的一段文字</p>
    <d-button>一个按钮</d-button>
    <template #placeholder>
    	<d-skeleton-item variant="image"></d-skeleton-item>
        <d-skeleton-item style="width: 10%;"></d-skeleton-item>
        <d-skeleton-item variant="square" style="width: 80px; height: 28px;"></d-skeleton-item>
    </template>
</d-skeleton>

d-skeleton 参数

参数	类型	默认值	说明
loading	boolean	true	可选，是否显示骨架屏，传false会展示加载结束后的DOM
show-animation	boolean	true	可选，是否显示动画效果，影响所有占位元素
row	number	3	可选，段落行数，默认3行
round	boolean	true	可选，是否显示圆角

d-skeleton-item 参数

预置一种具象类型：image除显示灰色背景外，还需要显示一个占位图，默认是square形状，宽高100px。

预置两种抽象类型：circle为圆形，默认宽高40px；square为方形，默认宽度100%，高度16px。两种抽象类型可以通过原生style自定义宽高。

参数	类型	默认值	说明
variant	Variant	square	可选，占位元素的样式

Variant 类型定义

可讨论是否需要增加其他类型，比如按钮、标题等。

export Variant = `image | circle | square`