Feat/image viewer

site/mobile/mobile.config.js

@@ -35,6 +35,11 @@ export default {
       name: 'image',
       component: () => import('tdesign-mobile-react/image/_example/index.jsx'),
     },
+    {
+      title: 'ImageViewer 图片预览',
+      name: 'image-viewer',
+      component: () => import('tdesign-mobile-react/image-viewer/_example/index.jsx'),
+    },
     {
       title: 'Popup 弹出层',
       name: 'popup',

site/web/site.config.js

@@ -245,12 +245,12 @@ export default {
         //   path: '/mobile-react/components/list',
         //   component: () => import('tdesign-mobile-react/list/list.md'),
         // },
-        // {
-        //   title: 'ImageViewer 图片预览',
-        //   name: 'image-viewer',
-        //   path: '/mobile-react/components/image-viewer',
-        //   component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'),
-        // },
+        {
+          title: 'ImageViewer 图片预览',
+          name: 'image-viewer',
+          path: '/mobile-react/components/image-viewer',
+          component: () => import('tdesign-mobile-react/image-viewer/image-viewer.md'),
+        },
         {
           title: 'Skeleton 骨架屏',
           name: 'skeleton',

src/image-viewer/_example/background.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import ImageViewer from '../ImageViewer';
+import Button from '../../button/Button';
+
+// 图片预览素材
+const IMAGE_SOURCE = ['https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview2.png'];
+
+function Index() {
+  // 是否显示图片预览
+  const [imageViewerVisible, setImageViewerVisible] = useState(false);
+
+  return (
+    <div>
+      {/* 预览 */}
+      <ImageViewer
+        images={IMAGE_SOURCE}
+        visible={imageViewerVisible}
+        onVisibleChange={setImageViewerVisible}
+      ></ImageViewer>
+      {/* 控制 */}
+      <Button
+        size="medium"
+        variant="outline"
+        shape="rectangle"
+        block
+        onClick={() => setImageViewerVisible(!imageViewerVisible)}
+      >
+        图片超宽情况
+      </Button>
+    </div>
+  );
+}
+
+export default Index;

src/image-viewer/_example/base.jsx

@@ -0,0 +1,36 @@
+import React, { useState } from 'react';
+import ImageViewer from '../ImageViewer';
+import Button from '../../button/Button';
+import Toast from '../../toast/Toast';
+
+// 图片预览素材
+const IMAGE_SOURCE = ['https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview1.png'];
+
+function Base() {
+  // 是否显示图片预览
+  const [imageViewerVisible, setImageViewerVisible] = useState(false);
+
+  return (
+    <div>
+      {/* 预览 */}
+      <ImageViewer
+        images={IMAGE_SOURCE}
+        visible={imageViewerVisible}
+        onVisibleChange={setImageViewerVisible}
+        onChange={(index) => Toast({ message: `翻到第 ${index} 页` })}
+      ></ImageViewer>
+      {/* 控制 */}
+      <Button
+        size="medium"
+        variant="outline"
+        shape="rectangle"
+        block
+        onClick={() => setImageViewerVisible(!imageViewerVisible)}
+      >
+        基础图片预览
+      </Button>
+    </div>
+  );
+}
+
+export default Base;

src/image-viewer/_example/imageList.jsx

@@ -0,0 +1,46 @@
+import React, { useState } from 'react';
+import { Toast } from 'tdesign-mobile-react';
+import ImageViewer from '../ImageViewer';
+import Button from '../../button/Button';
+
+// 图片预览素材
+const IMAGE_SOURCE = [
+  'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview1.png',
+  'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview3.png',
+  'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview2.png',
+];
+
+function ImageList() {
+  // 是否显示图片预览
+  const [imageViewerVisible, setImageViewerVisible] = useState(false);
+
+  return (
+    <div>
+      {/* 预览 */}
+      <ImageViewer
+        images={IMAGE_SOURCE}
+        visible={imageViewerVisible}
+        showIndex={true}
+        initialIndex={2}
+        deleteBtn={true}
+        closeBtn={true}
+        onVisibleChange={setImageViewerVisible}
+        onChange={(index) => Toast({ message: `翻到第 ${index} 页` })}
+        onClose={(trigger, visible, index) => console.log('close', trigger, visible, index)}
+        onDelete={(index) => Toast({ message: `删除第 ${index} 页` })}
+      ></ImageViewer>
+      {/* 控制 */}
+      <Button
+        size="medium"
+        variant="outline"
+        shape="rectangle"
+        block
+        onClick={() => setImageViewerVisible(!imageViewerVisible)}
+      >
+        有删除操作
+      </Button>
+    </div>
+  );
+}
+
+export default ImageList;

src/image-viewer/_example/index.jsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import Base from './base';
+import ImageList from './imageList';
+import InitialIndex from './initialIndex';
+import Background from './background';
+
+import './style/index.less';
+
+export default function ImageViewerDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader
+        title="ImageViewer 图片预览"
+        summary="图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范"
+      />
+
+      <TDemoBlock title="01 类型" summary="图片预览类型">
+        <div className="image-viewer-block">
+          {/* 基础图片预览 */}
+          <Base />
+          {/* 有删除操作 */}
+          <ImageList />
+          {/* 图片超高情况 */}
+          <InitialIndex />
+          {/* 图片超宽情况 */}
+          <Background />
+        </div>
+        <div style={{ height: '1000px' }}></div>
+      </TDemoBlock>
+    </div>
+  );
+}

src/image-viewer/_example/initialIndex.jsx

@@ -0,0 +1,34 @@
+import React, { useState } from 'react';
+import ImageViewer from '../ImageViewer';
+import Button from '../../button/Button';
+
+// 图片预览素材
+const IMAGE_SOURCE = ['https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview3.png'];
+
+function Index() {
+  // 是否显示图片预览
+  const [imageViewerVisible, setImageViewerVisible] = useState(false);
+
+  return (
+    <div>
+      {/* 预览 */}
+      <ImageViewer
+        images={IMAGE_SOURCE}
+        visible={imageViewerVisible}
+        onVisibleChange={setImageViewerVisible}
+      ></ImageViewer>
+      {/* 控制 */}
+      <Button
+        size="medium"
+        variant="outline"
+        shape="rectangle"
+        block
+        onClick={() => setImageViewerVisible(!imageViewerVisible)}
+      >
+        图片超高情况
+      </Button>
+    </div>
+  );
+}
+
+export default Index;

src/image-viewer/_example/style/index.css

@@ -0,0 +1,9 @@
+.tdesign-mobile-demo {
+  background-color: #f6f6f6;
+}
+.image-viewer-block {
+  padding: 0 16px;
+}
+.image-viewer-block .t-button {
+  margin-bottom: 16px;
+}

src/image-viewer/_example/style/index.less

@@ -0,0 +1,11 @@
+.tdesign-mobile-demo {
+  background-color: #f6f6f6;
+}
+
+.image-viewer-block {
+  padding: 0 16px;
+
+  .t-button {
+    margin-bottom: 16px;
+  }
+}

src/image-viewer/image-viewer.md

@@ -0,0 +1,22 @@
+:: BASE_DOC ::
+
+## API
+
+| 属性            | 类型            | 默认值            | 必传 | 说明           |
+| --------------- | --------------- | ----------------- | ---- | -------------- |
+| images          | `Array<String>` | []                | Y    | 图片数组       |
+| visible         | Boolean         | false             | N    | 隐藏/显示预览  |
+| showIndex       | Boolean         | true              | N    | 是否显示页码   |
+| initialIndex    | Number          | 0                 | N    | 默认展示第几项 |
+| backgroundColor | String          | rgba(0, 0, 0, .6) | N    | 遮罩的背景颜色 |
+| closeBtn | Boolean          | false | N    | 是否显示关闭按钮 |
+| deleteBtn | Boolean          | false | N    | 是否显示删除按钮 |
+
+## Events
+
+| 事件名称 | 参数 | 说明       |
+| -------- | ---- | ---------- |
+| onVisibleChange   | -    | 显示/隐藏回调 |
+| onChange   | -    | 翻页时回调 |
+| onClose   | -    | 关闭时回调 |
+| onDelete   | -    | 删除时回调 |