feat: ✨ skeleton添加默认内容插槽 (#322)

Author: RJQingHuan

docs/component/skeleton.md

@@ -1,10 +1,13 @@
 <frame/>
 
 # Skeleton 骨架屏
+
 用于等待加载内容所展示的占位图形组合，有动态效果加载效果，减少用户等待焦虑。
 
 ## 骨架图风格
+
 支持 `avatar`、`image`、`text`、`paragraph` 四种类型。
+
 ```html
 // 头像骨架屏
 <wd-skeleton theme="avatar" />
@@ -14,11 +17,15 @@
 <wd-skeleton theme="text" />
 // 段落骨架屏
 <wd-skeleton theme="paragraph" />
+
 ```
+
 ## 宫格骨架屏
+
 ```html
 <wd-skeleton :row-col="grid" />
 ```
+
 ```ts
 const grid = [
   [
@@ -38,8 +45,8 @@ const grid = [
 ]
 ```
 
-
 ## 单元格骨架屏
+
 ```html
 <view style="display: flex">
   <wd-skeleton :row-col="[{ size: '48px', type: 'circle' }]" />
@@ -52,12 +59,14 @@ const grid = [
 ```
 
 ## 图片组合骨架屏
+
 ```html
 <view>
   <wd-skeleton :row-col="imageGroup" />
   <wd-skeleton :custom-style="{ marginTop: '20px' }" :row-col="imageGroup" />
 </view>
 ```
+
 ```ts
 const imageGroup = [
   { height: '171px' }, 1, { width: '107px' }, 
@@ -66,7 +75,9 @@ const imageGroup = [
 ```
 
 ## 加载动画
+
 支持 `gradient`、`flashed`
+
 ```html
 <wd-skeleton animation="gradient" theme="paragraph" />
 <view style="display: flex">
@@ -75,10 +86,55 @@ const imageGroup = [
 </view>
 ```
 
+## 插槽内容
+
+可以通过插槽写入展示的内容，当请求结束，将loading设置为false，此时会隐藏骨架组件，同时展示插槽内容。
+
+```html
+<wd-skeleton 
+  :row-col="[
+    [
+      { width: '48px', height: '48px' },
+      { width: '48px', height: '48px' },
+      { width: '48px', height: '48px' },
+      { width: '48px', height: '48px' },
+      { width: '48px', height: '48px' }
+    ],
+    [
+      { width: '48px', height: '16px' },
+      { width: '48px', height: '16px' },
+      { width: '48px', height: '16px' },
+      { width: '48px', height: '16px' },
+      { width: '48px', height: '16px' }
+    ]
+  ]" 
+  :loading="showContent"
+>
+  <wd-grid>
+    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+    <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+  </wd-grid>
+</wd-skeleton>
+```
+
+```js
+const showContent = ref(true)
+```
+
 ## Attributes
-| 参数         | 说明                                                             | 类型    | 可选值                    | 默认值       | 最低版本 |
-| ------------ | ----------------------------------------------------------------| ------- | ------------------------- | ------------ | -------- |
-| theme       | 骨架图风格                                                         | SkeletonTheme | `text` `avatar` `paragraph` `image` | - | -        |
-| rowCol      | 用于设置行列数量、宽度高度、间距等<br />【示例一】`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。 <br />【示例二】`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。 <br />【示例三】`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 | SkeletonRowCol | -                         | -            | -        |
-| loading      | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容 | boolean | -                         | true           | -        |
-| animation      | 动画效果 | SkeletonAnimation | `gradient` `flashed`                        | -            | -        |
+
+| 参数      | 说明                                                                                                                                                                                                                                                                                                                           | 类型              | 可选值                              | 默认值 | 最低版本 |
+| --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------- | ----------------------------------- | ------ | -------- |
+| theme     | 骨架图风格                                                                                                                                                                                                                                                                                                                     | SkeletonTheme     | `text` `avatar` `paragraph` `image` | -      | -        |
+| rowCol    | 用于设置行列数量、宽度高度、间距等<br />【示例一】`[1, 1, 2]` 表示输出三行骨架图，第一行一列，第二行一列，第三行两列。 <br />【示例二】`[1, 1, { width: '100px' }]` 表示自定义第三行的宽度为 `100px`。 <br />【示例三】`[1, 2, [{ width, height }, { width, height, marginLeft }]]` 表示第三行有两列，且自定义宽度、高度和间距 | SkeletonRowCol    | -                                   | -      | -        |
+| loading   | 是否为加载状态，如果是则显示骨架图，如果不是则显示加载完成的内容                                                                                                                                                                                                                                                               | boolean           | -                                   | true   | -        |
+| animation | 动画效果                                                                                                                                                                                                                                                                                                                       | SkeletonAnimation | `gradient` `flashed`                | -      | -        |
+
+## Slots
+
+| name    | 说明                  | 最低版本         |
+| ------- | --------------------- | ---------------- |
+| default | loading结束后展示内容 | $LOWEST_VERSION$ |

src/pages/skeleton/Index.vue

@@ -31,15 +31,32 @@
         <wd-skeleton :custom-style="{ width: '100%', marginLeft: '12px' }" animation="flashed" theme="paragraph" />
       </view>
     </demo-block>
+    <demo-block title="插槽内容">
+      <view style="margin-bottom: 10px">切换显示</view>
+      <wd-switch v-model="showContent" />
+      <view style="height: 20px"></view>
+      <wd-skeleton :row-col="grid" :loading="showContent">
+        <wd-grid>
+          <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+          <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+          <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+          <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+          <wd-grid-item icon-size="32px" icon="picture" text="文字" />
+        </wd-grid>
+      </wd-skeleton>
+    </demo-block>
   </page-wraper>
 </template>
 <script lang="ts" setup>
+import { ref } from 'vue'
+import type { SkeletonRowCol, SkeletonProps } from '../../uni_modules/wot-design-uni/components/wd-skeleton/types'
+
 const themeList = [
   { title: '头像骨架屏', value: 'avatar' },
   { title: '图片骨架屏', value: 'image' },
   { title: '文本骨架屏', value: 'text' },
   { title: '段落骨架屏', value: 'paragraph' }
-]
+] as Array<{ title: string; value: SkeletonProps['theme'] }>
 const grid = [
   [
     { width: '48px', height: '48px' },
@@ -55,6 +72,8 @@ const grid = [
     { width: '48px', height: '16px' },
     { width: '48px', height: '16px' }
   ]
-]
-const imageGroup = [{ height: '171px' }, 1, { width: '107px' }, [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]]
+] as SkeletonRowCol[]
+const imageGroup = [{ height: '171px' }, 1, { width: '107px' }, [{ width: '93px' }, { width: '32px', marginLeft: '41px' }]] as SkeletonRowCol[]
+
+const showContent = ref(true)
 </script>

src/uni_modules/wot-design-uni/components/wd-skeleton/types.ts

@@ -1,4 +1,4 @@
-import type { PropType, CSSProperties, ExtractPropTypes } from 'vue'
+import type { PropType, ExtractPropTypes, CSSProperties } from 'vue'
 import { makeArrayProp, makeBooleanProp, makeStringProp } from '../common/props'
 
 type SkeletonTheme = 'text' | 'avatar' | 'paragraph' | 'image'
@@ -16,7 +16,7 @@ export type SkeletonRowColObj = {
   borderRadius?: string | number
   backgroundColor?: string
 }
-export type SkeletonRowCol = Array<number | SkeletonRowColObj | Array<SkeletonRowColObj>>
+export type SkeletonRowCol = number | SkeletonRowColObj | Array<SkeletonRowColObj>
 export type SkeletonThemeVars = {
   notifyPadding?: string
   notifyFontSize?: string

src/uni_modules/wot-design-uni/components/wd-skeleton/wd-skeleton.vue

@@ -9,11 +9,14 @@
 -->
 <template>
   <view :class="`wd-skeleton ${customClass}`" :style="customStyle">
-    <view class="wd-skeleton__content" v-if="parsedRowCols.length">
+    <view class="wd-skeleton__content" v-if="show">
       <view class="wd-skeleton__row" v-for="(row, index) of parsedRowCols" :key="`row-${index}`">
         <view v-for="(col, idx) of row" :key="`col-${idx}`" :class="col.class" :style="col.style" />
       </view>
     </view>
+    <view v-else>
+      <slot />
+    </view>
   </view>
 </template>
 <script lang="ts">
@@ -45,7 +48,7 @@ const themeMap = {
   paragraph: [1, 1, 1, { width: '55%' }]
 }
 const props = defineProps(skeletonProps)
-const rowCols = ref<SkeletonRowCol>([])
+const rowCols = ref<SkeletonRowCol[]>([])
 
 const parsedRowCols = computed(() => {
   return rowCols.value.map((item) => {
@@ -107,6 +110,8 @@ watch(
   },
   { immediate: true }
 )
+
+const show = computed(() => props.loading == undefined || props.loading === true)
 </script>
 
 <style lang="scss" scoped>

src/uni_modules/wot-design-uni/global.d.ts

@@ -96,6 +96,7 @@ declare module '@vue/runtime-core' {
     WdForm: typeof import('./components/wd-form/wd-form.vue')['default']
     WdTextarea: typeof import('./components/wd-textarea/wd-textarea.vue')['default']
     WdBacktop: typeof import('./components/wd-backtop/wd-backtop.vue')['default']
+    WdSkeleton: typeof import('./components/wd-skeleton/wd-skeleton.vue')['default']
     WdIndexBar: typeof import('./components/wd-index-bar/wd-index-bar.vue')['default']
     WdIndexAnchor: typeof import('./components/wd-index-anchor/wd-index-anchor.vue')['default']
   }