mirror of
https://gitee.com/wot-design-uni/wot-design-uni.git
synced 2025-12-06 17:18:40 +08:00
feat: ✨ skeleton添加默认内容插槽 (#322)
This commit is contained in:
QingHuan
GitHub
parent
00ffa9f3e5
commit
9a68c477db
@ -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$ |
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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>
|
||||
|
||||
1
src/uni_modules/wot-design-uni/global.d.ts
vendored
1
src/uni_modules/wot-design-uni/global.d.ts
vendored
@ -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']
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user