From 21e7fdab5596df84b3d32b1eb2e3231b2b3722fc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Wed, 29 Sep 2021 22:38:23 +0800 Subject: [PATCH 01/10] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E7=89=88=20skeleton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/index.ts | 18 +++++++++++ devui/skeleton/src/skeleton-types.ts | 18 +++++++++++ devui/skeleton/src/skeleton.scss | 34 +++++++++++++++++++++ devui/skeleton/src/skeleton.tsx | 24 +++++++++++++++ devui/vue-devui | 1 + docs/.vitepress/config/sidebar.ts | 1 + docs/components/skeleton/index.md | 45 ++++++++++++++++++++++++++++ 7 files changed, 141 insertions(+) create mode 100644 devui/skeleton/index.ts create mode 100644 devui/skeleton/src/skeleton-types.ts create mode 100644 devui/skeleton/src/skeleton.scss create mode 100644 devui/skeleton/src/skeleton.tsx create mode 160000 devui/vue-devui create mode 100644 docs/components/skeleton/index.md diff --git a/devui/skeleton/index.ts b/devui/skeleton/index.ts new file mode 100644 index 00000000..1e40f962 --- /dev/null +++ b/devui/skeleton/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Skeleton from './src/skeleton' + +Skeleton.install = function(app: App): void { + app.component(Skeleton.name, Skeleton) +} + +export { Skeleton } + +export default { + title: 'Skeleton 骨架屏', + category: '数据展示', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Skeleton as any) + } +} diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts new file mode 100644 index 00000000..e3ba9798 --- /dev/null +++ b/devui/skeleton/src/skeleton-types.ts @@ -0,0 +1,18 @@ +import type { ExtractPropTypes } from 'vue' + +export const skeletonProps = { + row: { + type: Number || String, + default: 0 + }, + animate:{ + type: Boolean, + default: true + }, + loading:{ + type: Boolean, + default: true + } +} as const + +export type SkeletonProps = ExtractPropTypes diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss new file mode 100644 index 00000000..c5765dcb --- /dev/null +++ b/devui/skeleton/src/skeleton.scss @@ -0,0 +1,34 @@ +@import "../../style/mixins/index"; +@import "../../style/theme/color"; +@import "../../style/theme/shadow"; +@import "../../style/theme/corner"; +@import "../../style/theme/font"; + +.d-skeleton { + .d-skeleton__item { + width: 100%; + height: 16px; + background: #f2f2f2; + display: inline-block; + border-radius: 4px; + } + .d-skeleton__item:first-child { + width: 33%; + } + .d-skeleton__item:last-child { + width: 61%; + } +} + +.d-skeleton-animated { + .d-skeleton__item { + background-color: #ccc; + background: linear-gradient( + 100deg, + rgba(255, 255, 255, 0) 40%, + rgba(255, 255, 255, 0.5) 50%, + rgba(255, 255, 255, 0) 60% + ) + #ccc; + } +} diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx new file mode 100644 index 00000000..7dcfa253 --- /dev/null +++ b/devui/skeleton/src/skeleton.tsx @@ -0,0 +1,24 @@ +import './skeleton.scss' + +import { defineComponent } from 'vue' +import { skeletonProps, SkeletonProps } from './skeleton-types' + +export default defineComponent({ + name: 'DSkeleton', + props: skeletonProps, + emits: [], + setup(props: SkeletonProps, ctx) { + let arr = [] + for (let index = 0; index < props.row; index++) { + arr.push(1) + } + return () => { + return
{ + arr.map(() => { + return
+ }) + } +
+ } + } +}) diff --git a/devui/vue-devui b/devui/vue-devui new file mode 160000 index 00000000..99a96e63 --- /dev/null +++ b/devui/vue-devui @@ -0,0 +1 @@ +Subproject commit 99a96e63021ee4c1970a9c211771330d2ca210af diff --git a/docs/.vitepress/config/sidebar.ts b/docs/.vitepress/config/sidebar.ts index d9d3e0cd..a9714452 100644 --- a/docs/.vitepress/config/sidebar.ts +++ b/docs/.vitepress/config/sidebar.ts @@ -83,6 +83,7 @@ const sidebar = { { text: 'Progress 进度条', link: '/components/progress/', status: '已完成' }, { text: 'QuadrantDiagram 象限图', link: '/components/quadrant-diagram/' }, { text: 'Rate 等级评估', link: '/components/rate/', status: '已完成' }, + { text: 'Skeleton 骨架屏', link: '/components/skeleton/', status: '开发中' }, { text: 'Tag 标签', link: '/components/tag/' }, { text: 'Tree 树', link: '/components/tree/' }, ] diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md new file mode 100644 index 00000000..fbf2cfaf --- /dev/null +++ b/docs/components/skeleton/index.md @@ -0,0 +1,45 @@ +# Skeleton 骨架屏 +用于在内容加载过程中展示一组占位图形。 + +### 何时使用 +在需要等待加载内容的位置设置一个骨架屏，某些场景下比 Loading 的视觉效果更好。 + +### 基本用法 +基础的骨架效果, 通过 `row` 属性配置占位段落行数。 + +:::demo + +```vue + +``` +::: + +### 展示子组件 +将 loading 属性设置成 false 表示内容加载完成，此时会隐藏占位图，并显示 Skeleton 的子组件。 + +:::demo + +```vue + +``` +::: + +### API +d-skeleton 参数 +| 参数 | 类型 | 默认 | 说明 | +| :-----: | :-------: | :----: | :-------------------------------------------- | +| row | `number` | `0` | 段落占位图行数 | +| loading | `boolean` | `true` | 是否显示骨架屏，传 `false` 时会展示子组件内容 | +| animate | `boolean` | `true` | 是否开启动画 | +| | | | | +| | | | | +| | | | | +| | | | | +| | | | | +| | | | | -- Gitee From 685d04d4c1ec848f65aa1298d28f9710a7941607 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Wed, 29 Sep 2021 22:44:46 +0800 Subject: [PATCH 02/10] =?UTF-8?q?style:=20=E5=AE=9E=E7=8E=B0=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=E6=95=88=E6=9E=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.scss | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index c5765dcb..876b7e02 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -30,5 +30,13 @@ rgba(255, 255, 255, 0) 60% ) #ccc; + background-size: 200% 100%; + background-position-x: 180%; + animation: 1.4s loading ease-in-out infinite; + } +} +@keyframes loading { + to { + background-position-x: -20%; } } -- Gitee From 635a0d6182608f2612d86d17041f985f75c0f196 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 30 Sep 2021 10:18:42 +0800 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0=E5=9F=BA?= =?UTF-8?q?=E7=A1=80=E7=89=88=20skeleton?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton-types.ts | 4 +++ devui/skeleton/src/skeleton.scss | 54 +++++++++++++++++++--------- devui/skeleton/src/skeleton.tsx | 20 ++++++++--- docs/components/skeleton/index.md | 40 ++++++++++++++------- 4 files changed, 84 insertions(+), 34 deletions(-) diff --git a/devui/skeleton/src/skeleton-types.ts b/devui/skeleton/src/skeleton-types.ts index e3ba9798..5774b491 100644 --- a/devui/skeleton/src/skeleton-types.ts +++ b/devui/skeleton/src/skeleton-types.ts @@ -12,6 +12,10 @@ export const skeletonProps = { loading:{ type: Boolean, default: true + }, + avatar:{ + type: Boolean, + default: false } } as const diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index 876b7e02..7a560b02 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -1,27 +1,43 @@ -@import "../../style/mixins/index"; @import "../../style/theme/color"; -@import "../../style/theme/shadow"; -@import "../../style/theme/corner"; -@import "../../style/theme/font"; .d-skeleton { - .d-skeleton__item { - width: 100%; - height: 16px; - background: #f2f2f2; - display: inline-block; - border-radius: 4px; + display: flex; + justify-content: space-between; + .d-skeleton__avatar { + display: none; + .avatar { + width: 40px; + height: 40px; + background: #f2f2f2; + border-radius: 50%; + } } - .d-skeleton__item:first-child { - width: 33%; + .is-shown{ + flex: 1; + display: flex; + justify-content: center; } - .d-skeleton__item:last-child { - width: 61%; + .d-skeleton__item__group { + flex: 7; + .d-skeleton__item { + width: 100%; + height: 16px; + background: #f2f2f2; + display: inline-block; + border-radius: 4px; + } + .d-skeleton__item:first-child { + width: 33%; + } + .d-skeleton__item:last-child { + width: 61%; + } } } -.d-skeleton-animated { - .d-skeleton__item { +.d-skeleton-animated > .d-skeleton__avatar, +.d-skeleton-animated > .d-skeleton__item__group { + .is-animated { background-color: #ccc; background: linear-gradient( 100deg, @@ -32,9 +48,13 @@ #ccc; background-size: 200% 100%; background-position-x: 180%; - animation: 1.4s loading ease-in-out infinite; + animation: 2s loading ease-in-out infinite; } } +.d-skeleton-animated > .d-skeleton__avatar >.is-animated{ + animation-delay: .1s; +} + @keyframes loading { to { background-position-x: -20%; diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index 7dcfa253..7a2b7807 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -8,17 +8,27 @@ export default defineComponent({ props: skeletonProps, emits: [], setup(props: SkeletonProps, ctx) { + const { slots } = ctx; let arr = [] for (let index = 0; index < props.row; index++) { arr.push(1) } return () => { - return
{ - arr.map(() => { - return
- }) + if (props.loading) { + return
+
+
+
+
{ + arr.map(() => { + return
+ }) + }
+
+ } else { + return
{slots.content?.()} +
} -
} } }) diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md index fbf2cfaf..6f9ec319 100644 --- a/docs/components/skeleton/index.md +++ b/docs/components/skeleton/index.md @@ -16,6 +16,19 @@ ``` ::: +### 显示头像 +通过 avatar 属性显示头像占位图。 + +:::demo + +```vue + +``` +::: + + ### 展示子组件 将 loading 属性设置成 false 表示内容加载完成，此时会隐藏占位图，并显示 Skeleton 的子组件。 @@ -24,7 +37,14 @@ ```vue ``` @@ -32,14 +52,10 @@ ### API d-skeleton 参数 -| 参数 | 类型 | 默认 | 说明 | -| :-----: | :-------: | :----: | :-------------------------------------------- | -| row | `number` | `0` | 段落占位图行数 | -| loading | `boolean` | `true` | 是否显示骨架屏，传 `false` 时会展示子组件内容 | -| animate | `boolean` | `true` | 是否开启动画 | -| | | | | -| | | | | -| | | | | -| | | | | -| | | | | -| | | | | +| 参数 | 类型 | 默认 | 说明 | +| :-----: | :-------: | :-----: | :-------------------------------------------- | +| row | `number` | `0` | 段落占位图行数 | +| loading | `boolean` | `true` | 是否显示骨架屏，传 `false` 时会展示子组件内容 | +| animate | `boolean` | `true` | 是否开启动画 | +| avatar | `boolean` | `false` | 是否显示头像占位图 | + -- Gitee From 2dbcd9be7d1622d83cfda700ca1446e35d75f561 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 30 Sep 2021 11:02:51 +0800 Subject: [PATCH 04/10] =?UTF-8?q?refactor:=20=E5=88=A0=E9=99=A4=20emit?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index 7a2b7807..38625c35 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -6,7 +6,6 @@ import { skeletonProps, SkeletonProps } from './skeleton-types' export default defineComponent({ name: 'DSkeleton', props: skeletonProps, - emits: [], setup(props: SkeletonProps, ctx) { const { slots } = ctx; let arr = [] -- Gitee From f09e8d2bc25fe9bd1c17961d3d7911c36382ccc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 30 Sep 2021 12:47:15 +0800 Subject: [PATCH 05/10] =?UTF-8?q?refactor:=20=E5=85=B7=E5=90=8D=E6=8F=92?= =?UTF-8?q?=E6=A7=BD=E4=BF=AE=E6=94=B9=E4=B8=BA=E9=BB=98=E8=AE=A4=E6=8F=92?= =?UTF-8?q?=E6=A7=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.tsx | 5 ++--- docs/components/skeleton/index.md | 2 -- 2 files changed, 2 insertions(+), 5 deletions(-) diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index 38625c35..d65768df 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -24,10 +24,9 @@ export default defineComponent({ }) }
- } else { - return
{slots.content?.()} -
} + return
{slots.default?.()} +
} } }) diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md index 6f9ec319..cc4b688f 100644 --- a/docs/components/skeleton/index.md +++ b/docs/components/skeleton/index.md @@ -37,14 +37,12 @@ ```vue ``` -- Gitee From 1df585fda6d4ea9b1026baed5f43f4f19294bfa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 30 Sep 2021 13:20:22 +0800 Subject: [PATCH 06/10] =?UTF-8?q?refactor:=20=E5=8E=BB=E9=99=A4=E5=A4=9A?= =?UTF-8?q?=E4=BD=99=E7=9A=84=E6=A0=B7=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.scss | 40 ++++++++++++++------------------ devui/skeleton/src/skeleton.tsx | 4 ++-- 2 files changed, 20 insertions(+), 24 deletions(-) diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index 7a560b02..b492f562 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -1,5 +1,3 @@ -@import "../../style/theme/color"; - .d-skeleton { display: flex; justify-content: space-between; @@ -8,11 +6,11 @@ .avatar { width: 40px; height: 40px; - background: #f2f2f2; + background-color: #ccc; border-radius: 50%; } } - .is-shown{ + .is-shown { flex: 1; display: flex; justify-content: center; @@ -22,7 +20,7 @@ .d-skeleton__item { width: 100%; height: 16px; - background: #f2f2f2; + background-color: #ccc; display: inline-block; border-radius: 4px; } @@ -35,24 +33,22 @@ } } -.d-skeleton-animated > .d-skeleton__avatar, -.d-skeleton-animated > .d-skeleton__item__group { - .is-animated { - background-color: #ccc; - background: linear-gradient( - 100deg, - rgba(255, 255, 255, 0) 40%, - rgba(255, 255, 255, 0.5) 50%, - rgba(255, 255, 255, 0) 60% - ) - #ccc; - background-size: 200% 100%; - background-position-x: 180%; - animation: 2s loading ease-in-out infinite; - } +.d-skeleton-animated > .d-skeleton__avatar > .avatar, +.d-skeleton-animated > .d-skeleton__item__group > .d-skeleton__item { + background-color: #ccc; + background: linear-gradient( + 100deg, + rgba(255, 255, 255, 0) 40%, + rgba(255, 255, 255, 0.5) 50%, + rgba(255, 255, 255, 0) 60% + ) + #ccc; + background-size: 200% 100%; + background-position-x: 180%; + animation: 2s loading ease-in-out infinite; } -.d-skeleton-animated > .d-skeleton__avatar >.is-animated{ - animation-delay: .1s; +.d-skeleton-animated > .d-skeleton__avatar > .avatar { + animation-delay: 0.1s; } @keyframes loading { diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index d65768df..c1f7c671 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -16,11 +16,11 @@ export default defineComponent({ if (props.loading) { return
-
+
{ arr.map(() => { - return
+ return
}) }
-- Gitee From 569b02bd6f18b6777187ce1c61a591271875e71d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Thu, 30 Sep 2021 13:33:34 +0800 Subject: [PATCH 07/10] =?UTF-8?q?docs:=20swtich=20=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E9=AA=A8=E6=9E=B6=E5=B1=8F=E5=B1=95=E7=A4=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/skeleton/index.md | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/docs/components/skeleton/index.md b/docs/components/skeleton/index.md index cc4b688f..f4d8d530 100644 --- a/docs/components/skeleton/index.md +++ b/docs/components/skeleton/index.md @@ -36,7 +36,8 @@ ```vue + ``` ::: -- Gitee From e59ff72da75160d61f4d6944ac7a31f6f357719d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Sat, 2 Oct 2021 11:47:41 +0800 Subject: [PATCH 08/10] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.scss | 8 ++++---- devui/skeleton/src/skeleton.tsx | 4 ++-- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index b492f562..1a02ac9a 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -1,4 +1,4 @@ -.d-skeleton { +.devui-skeleton { display: flex; justify-content: space-between; .d-skeleton__avatar { @@ -33,8 +33,8 @@ } } -.d-skeleton-animated > .d-skeleton__avatar > .avatar, -.d-skeleton-animated > .d-skeleton__item__group > .d-skeleton__item { +.devui-skeleton-animated > .d-skeleton__avatar > .avatar, +.devui-skeleton-animated > .d-skeleton__item__group > .d-skeleton__item { background-color: #ccc; background: linear-gradient( 100deg, @@ -47,7 +47,7 @@ background-position-x: 180%; animation: 2s loading ease-in-out infinite; } -.d-skeleton-animated > .d-skeleton__avatar > .avatar { +.devui-skeleton-animated > .d-skeleton__avatar > .avatar { animation-delay: 0.1s; } diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index c1f7c671..ae074952 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -14,7 +14,7 @@ export default defineComponent({ } return () => { if (props.loading) { - return
+ return
@@ -25,7 +25,7 @@ export default defineComponent({ }
} - return
{slots.default?.()} + return
{slots.default?.()}
} } -- Gitee From e7be95c62d1bf5ed8172c978e006d0dc9cd75677 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Sat, 2 Oct 2021 11:52:01 +0800 Subject: [PATCH 09/10] =?UTF-8?q?refactor:=20=E4=BF=AE=E6=94=B9=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E5=90=8D=E7=A7=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.scss | 16 ++++++++-------- devui/skeleton/src/skeleton.tsx | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index 1a02ac9a..f273c771 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -1,7 +1,7 @@ .devui-skeleton { display: flex; justify-content: space-between; - .d-skeleton__avatar { + .devui-skeleton__avatar { display: none; .avatar { width: 40px; @@ -15,26 +15,26 @@ display: flex; justify-content: center; } - .d-skeleton__item__group { + .devui-skeleton__item__group { flex: 7; - .d-skeleton__item { + .devui-skeleton__item { width: 100%; height: 16px; background-color: #ccc; display: inline-block; border-radius: 4px; } - .d-skeleton__item:first-child { + .devui-skeleton__item:first-child { width: 33%; } - .d-skeleton__item:last-child { + .devui-skeleton__item:last-child { width: 61%; } } } -.devui-skeleton-animated > .d-skeleton__avatar > .avatar, -.devui-skeleton-animated > .d-skeleton__item__group > .d-skeleton__item { +.devui-skeleton-animated > .devui-skeleton__avatar > .avatar, +.devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__item { background-color: #ccc; background: linear-gradient( 100deg, @@ -47,7 +47,7 @@ background-position-x: 180%; animation: 2s loading ease-in-out infinite; } -.devui-skeleton-animated > .d-skeleton__avatar > .avatar { +.devui-skeleton-animated > .devui-skeleton__avatar > .avatar { animation-delay: 0.1s; } diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index ae074952..6076a063 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -15,12 +15,12 @@ export default defineComponent({ return () => { if (props.loading) { return
-
+
-
{ +
{ arr.map(() => { - return
+ return
}) }
-- Gitee From 3919f048c91b59f0c4bed2431eaa863e859af5e8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Sat, 2 Oct 2021 07:21:07 +0000 Subject: [PATCH 10/10] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20de?= =?UTF-8?q?vui/vue-devui?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/vue-devui | 1 - 1 file changed, 1 deletion(-) delete mode 160000 devui/vue-devui diff --git a/devui/vue-devui b/devui/vue-devui deleted file mode 160000 index 99a96e63..00000000 --- a/devui/vue-devui +++ /dev/null @@ -1 +0,0 @@ -Subproject commit 99a96e63021ee4c1970a9c211771330d2ca210af -- Gitee