feat: add image component (#1735)

* feat: add image component * fix: lint fix * fix: test fix
Tencent · Sep 26, 2022 · 5a544c3 · 5a544c3
1 parent 10e7448
commit 5a544c3
Show file tree

Hide file tree

Showing 24 changed files with 3,285 additions and 0 deletions.
diff --git a/site/site.config.mjs b/site/site.config.mjs
@@ -340,6 +340,14 @@ export default {
           path: '/vue-next/components/comment',
           component: () => import('tdesign-vue-next/comment/comment.md'),
         },
+        {
+          title: 'Image 图片',
+          titleEn: 'Image',
+          name: 'image',
+          path: '/vue-next/components/image',
+          component: () => import('tdesign-vue-next/image/image.md'),
+          componentEn: () => import('tdesign-vue-next/image/image.en-US.md'),
+        },
         {
           title: 'ImageViewer 图片预览',
           name: 'image-viewer',

diff --git a/src/components.ts b/src/components.ts
@@ -47,6 +47,7 @@ export * from './badge';
 export * from './calendar';
 export * from './card';
 export * from './comment';
+export * from './image';
 export * from './image-viewer';
 export * from './list';
 export * from './progress';

diff --git a/src/image/__tests__/index.test.jsx b/src/image/__tests__/index.test.jsx
@@ -0,0 +1,14 @@
+import { mount } from '@vue/test-utils';
+import Image from '@/src/image/index.ts';
+
+describe('Image 组件测试', () => {
+  test('Image 测试', () => {
+    const wrapper = mount({
+      render() {
+        return <Image src="https://tdesign.gtimg.com/demo/demo-image-1.png" />;
+      },
+    });
+
+    expect(wrapper.exists()).toBe(true);
+  });
+});
diff --git a/src/image/_example/extra-always.vue b/src/image/_example/extra-always.vue
@@ -0,0 +1,68 @@
+<template>
+  <t-space :size="32">
+    <t-space direction="vertical">
+      <strong :style="{ fontSize: '20px' }">有遮罩</strong>
+      <t-image
+        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        :style="{ width: '284px', height: '160px' }"
+        :overlay-content="renderMask"
+      />
+    </t-space>
+    <t-space direction="vertical">
+      <strong :style="{ fontSize: '20px' }">无遮罩</strong>
+      <t-image
+        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        :style="{ width: '284px', height: '160px' }"
+        :overlay-content="renderButton"
+      />
+    </t-space>
+  </t-space>
+</template>
+
+<script setup lang="jsx">
+import { PrintIcon } from 'tdesign-icons-vue-next';
+import { Tag } from 'tdesign-vue-next';
+
+const renderMask = (
+  <div
+    style={{
+      background: 'rgba(0,0,0,.4)',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '14px',
+      lineHeight: '22px',
+    }}
+  >
+    <Tag
+      shape="mark"
+      theme="warning"
+      style={{
+        borderRadius: '3px',
+        background: 'transparent',
+        color: '#fff',
+      }}
+    >
+      <PrintIcon size="16" /> 高清
+    </Tag>
+  </div>
+);
+
+const renderButton = (
+  <Tag
+    shape="mark"
+    theme="warning"
+    style={{
+      position: 'absolute',
+      right: '8px',
+      bottom: '8px',
+      borderRadius: '3px',
+      background: 'rgba(236,242,254,1)',
+      color: 'rgba(0,82,217,1)',
+    }}
+  >
+    <PrintIcon size="16" /> 高清
+  </Tag>
+);
+</script>
diff --git a/src/image/_example/extra-hover.vue b/src/image/_example/extra-hover.vue
@@ -0,0 +1,25 @@
+<template>
+  <t-image
+    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+    :style="{ width: '284px', height: '160px' }"
+    :overlay-content="renderMask"
+    overlay-trigger="hover"
+  />
+</template>
+
+<script setup lang="jsx">
+const renderMask = (
+  <div
+    style={{
+      background: 'rgba(0,0,0,.4)',
+      color: '#fff',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    }}
+  >
+    预览
+  </div>
+);
+</script>
diff --git a/src/image/_example/fill-mode.vue b/src/image/_example/fill-mode.vue
@@ -0,0 +1,16 @@
+<template>
+  <t-space :break-line="true" :size="16">
+    <t-space v-for="item in mode" :key="item" direction="vertical" align="start">
+      <t-image
+        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        :fit="item"
+        :style="{ width: '120px', height: '120px' }"
+      />
+      <span>{{ item }}</span>
+    </t-space>
+  </t-space>
+</template>
+
+<script setup>
+const mode = ['fill', 'contain', 'cover', 'none', 'scale-down'];
+</script>
diff --git a/src/image/_example/fill-position.vue b/src/image/_example/fill-position.vue
@@ -0,0 +1,102 @@
+<template>
+  <t-space direction="vertical" :style="{ width: '100%' }">
+    <t-space break-line>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="cover"
+          position="center"
+          :style="{ width: '120px', height: '120px' }"
+        />
+        <span>cover center</span>
+      </t-space>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="cover"
+          :style="{ width: '120px', height: '120px' }"
+          position="left"
+        />
+        <span>cover left</span>
+      </t-space>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="cover"
+          :style="{ width: '120px', height: '120px' }"
+          position="right"
+        />
+        <span>cover right</span>
+      </t-space>
+    </t-space>
+    <t-space :style="{ marginTop: 20 }" break-line>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="cover"
+          :style="{ width: '280px', height: '120px' }"
+          position="top"
+        />
+        <span>cover top</span>
+      </t-space>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="cover"
+          :style="{ width: '280px', height: '120px' }"
+          position="bottom"
+        />
+        <span>cover bottom</span>
+      </t-space>
+    </t-space>
+    <t-space :style="{ marginTop: 20 }" break-line>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="contain"
+          :style="{ width: '120px', height: '200px' }"
+          position="top"
+        />
+        <span>contain top</span>
+      </t-space>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="contain"
+          :style="{ width: '120px', height: '200px' }"
+          position="bottom"
+        />
+        <span>contain bottom</span>
+      </t-space>
+      <t-space direction="vertical" align="start">
+        <t-image
+          src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+          fit="contain"
+          :style="{ width: '120px', height: '200px' }"
+          position="center"
+        />
+        <span>contain center</span>
+      </t-space>
+      <t-space :style="{ marginTop: 20 }" break-line>
+        <t-space direction="vertical" align="start">
+          <t-image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            :style="{ width: '280px', height: '120px' }"
+            position="left"
+          />
+          <span>contain left</span>
+        </t-space>
+        <t-space direction="vertical" align="start">
+          <t-image
+            src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+            fit="contain"
+            :style="{ width: '280px', height: '120px' }"
+            position="right"
+          />
+          <span>contain right</span>
+        </t-space>
+      </t-space>
+    </t-space>
+  </t-space>
+</template>
diff --git a/src/image/_example/gallery-cover.vue b/src/image/_example/gallery-cover.vue
@@ -0,0 +1,27 @@
+<template>
+  <t-image
+    src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+    :style="{ width: '284px', height: '160px' }"
+    :gallery="true"
+    :overlay-content="label"
+  />
+</template>
+
+<script setup lang="jsx">
+import { Tag } from 'tdesign-vue-next';
+
+const label = (
+  <Tag
+    shape="mark"
+    theme="warning"
+    style={{
+      margin: '8px',
+      borderRadius: '3px',
+      background: 'rgba(236,242,254,1)',
+      color: 'rgba(0,82,217,1)',
+    }}
+  >
+    标签一
+  </Tag>
+);
+</script>
diff --git a/src/image/_example/lazy-list.vue b/src/image/_example/lazy-list.vue
@@ -0,0 +1,28 @@
+<template>
+  <t-space :key="loadingCount" direction="vertical">
+    <t-space :break-line="true" :style="{ height: '240px', 'overflow-y': 'scroll' }">
+      <t-image
+        v-for="item in list"
+        :key="item"
+        src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+        :style="{ width: '230px', height: '120px' }"
+        :lazy="true"
+      />
+    </t-space>
+    <t-button variant="outline" :icon="renderRefreshIcon" @click="loadingCount = loadingCount + 1">
+      重演 lazy load
+    </t-button>
+  </t-space>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+import { RefreshIcon } from 'tdesign-icons-vue-next';
+
+const loadingCount = ref(0);
+const list = ref(Array.from({ length: 24 }).map((_, index) => index));
+
+const renderRefreshIcon = () => {
+  return <RefreshIcon />;
+};
+</script>
diff --git a/src/image/_example/lazy-single.vue b/src/image/_example/lazy-single.vue
@@ -0,0 +1,51 @@
+<template>
+  <t-space direction="vertical">
+    <t-image
+      :key="loadingCount"
+      src="https://tdesign.gtimg.com/demo/demo-image-1.png"
+      :style="{ width: '284px', height: '160px' }"
+      :lazy="true"
+      :placeholder="renderPlaceholder"
+      :loading="renderLoading"
+    />
+    <t-button variant="outline" :icon="renderRefreshIcon" @click="loadingCount = loadingCount + 1">
+      重演 lazy load
+    </t-button>
+  </t-space>
+</template>
+
+<script setup lang="jsx">
+import { ref } from 'vue';
+import { RefreshIcon } from 'tdesign-icons-vue-next';
+import { Loading } from 'tdesign-vue-next';
+
+const loadingCount = ref(0);
+const renderPlaceholder = <img width="100%" height="100%" src="https://tdesign.gtimg.com/demo/demo-image-5.png" />;
+const renderLoading = (
+  <div
+    style={{
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%',
+      background: 'rgba(255,255,255,.4)',
+      backdropFilter: 'blur(10px)',
+    }}
+  >
+    <Loading
+      delay={0}
+      fullscreen={false}
+      indicator
+      inheritColor={false}
+      loading
+      preventScrollThrough
+      showOverlay
+      size="small"
+    />
+  </div>
+);
+const renderRefreshIcon = () => {
+  return <RefreshIcon />;
+};
+</script>