From cc47e0b8200284876b99eb67f3b1f6e095ee3ce9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Wed, 6 Oct 2021 21:28:37 +0800 Subject: [PATCH 1/4] =?UTF-8?q?style:=20=E4=BF=AE=E5=A4=8D=E5=8A=A8?= =?UTF-8?q?=E7=94=BB=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 | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index ab0fadc0..b08890b1 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -42,14 +42,14 @@ .devui-skeleton-animated > .devui-skeleton__avatar > .avatar, .devui-skeleton-animated > .devui-skeleton__item__group > .devui-skeleton__item { - background-color: #cccccc; - // 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: + linear-gradient( + 100deg, + rgba(255, 255, 255, 0) 40%, + rgba(255, 255, 255, 0.5) 50%, + rgba(255, 255, 255, 0) 60% + ) + #cccccc; background-size: 200% 100%; background-position-x: 180%; animation: 2s loading ease-in-out infinite; -- Gitee From a87c7c306cdd6626900acd60f8a5d28b777bffa5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Wed, 6 Oct 2021 23:24:59 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E5=8D=95?= =?UTF-8?q?=E5=85=83=E6=B5=8B=E8=AF=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/__tests__/skeleton.spec.ts | 81 +++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 devui/skeleton/__tests__/skeleton.spec.ts diff --git a/devui/skeleton/__tests__/skeleton.spec.ts b/devui/skeleton/__tests__/skeleton.spec.ts new file mode 100644 index 00000000..e55e134a --- /dev/null +++ b/devui/skeleton/__tests__/skeleton.spec.ts @@ -0,0 +1,81 @@ +import { mount } from '@vue/test-utils'; +import { ref } from 'vue'; +import DSkeleton from '../src/skeleton'; + +describe('skeleton 组件', () => { + it('render basic skeleton successfully', () => { + const row = ref(4); + const wrapper = mount({ + components: { DSkeleton }, + template: ``, + setup() { + return { + row + }; + }, + }); + + expect(wrapper.classes()).toContain('devui-skeleton') + expect(wrapper.classes()).toContain('devui-skeleton-animated') + expect(wrapper.element.childElementCount).toBe(1) + // 渲染个数应当与传入的 row 的数量相同 + expect(wrapper.element.children[0].childElementCount).toBe(4) + }) + + it('render skeleton without animate', () => { + const animate = ref(false); + const wrapper = mount({ + components: { DSkeleton }, + template: ``, + setup() { + return { + animate + }; + }, + }); + + expect(wrapper.classes()).toContain('devui-skeleton-no-animated') + }) + + it('render skeleton with avatar', () => { + const avatar = ref(true); + const wrapper = mount({ + components: { DSkeleton }, + template: ``, + setup() { + return { + avatar + }; + }, + }); + + expect(wrapper.element.childElementCount).toBe(2) + expect(wrapper.element.children[0].innerHTML).toBe('
') + }) + + it('hide skeleton and show real content', () => { + const row = ref(4); + const loading = ref(false); + const wrapper = mount({ + components: { DSkeleton }, + template: ` + +
+
content1
+
content2
+
content3
+
content4
+
+ `, + setup() { + return { + row, + loading + }; + }, + }); + + expect(wrapper.classes()).toContain('devui-skeleton') + expect(wrapper.element.children[0].innerHTML).toBe('
content1
content2
content3
content4
') + }) +}) \ No newline at end of file -- Gitee From cc736114334e1e65db18ebaa4c93e0a266cc58df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Wed, 6 Oct 2021 23:29:24 +0800 Subject: [PATCH 3/4] =?UTF-8?q?refactor:=20=E6=97=A0=E5=A4=B4=E5=83=8F?= =?UTF-8?q?=E6=97=B6=E4=B8=8D=E6=B8=B2=E6=9F=93=20DOM?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/index.ts | 2 +- devui/skeleton/src/skeleton.tsx | 6 ++---- 2 files changed, 3 insertions(+), 5 deletions(-) diff --git a/devui/skeleton/index.ts b/devui/skeleton/index.ts index 1e40f962..e51762a5 100644 --- a/devui/skeleton/index.ts +++ b/devui/skeleton/index.ts @@ -10,7 +10,7 @@ export { Skeleton } export default { title: 'Skeleton 骨架屏', category: '数据展示', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '已完成', install(app: App): void { app.use(Skeleton as any) diff --git a/devui/skeleton/src/skeleton.tsx b/devui/skeleton/src/skeleton.tsx index 4e6bc3cb..1939a776 100644 --- a/devui/skeleton/src/skeleton.tsx +++ b/devui/skeleton/src/skeleton.tsx @@ -14,10 +14,8 @@ export default defineComponent({ } return () => { if (props.loading) { - return
-
-
-
+ return
+ {props.avatar ?
: null}
{ arr.map(() => { return
-- Gitee From c00d0e13925ca365087973d05e2ab158f8eda80f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=97=A0=E5=A3=B0?= Date: Wed, 6 Oct 2021 23:29:48 +0800 Subject: [PATCH 4/4] =?UTF-8?q?style:=20=E5=87=8F=E5=B0=91=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/skeleton/src/skeleton.scss | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) diff --git a/devui/skeleton/src/skeleton.scss b/devui/skeleton/src/skeleton.scss index b08890b1..74508318 100644 --- a/devui/skeleton/src/skeleton.scss +++ b/devui/skeleton/src/skeleton.scss @@ -3,7 +3,9 @@ justify-content: space-between; .devui-skeleton__avatar { - display: none; + display: flex; + flex: 1; + justify-content: center; .avatar { width: 40px; @@ -13,12 +15,6 @@ } } - .is-shown { - flex: 1; - display: flex; - justify-content: center; - } - .devui-skeleton__item__group { flex: 7; -- Gitee