From 47759ebb437e6f83a4b3f9c6b1af5ff11c1c46bf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Sat, 13 Nov 2021 22:27:57 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(Skeleton):=20=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E6=8B=BC=E6=8E=A5=E6=A8=A1=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/skeleton/src/skeleton-types.ts | 14 ++- .../devui/skeleton/src/skeleton.scss | 110 ++++++++++++------ .../devui-vue/devui/skeleton/src/skeleton.tsx | 101 ++++++++++++---- .../docs/components/skeleton/index.md | 80 +++++++++---- 4 files changed, 223 insertions(+), 82 deletions(-) diff --git a/packages/devui-vue/devui/skeleton/src/skeleton-types.ts b/packages/devui-vue/devui/skeleton/src/skeleton-types.ts index e5e0bae4..84b874ab 100644 --- a/packages/devui-vue/devui/skeleton/src/skeleton-types.ts +++ b/packages/devui-vue/devui/skeleton/src/skeleton-types.ts @@ -36,7 +36,7 @@ export const skeletonProps = { default: '40px' }, avatarShape: { - value: String as PropType<'round' | 'square'>, + type: String as PropType<'round' | 'square'>, default: 'round' }, titleWidth: { @@ -46,6 +46,18 @@ export const skeletonProps = { rowWidth: { type: [Number, String, Array] as PropType>, default: ['100%'] + }, + shape: { + type: String as PropType<'avatar' | 'image' | 'title' | 'paragraph' | 'button'>, + }, + width: { + type: [String, Number] as PropType + }, + height: { + type: [String, Number] as PropType + }, + style:{ + type: String } } as const diff --git a/packages/devui-vue/devui/skeleton/src/skeleton.scss b/packages/devui-vue/devui/skeleton/src/skeleton.scss index 39c95231..52ab86a0 100644 --- a/packages/devui-vue/devui/skeleton/src/skeleton.scss +++ b/packages/devui-vue/devui/skeleton/src/skeleton.scss @@ -1,10 +1,10 @@ -@import '../../styles-var/devui-var.scss'; +@import "../../styles-var/devui-var.scss"; .devui-skeleton { display: flex; justify-content: space-between; - .devui-skeleton__avatar { + &__avatar { display: flex; flex: 1; justify-content: center; @@ -17,41 +17,88 @@ } } - .devui-skeleton__item__group { + &__group { flex: 11; + } - .devui-skeleton__item, - .devui-skeleton__title { - width: 100%; - height: 16px; - background-color: #f2f2f2; - } + &__item, + &__title { + width: 100%; + height: 16px; + background-color: #f2f2f2; + } - .devui-skeleton__title { - margin-top: 24px; - } + &__title { + margin-top: 24px; + } - .devui-skeleton__paragraph { - margin-top: 12px; - } + &__paragraph { + margin-top: 12px; + } - .devui-skeleton__item:last-child { - width: 60%; - } + &__item:last-child { + width: 60%; + } + + &__avatar > .avatar, + &__group > div > &__item { + margin-top: 12px; } } -.devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__title, -.devui-skeleton-animated > .devui-skeleton__avatar > .avatar, -.devui-skeleton-animated > .devui-skeleton__item__group > div > .devui-skeleton__item { - @keyframes skeletonLoading { - to { - background-position-x: -20%; - } +.devui-skeleton__shape__avatar, +.devui-skeleton__shape__image, +.devui-skeleton__shape__title, +.devui-skeleton__shape__button { + background-color: #f2f2f2; +} +.devui-skeleton__shape__avatar { + width: 40px; + height: 40px; + background-color: #f2f2f2; +} +.devui-skeleton__shape__image { + width: 200px; + height: 150px; + border-radius: 4px; +} +.devui-skeleton__shape__title { + width: 40%; + height: 24px; +} +.devui-skeleton__shape__paragraph { + &__item { + background-color: #f2f2f2; + width: 100%; + height: 16px; + margin-bottom: 10px; } - background: - linear-gradient( + &__item:last-child { + width: 60%; + } +} +.devui-skeleton__shape__button { + width: 115px; + height: 32px; +} + +@keyframes skeletonLoading { + to { + background-position-x: -20%; + } +} + +.devui-skeleton__animated > .devui-skeleton__group > .devui-skeleton__title, +.devui-skeleton__animated > .devui-skeleton__group > div > .devui-skeleton__item, +.devui-skeleton__animated > .devui-skeleton__avatar > .avatar, +.devui-skeleton__animated .devui-skeleton__shape__avatar, +.devui-skeleton__animated.devui-skeleton__shape__avatar, +.devui-skeleton__animated.devui-skeleton__shape__image, +.devui-skeleton__animated.devui-skeleton__shape__title, +.devui-skeleton__animated.devui-skeleton__shape__paragraph > .devui-skeleton__shape__paragraph__item, +.devui-skeleton__animated.devui-skeleton__shape__button { + background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.5) 50%, @@ -62,12 +109,3 @@ background-position-x: 180%; animation: 2s skeletonLoading ease-in-out infinite; } - -.devui-skeleton__avatar > .avatar, -.devui-skeleton__item__group > div > .devui-skeleton__item { - margin-top: 12px; -} - -.devui-skeleton-animated > .devui-skeleton__avatar > .avatar { - animation-delay: 0.1s; -} diff --git a/packages/devui-vue/devui/skeleton/src/skeleton.tsx b/packages/devui-vue/devui/skeleton/src/skeleton.tsx index 0aad3447..64c810ff 100644 --- a/packages/devui-vue/devui/skeleton/src/skeleton.tsx +++ b/packages/devui-vue/devui/skeleton/src/skeleton.tsx @@ -10,7 +10,7 @@ export default defineComponent({ const { slots } = ctx; function renderAnimate(isAnimated) { - return isAnimated ? 'devui-skeleton-animated' : '' + return isAnimated ? 'devui-skeleton__animated' : '' } function renderBorderRadius(isRound) { return isRound ? 'border-radius: 1em;' : '' @@ -56,7 +56,53 @@ export default defineComponent({ }) } } + + function renderShapeParagraph(rowNum, rowWidth, round) { + const arr = [] + + function pushIntoArray(type) { + for (let index = 0; index < rowNum; index++) { + arr.push({ width: type }) + } + } + (function handleRowWidth() { + if (rowWidth instanceof Array) { + for (let index = 0; index < rowNum; index++) { + if (rowWidth[index]) { + switch (typeof rowWidth[index]) { + case 'string': + arr.push({ width: rowWidth[index] }) + break + case 'number': + arr.push({ width: `${rowWidth[index]}px` }) + } + } else { + arr.push({ width: 1 }) + } + } + } else { + switch (typeof rowWidth) { + case 'string': + pushIntoArray(rowWidth) + break + case 'number': + pushIntoArray(`${rowWidth}px`) + break + } + } + })() + + return
{ + arr.map(item => { + return
+ }) + }
+ } + function renderAvatarStyle(avatarSize, avatarShape) { + function renderAvatarShape(avatarShape) { + return avatarShape === 'square' ? '' : 'border-radius:50%;' + } function renderAvatarSize(avatarSize) { switch (typeof avatarSize) { case 'string': @@ -65,9 +111,6 @@ export default defineComponent({ return `width:${avatarSize}px;height:${avatarSize}px;` } } - function renderAvatarShape(avatarShape) { - return avatarShape === 'square' ? '' : 'border-radius:50%;' - } return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape)) } @@ -86,26 +129,42 @@ export default defineComponent({ return (renderTitleWidth(titleWidth) + renderBorderRadius(isRound) + renderTitleVisibility(isVisible)) } - function renderSkeleton(isLoading) { - if (isLoading) { - return <> -
-
-
-
-
- {renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)} -
- - } - - return <>{slots.default?.()} + function renderDefaultSkeleton() { + return <> +
+
+
+
+
+ {renderParagraph(props.paragraph, props.row, props.rowWidth, props.round)} +
+ } return () => { - return
- {renderSkeleton(props.loading)} -
+ if (props.loading) { + if (props.shape) { + switch (props.shape) { + case 'avatar': + return <> +
+ + case 'paragraph': + return <> + {renderShapeParagraph(props.row, props.rowWidth, props.round)} + + default: + return <> +
+ + } + } else { + return
+ {renderDefaultSkeleton()} +
+ } + } + return <>{slots.default?.()} } } }) diff --git a/packages/devui-vue/docs/components/skeleton/index.md b/packages/devui-vue/docs/components/skeleton/index.md index 2aae393d..a230708d 100644 --- a/packages/devui-vue/docs/components/skeleton/index.md +++ b/packages/devui-vue/docs/components/skeleton/index.md @@ -1,10 +1,13 @@ # Skeleton 骨架屏 + 用于在内容加载过程中展示一组占位图形。 ### 何时使用 + 在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。 ### 基本用法 + 最基本的占位效果。 :::demo @@ -14,10 +17,12 @@ ``` + ::: ### 复杂组合 + :::demo ```vue @@ -98,36 +103,63 @@ export default defineComponent({ } ``` + ::: -### API -d-skeleton -| 参数 | 类型 | 默认 | 说明 | -| :-----: | :-------: | :-----: | :-------------------------------------------- | -| loading | `boolean` | `true` | 是否显示骨架屏，传 `false` 时会展示子组件内容 | -| animate | `boolean` | `true` | 是否开启动画 | -| avatar | `boolean` | `false` | 是否显示头像占位图 | -| title | `boolean` | `true` | 是否显示标题占位图 | -| paragraph | `boolean` | `true` | 是否显示段落占位图 | -| round | `boolean` | `false` | 是否将标题和段落显示为圆角风格 | +### 拼接模式 + +提供细粒度的骨架屏元素，给予开发者更灵活的定制能力。注意样式需通过 +:::demo + +```vue + +``` + +::: + +### d-skeleton Props + +| 参数 | 类型 | 默认 | 说明 | +| :-------: | :-------: | :-----: | :-------------------------------------------- | +| loading | `boolean` | `true` | 是否显示骨架屏，传 `false` 时会展示子组件内容 | +| animate | `boolean` | `true` | 是否开启动画 | +| avatar | `boolean` | `false` | 是否显示头像占位图 | +| title | `boolean` | `true` | 是否显示标题占位图 | +| paragraph | `boolean` | `true` | 是否显示段落占位图 | +| round | `boolean` | `false` | 是否将标题和段落显示为圆角风格 | + +### d-skeleton__avatar Props + +| 参数 | 类型 | 默认 | 说明 | +| :----------: | :----------------: | :-----: | :------------------------------- | +| avatar-size | `number \| string` | `40px` | 头像占位图大小 | +| avatar-shape | `string` | `round` | 头像占位图形状，可选值为`square` | -d-skeleton-avatar-props -| 参数 | 类型 | 默认 | 说明 | -| :-----: | :-------: | :-----: | :-------------------------------------------- | -| avatar-size | `number \| string` | `40px` | 头像占位图大小 | -| avatar-shape | `string` | `round` | 头像占位图形状，可选值为`square` | +### d-skeleton__title Props +| 参数 | 类型 | 默认 | 说明 | +| :---------: | :----------------: | :---: | :------------------- | +| title-width | `number \| string` | `40%` | 设置标题占位图的宽度 | -d-skeleton-title-props -| 参数 | 类型 | 默认 | 说明 | -| :-----: | :-------: | :-----: | :-------------------------------------------- | -| title-width | `number \| string` | `40%` | 设置标题占位图的宽度 | +### d-skeleton__paragraph Props +| 参数 | 类型 | 默认 | 说明 | +| :-------: | :----------------------------------------: | :--------: | :----------------------------------------- | +| row | `number` | `0` | 段落占位图行数 | +| row-width | `number \| string \| (number \| string)[]` | `["100%"]` | 段落占位图宽度，可传数组来设置每一行的宽度 | -d-skeleton-paragraph-props -| 参数 | 类型 | 默认 | 说明 | -| :-----: | :-------: | :-----: | :-------------------------------------------- | -| row | `number` | `0` | 段落占位图行数 | -| row-width | `number \| string \| (number \| string)[]` | `["100%"]` | 段落占位图宽度，可传数组来设置每一行的宽度 | +### 拼接模式 +| 参数 | 类型 | 默认 | 说明 | +| :-----: | :-------: | :----: | :------------------------------------------------------ | +| shape | `string` | - | 可选值为`avatar`,`image`,`title`,`paragraph`,`button`。 | +| animate | `boolean` | `true` | 是否开启动画 | +| style | `string` | - | 将 css 样式以字符串的形式传入 | +> avatar 与 paragraph 的 API 与默认模式相同； \ No newline at end of file -- Gitee From 9f693724cd1b6764f33416e17b89ddb7a014c127 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 18 Nov 2021 09:49:28 +0800 Subject: [PATCH 2/3] =?UTF-8?q?feat(Skeleton):=20=E6=8B=86=E5=88=86?= =?UTF-8?q?=E5=87=BA=20DSkeletonItem?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/devui-vue/devui/skeleton/index.ts | 4 +- .../devui/skeleton/src/item/item-types.ts | 64 +++++++++++++ .../devui/skeleton/src/item/item.scss | 62 ++++++++++++ .../devui/skeleton/src/item/item.tsx | 94 +++++++++++++++++++ .../devui/skeleton/src/skeleton-types.ts | 12 --- .../devui/skeleton/src/skeleton.scss | 44 +-------- .../devui-vue/devui/skeleton/src/skeleton.tsx | 65 +------------ .../docs/components/skeleton/index.md | 10 +- 8 files changed, 232 insertions(+), 123 deletions(-) create mode 100644 packages/devui-vue/devui/skeleton/src/item/item-types.ts create mode 100644 packages/devui-vue/devui/skeleton/src/item/item.scss create mode 100644 packages/devui-vue/devui/skeleton/src/item/item.tsx diff --git a/packages/devui-vue/devui/skeleton/index.ts b/packages/devui-vue/devui/skeleton/index.ts index 6bb2132b..e27275e6 100644 --- a/packages/devui-vue/devui/skeleton/index.ts +++ b/packages/devui-vue/devui/skeleton/index.ts @@ -1,11 +1,13 @@ import type { App } from 'vue' import Skeleton from './src/skeleton' +import SkeletonItem from './src/item/item' Skeleton.install = function(app: App): void { app.component(Skeleton.name, Skeleton) + app.component(SkeletonItem.name, SkeletonItem) } -export { Skeleton } +export { Skeleton,SkeletonItem } export default { title: 'Skeleton 骨架屏', diff --git a/packages/devui-vue/devui/skeleton/src/item/item-types.ts b/packages/devui-vue/devui/skeleton/src/item/item-types.ts new file mode 100644 index 00000000..066da628 --- /dev/null +++ b/packages/devui-vue/devui/skeleton/src/item/item-types.ts @@ -0,0 +1,64 @@ +import type { ExtractPropTypes, PropType } from 'vue' + +export type ModelValue = number | string + +export const itemProps = { + row: { + type: Number, + default: 0 + }, + animate: { + type: Boolean, + default: true + }, + round: { + type: Boolean, + default: false + }, + loading: { + type: Boolean, + default: true + }, + avatar: { + type: Boolean, + default: false + }, + title: { + type: Boolean, + default: true + }, + paragraph: { + type: Boolean, + default: true + }, + avatarSize: { + type: [String, Number] as PropType, + default: '40px' + }, + avatarShape: { + type: String as PropType<'round' | 'square'>, + default: 'round' + }, + titleWidth: { + type: [String, Number] as PropType, + default: '40%' + }, + rowWidth: { + type: [Number, String, Array] as PropType>, + default: ['100%'] + }, + shape: { + type: String as PropType<'avatar' | 'image' | 'title' | 'paragraph' | 'button'>, + }, + width: { + type: [String, Number] as PropType + }, + height: { + type: [String, Number] as PropType + }, + style:{ + type: String + } +} as const + +export type ItemProps = ExtractPropTypes diff --git a/packages/devui-vue/devui/skeleton/src/item/item.scss b/packages/devui-vue/devui/skeleton/src/item/item.scss new file mode 100644 index 00000000..8090ea49 --- /dev/null +++ b/packages/devui-vue/devui/skeleton/src/item/item.scss @@ -0,0 +1,62 @@ +@import "../../../styles-var/devui-var.scss"; + +.devui-skeleton__shape__avatar, +.devui-skeleton__shape__image, +.devui-skeleton__shape__title, +.devui-skeleton__shape__button { + background-color: #f2f2f2; +} +.devui-skeleton__shape__avatar { + width: 40px; + height: 40px; + background-color: #f2f2f2; +} +.devui-skeleton__shape__image { + width: 200px; + height: 150px; + border-radius: 4px; +} +.devui-skeleton__shape__title { + width: 40%; + height: 24px; +} +.devui-skeleton__shape__paragraph { + &__item { + background-color: #f2f2f2; + width: 100%; + height: 16px; + margin-bottom: 10px; + } + + &__item:last-child { + width: 60%; + } +} +.devui-skeleton__shape__button { + width: 115px; + height: 32px; +} + +@keyframes skeletonLoading { + to { + background-position-x: -20%; + } +} + +.devui-skeleton__animated .devui-skeleton__shape__avatar, +.devui-skeleton__animated.devui-skeleton__shape__avatar, +.devui-skeleton__animated.devui-skeleton__shape__image, +.devui-skeleton__animated.devui-skeleton__shape__title, +.devui-skeleton__animated.devui-skeleton__shape__paragraph > .devui-skeleton__shape__paragraph__item, +.devui-skeleton__animated.devui-skeleton__shape__button { + background: linear-gradient( + 100deg, + rgba(255, 255, 255, 0) 40%, + rgba(255, 255, 255, 0.5) 50%, + rgba(255, 255, 255, 0) 60% + ) + #f2f2f2; + background-size: 200% 100%; + background-position-x: 180%; + animation: 2s skeletonLoading ease-in-out infinite; +} diff --git a/packages/devui-vue/devui/skeleton/src/item/item.tsx b/packages/devui-vue/devui/skeleton/src/item/item.tsx new file mode 100644 index 00000000..0731ed5a --- /dev/null +++ b/packages/devui-vue/devui/skeleton/src/item/item.tsx @@ -0,0 +1,94 @@ +import './item.scss' + +import { defineComponent } from 'vue' +import { itemProps, ItemProps } from './item-types' + +export default defineComponent({ + name: 'DSkeletonItem', + props: itemProps, + setup(props: ItemProps, ctx) { + const { slots } = ctx; + + function renderAnimate(isAnimated) { + return isAnimated ? 'devui-skeleton__animated' : '' + } + + function renderShapeParagraph(rowNum, rowWidth, round) { + const arr = [] + + function pushIntoArray(type) { + for (let index = 0; index < rowNum; index++) { + arr.push({ width: type }) + } + } + (function handleRowWidth() { + if (rowWidth instanceof Array) { + for (let index = 0; index < rowNum; index++) { + if (rowWidth[index]) { + switch (typeof rowWidth[index]) { + case 'string': + arr.push({ width: rowWidth[index] }) + break + case 'number': + arr.push({ width: `${rowWidth[index]}px` }) + } + } else { + arr.push({ width: 1 }) + } + } + } else { + switch (typeof rowWidth) { + case 'string': + pushIntoArray(rowWidth) + break + case 'number': + pushIntoArray(`${rowWidth}px`) + break + } + } + })() + + return
{ + arr.map(item => { + return
+ }) + }
+ } + + function renderAvatarStyle(avatarSize, avatarShape) { + function renderAvatarShape(avatarShape) { + return avatarShape === 'square' ? '' : 'border-radius:50%;' + } + function renderAvatarSize(avatarSize) { + switch (typeof avatarSize) { + case 'string': + return `width:${avatarSize};height:${avatarSize};` + case 'number': + return `width:${avatarSize}px;height:${avatarSize}px;` + } + } + + return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape)) + } + + return () => { + if (props.loading && props.shape) { + switch (props.shape) { + case 'avatar': + return <> +
+ + case 'paragraph': + return <> + {renderShapeParagraph(props.row, props.rowWidth, props.round)} + + default: + return <> +
+ + } + } + return <>{slots.default?.()} + } + } +}) diff --git a/packages/devui-vue/devui/skeleton/src/skeleton-types.ts b/packages/devui-vue/devui/skeleton/src/skeleton-types.ts index 84b874ab..5e8e5f37 100644 --- a/packages/devui-vue/devui/skeleton/src/skeleton-types.ts +++ b/packages/devui-vue/devui/skeleton/src/skeleton-types.ts @@ -46,18 +46,6 @@ export const skeletonProps = { rowWidth: { type: [Number, String, Array] as PropType>, default: ['100%'] - }, - shape: { - type: String as PropType<'avatar' | 'image' | 'title' | 'paragraph' | 'button'>, - }, - width: { - type: [String, Number] as PropType - }, - height: { - type: [String, Number] as PropType - }, - style:{ - type: String } } as const diff --git a/packages/devui-vue/devui/skeleton/src/skeleton.scss b/packages/devui-vue/devui/skeleton/src/skeleton.scss index 52ab86a0..28bccd98 100644 --- a/packages/devui-vue/devui/skeleton/src/skeleton.scss +++ b/packages/devui-vue/devui/skeleton/src/skeleton.scss @@ -46,42 +46,6 @@ } } -.devui-skeleton__shape__avatar, -.devui-skeleton__shape__image, -.devui-skeleton__shape__title, -.devui-skeleton__shape__button { - background-color: #f2f2f2; -} -.devui-skeleton__shape__avatar { - width: 40px; - height: 40px; - background-color: #f2f2f2; -} -.devui-skeleton__shape__image { - width: 200px; - height: 150px; - border-radius: 4px; -} -.devui-skeleton__shape__title { - width: 40%; - height: 24px; -} -.devui-skeleton__shape__paragraph { - &__item { - background-color: #f2f2f2; - width: 100%; - height: 16px; - margin-bottom: 10px; - } - - &__item:last-child { - width: 60%; - } -} -.devui-skeleton__shape__button { - width: 115px; - height: 32px; -} @keyframes skeletonLoading { to { @@ -91,13 +55,7 @@ .devui-skeleton__animated > .devui-skeleton__group > .devui-skeleton__title, .devui-skeleton__animated > .devui-skeleton__group > div > .devui-skeleton__item, -.devui-skeleton__animated > .devui-skeleton__avatar > .avatar, -.devui-skeleton__animated .devui-skeleton__shape__avatar, -.devui-skeleton__animated.devui-skeleton__shape__avatar, -.devui-skeleton__animated.devui-skeleton__shape__image, -.devui-skeleton__animated.devui-skeleton__shape__title, -.devui-skeleton__animated.devui-skeleton__shape__paragraph > .devui-skeleton__shape__paragraph__item, -.devui-skeleton__animated.devui-skeleton__shape__button { +.devui-skeleton__animated > .devui-skeleton__avatar > .avatar { background: linear-gradient( 100deg, rgba(255, 255, 255, 0) 40%, diff --git a/packages/devui-vue/devui/skeleton/src/skeleton.tsx b/packages/devui-vue/devui/skeleton/src/skeleton.tsx index 64c810ff..d69bd02a 100644 --- a/packages/devui-vue/devui/skeleton/src/skeleton.tsx +++ b/packages/devui-vue/devui/skeleton/src/skeleton.tsx @@ -57,48 +57,6 @@ export default defineComponent({ }
} - function renderShapeParagraph(rowNum, rowWidth, round) { - const arr = [] - - function pushIntoArray(type) { - for (let index = 0; index < rowNum; index++) { - arr.push({ width: type }) - } - } - (function handleRowWidth() { - if (rowWidth instanceof Array) { - for (let index = 0; index < rowNum; index++) { - if (rowWidth[index]) { - switch (typeof rowWidth[index]) { - case 'string': - arr.push({ width: rowWidth[index] }) - break - case 'number': - arr.push({ width: `${rowWidth[index]}px` }) - } - } else { - arr.push({ width: 1 }) - } - } - } else { - switch (typeof rowWidth) { - case 'string': - pushIntoArray(rowWidth) - break - case 'number': - pushIntoArray(`${rowWidth}px`) - break - } - } - })() - - return
{ - arr.map(item => { - return
- }) - }
- } - function renderAvatarStyle(avatarSize, avatarShape) { function renderAvatarShape(avatarShape) { return avatarShape === 'square' ? '' : 'border-radius:50%;' @@ -143,26 +101,9 @@ export default defineComponent({ return () => { if (props.loading) { - if (props.shape) { - switch (props.shape) { - case 'avatar': - return <> -
- - case 'paragraph': - return <> - {renderShapeParagraph(props.row, props.rowWidth, props.round)} - - default: - return <> -
- - } - } else { - return
- {renderDefaultSkeleton()} -
- } + return
+ {renderDefaultSkeleton()} +
} return <>{slots.default?.()} } diff --git a/packages/devui-vue/docs/components/skeleton/index.md b/packages/devui-vue/docs/components/skeleton/index.md index a230708d..0cde6cfd 100644 --- a/packages/devui-vue/docs/components/skeleton/index.md +++ b/packages/devui-vue/docs/components/skeleton/index.md @@ -113,11 +113,11 @@ export default defineComponent({ ```vue ``` -- Gitee From dfa1ad79eef3ed1128f3961e2fe014ada7c69e04 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 18 Nov 2021 16:45:01 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(skeleton-item):=20=E8=A7=A3=E5=86=B3=20?= =?UTF-8?q?attrs=20=E4=BC=A0=E5=85=A5=E7=9A=84=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../devui/skeleton/src/item/item-types.ts | 25 ------------------- .../devui/skeleton/src/item/item.tsx | 18 ++++--------- .../docs/components/skeleton/index.md | 16 +++++++----- 3 files changed, 15 insertions(+), 44 deletions(-) diff --git a/packages/devui-vue/devui/skeleton/src/item/item-types.ts b/packages/devui-vue/devui/skeleton/src/item/item-types.ts index 066da628..e1a9324f 100644 --- a/packages/devui-vue/devui/skeleton/src/item/item-types.ts +++ b/packages/devui-vue/devui/skeleton/src/item/item-types.ts @@ -19,22 +19,6 @@ export const itemProps = { type: Boolean, default: true }, - avatar: { - type: Boolean, - default: false - }, - title: { - type: Boolean, - default: true - }, - paragraph: { - type: Boolean, - default: true - }, - avatarSize: { - type: [String, Number] as PropType, - default: '40px' - }, avatarShape: { type: String as PropType<'round' | 'square'>, default: 'round' @@ -49,15 +33,6 @@ export const itemProps = { }, shape: { type: String as PropType<'avatar' | 'image' | 'title' | 'paragraph' | 'button'>, - }, - width: { - type: [String, Number] as PropType - }, - height: { - type: [String, Number] as PropType - }, - style:{ - type: String } } as const diff --git a/packages/devui-vue/devui/skeleton/src/item/item.tsx b/packages/devui-vue/devui/skeleton/src/item/item.tsx index 0731ed5a..ddadd8b0 100644 --- a/packages/devui-vue/devui/skeleton/src/item/item.tsx +++ b/packages/devui-vue/devui/skeleton/src/item/item.tsx @@ -48,27 +48,19 @@ export default defineComponent({ } })() - return
{ + return
{ arr.map(item => { return
}) }
} - function renderAvatarStyle(avatarSize, avatarShape) { + function renderAvatarStyle(avatarShape) { function renderAvatarShape(avatarShape) { return avatarShape === 'square' ? '' : 'border-radius:50%;' } - function renderAvatarSize(avatarSize) { - switch (typeof avatarSize) { - case 'string': - return `width:${avatarSize};height:${avatarSize};` - case 'number': - return `width:${avatarSize}px;height:${avatarSize}px;` - } - } - return (renderAvatarSize(avatarSize) + renderAvatarShape(avatarShape)) + return (renderAvatarShape(avatarShape)) } return () => { @@ -76,7 +68,7 @@ export default defineComponent({ switch (props.shape) { case 'avatar': return <> -
+
case 'paragraph': return <> @@ -84,7 +76,7 @@ export default defineComponent({ default: return <> -
+
} } diff --git a/packages/devui-vue/docs/components/skeleton/index.md b/packages/devui-vue/docs/components/skeleton/index.md index 0cde6cfd..2328d551 100644 --- a/packages/devui-vue/docs/components/skeleton/index.md +++ b/packages/devui-vue/docs/components/skeleton/index.md @@ -108,12 +108,12 @@ export default defineComponent({ ### 拼接模式 -提供细粒度的骨架屏元素，给予开发者更灵活的定制能力。注意样式需通过 +提供细粒度的骨架屏元素，给予开发者更灵活的定制能力。 :::demo ```vue