From cf4044a4fe4f48faea98ae21590f949b1434169a Mon Sep 17 00:00:00 2001 From: Eiinu Date: Thu, 4 Jan 2024 11:04:39 +0800 Subject: [PATCH] chore(image): split demo (#2819) --- src/packages/__VUE/image/demo.vue | 144 --------------------- src/packages/__VUE/image/demo/basic.vue | 6 + src/packages/__VUE/image/demo/error.vue | 16 +++ src/packages/__VUE/image/demo/fit.vue | 12 ++ src/packages/__VUE/image/demo/index.vue | 55 ++++++++ src/packages/__VUE/image/demo/lazy.vue | 9 ++ src/packages/__VUE/image/demo/loading.vue | 13 ++ src/packages/__VUE/image/demo/position.vue | 19 +++ src/packages/__VUE/image/demo/round.vue | 15 +++ src/packages/__VUE/image/doc.en-US.md | 122 +---------------- src/packages/__VUE/image/doc.md | 122 +---------------- tsconfig.json | 1 + 12 files changed, 160 insertions(+), 374 deletions(-) delete mode 100644 src/packages/__VUE/image/demo.vue create mode 100644 src/packages/__VUE/image/demo/basic.vue create mode 100644 src/packages/__VUE/image/demo/error.vue create mode 100644 src/packages/__VUE/image/demo/fit.vue create mode 100644 src/packages/__VUE/image/demo/index.vue create mode 100644 src/packages/__VUE/image/demo/lazy.vue create mode 100644 src/packages/__VUE/image/demo/loading.vue create mode 100644 src/packages/__VUE/image/demo/position.vue create mode 100644 src/packages/__VUE/image/demo/round.vue diff --git a/src/packages/__VUE/image/demo.vue b/src/packages/__VUE/image/demo.vue deleted file mode 100644 index 524e892ff4..0000000000 --- a/src/packages/__VUE/image/demo.vue +++ /dev/null @@ -1,144 +0,0 @@ - - - diff --git a/src/packages/__VUE/image/demo/basic.vue b/src/packages/__VUE/image/demo/basic.vue new file mode 100644 index 0000000000..6fd0c6fe5c --- /dev/null +++ b/src/packages/__VUE/image/demo/basic.vue @@ -0,0 +1,6 @@ + + diff --git a/src/packages/__VUE/image/demo/error.vue b/src/packages/__VUE/image/demo/error.vue new file mode 100644 index 0000000000..ef68ea928c --- /dev/null +++ b/src/packages/__VUE/image/demo/error.vue @@ -0,0 +1,16 @@ + + diff --git a/src/packages/__VUE/image/demo/fit.vue b/src/packages/__VUE/image/demo/fit.vue new file mode 100644 index 0000000000..6dd902d11d --- /dev/null +++ b/src/packages/__VUE/image/demo/fit.vue @@ -0,0 +1,12 @@ + + diff --git a/src/packages/__VUE/image/demo/index.vue b/src/packages/__VUE/image/demo/index.vue new file mode 100644 index 0000000000..df99084822 --- /dev/null +++ b/src/packages/__VUE/image/demo/index.vue @@ -0,0 +1,55 @@ + + diff --git a/src/packages/__VUE/image/demo/lazy.vue b/src/packages/__VUE/image/demo/lazy.vue new file mode 100644 index 0000000000..e1ba53bfc2 --- /dev/null +++ b/src/packages/__VUE/image/demo/lazy.vue @@ -0,0 +1,9 @@ + + diff --git a/src/packages/__VUE/image/demo/loading.vue b/src/packages/__VUE/image/demo/loading.vue new file mode 100644 index 0000000000..f373ef253f --- /dev/null +++ b/src/packages/__VUE/image/demo/loading.vue @@ -0,0 +1,13 @@ + + diff --git a/src/packages/__VUE/image/demo/position.vue b/src/packages/__VUE/image/demo/position.vue new file mode 100644 index 0000000000..1b8ed4771e --- /dev/null +++ b/src/packages/__VUE/image/demo/position.vue @@ -0,0 +1,19 @@ + + diff --git a/src/packages/__VUE/image/demo/round.vue b/src/packages/__VUE/image/demo/round.vue new file mode 100644 index 0000000000..ae2887841f --- /dev/null +++ b/src/packages/__VUE/image/demo/round.vue @@ -0,0 +1,15 @@ + + diff --git a/src/packages/__VUE/image/doc.en-US.md b/src/packages/__VUE/image/doc.en-US.md index eb5cca6926..afab3af216 100644 --- a/src/packages/__VUE/image/doc.en-US.md +++ b/src/packages/__VUE/image/doc.en-US.md @@ -18,149 +18,41 @@ app.use(); The basic usage is the same as that of the native IMG tag. You can set the native attributes such as SRC, width, height, and Alt. -:::demo - -```vue - -``` - -::: +> demo: image basic ### Object Fill The `fit` attribute is used to set the image filling mode, which is equivalent to the original `Object-fit` attribute. -:::demo - -```vue - -``` - -::: +> demo: image fit ### Object Position The position property can be used to set the position of the picture, which is equivalent to the original `Object-position` property when combined with the FIT property. -:::demo - -```vue - -``` - -::: +> demo: image position ### Round The round attribute allows you to set the image to be round. Note that if the image is not contained and fit is contained or scale-down, a full circle cannot be contained. -:::demo - -```vue - -``` - -::: +> demo: image round ### Loading The Image component provides a default `loading` prompt and supports custom content through the loading slot. -:::demo - -```vue - - -``` - -::: +> demo: image loading ### Error The Image component provides a default loading failure warning and supports custom content through the `error` slot. -:::demo - -```vue - - -``` - -::: +> demo: image error ### LazyLoad -:::demo - -```vue - - -``` - -::: +> demo: image lazy ## API diff --git a/src/packages/__VUE/image/doc.md b/src/packages/__VUE/image/doc.md index acf8ee8c58..706b6d74fe 100644 --- a/src/packages/__VUE/image/doc.md +++ b/src/packages/__VUE/image/doc.md @@ -18,151 +18,43 @@ app.use(); 基础用法与原生 `img` 标签一致，可以设置 `src`、`width`、`height`、`alt` 等原生属性。 -:::demo - -```vue - -``` - -::: +> demo: image basic ### 填充模式 通过 `fit` 属性可以设置图片填充模式，等同于原生的 `object-fit` 属性，可选值见下方表格。 -:::demo - -```vue - -``` - -::: +> demo: image fit ### 图片位置 通过 `position` 属性可以设置图片位置，结合 `fit` 属性使用，等同于原生的 `object-position` 属性。 -:::demo - -```vue - -``` - -::: +> demo: image position ### 圆形图片 通过 `round` 属性可以设置图片变圆，注意当图片宽高不相等且 `fit` 为 `contain` 或 `scale-down` 时，将无法填充一个完整的圆形。 -:::demo - -```vue - -``` - -::: +> demo: image round ### 加载中图片 Image 组件提供了默认的加载中提示，支持通过 `loading` 插槽自定义内容。 -:::demo - -```vue - - -``` - -::: +> demo: image loading ### 加载失败 Image 组件提供了默认的加载失败提示，支持通过 `error` 插槽自定义内容。 -:::demo - -```vue - - -``` - -::: +> demo: image error ### 懒加载 刷新后滚动 Demo 页面，在控制台中查看图片请求时间。 -:::demo - -```vue - - -``` - -::: +> demo: image lazy ## API diff --git a/tsconfig.json b/tsconfig.json index 178e08dc56..f74078b4d5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -17,6 +17,7 @@ "lib": ["esnext", "dom"], "outDir": "./tsc/test", "types": ["vite/client", "vitest/globals"], + "allowJs": true, "paths": { "@/*": ["src/*"] }