feat(image-viewer): add image-viewer component

example/app.json

@@ -56,7 +56,8 @@
     "pages/navbar/navbar",
     "pages/date-time-picker/date-time-picker",
     "pages/action-sheet/action-sheet",
-    "pages/notice-bar/notice-bar"
+    "pages/notice-bar/notice-bar",
+    "pages/image-viewer/image-viewer"
   ],
   "usingComponents": {
     "t-demo": "../../components/demo-block/index",
@@ -123,7 +124,8 @@
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
     "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
-    "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
+    "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar",
+    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
   },
   "window": {
     "backgroundTextStyle": "light",

example/pages/home/data/display.ts

@@ -54,10 +54,10 @@ const display = {
       name: 'Image',
       label: '图片',
     },
-    // {
-    //   name: 'Preview',
-    //   label: '图片预览',
-    // },
+    {
+      name: 'ImageViewer',
+      label: '图片预览',
+    },
     {
       name: 'Swiper',
       label: '轮播图',

example/pages/image-viewer/image-viewer.json

@@ -0,0 +1,7 @@
+{
+  "navigationBarTitleText": "ImageViewer",
+  "navigationBarBackgroundColor": "#fff",
+  "usingComponents": {
+    "t-demo": "../../components/demo-block/index"
+  }
+}

example/pages/image-viewer/image-viewer.less

@@ -0,0 +1,62 @@
+.image-viewer {
+  background-color: #fff;
+  font-size: 32rpx;
+  line-height: 48rpx;
+  color: rgba(0, 0, 0, 0.9);
+  padding: 48rpx 0rpx 96rpx 0rpx;
+  height: 100vh;
+
+  .slot-wrap {
+    background-color: #fff;
+    padding: 10px;
+  }
+
+  .title {
+    font-weight: bold;
+    font-size: 40rpx;
+    line-height: 56rpx;
+    color: rgba(0, 0, 0, 0.9);
+    padding: 0 32rpx;
+  }
+
+  .desc {
+    margin-top: 16rpx;
+    font-size: 26rpx;
+    line-height: 36rpx;
+    color: rgba(0, 0, 0, 0.4);
+    padding: 0 32rpx;
+  }
+
+  .sub-title {
+    margin-top: 40rpx;
+    font-weight: bold;
+    padding: 0 32rpx;
+  }
+
+  .t-button {
+    width: 686rpx;
+    height: 96rpx;
+    border-radius: 8rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: 32rpx;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 200%;
+      height: 200%;
+      transform: scale(0.5);
+      transform-origin: 0 0;
+      box-sizing: border-box;
+      border: 2rpx solid #dcdcdc;
+    }
+  }
+
+  .demo-block__oper {
+    padding: 0 32rpx;
+  }
+}

example/pages/image-viewer/image-viewer.ts

@@ -0,0 +1,136 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+
+Page({
+  data: {
+    visible: false,
+    showIndex: false,
+    closeBtn: false,
+    deleteBtn: false,
+    images: [],
+    operList1: [
+      {
+        title: '图片预览类型',
+        btns: [
+          {
+            type: 'basic',
+            text: '基础图片预览',
+          },
+          {
+            type: 'withDeleteBasic',
+            text: '有删除操作',
+          },
+          {
+            type: 'withOverHeightBasic',
+            text: '图片超高情况',
+          },
+          {
+            type: 'withOverWidthBasic',
+            text: '图片超宽情况',
+          },
+        ],
+      },
+    ],
+  },
+
+  onReady() {
+    //
+  },
+
+  clickHandle(e: any) {
+    const { detail } = e;
+    switch (detail) {
+      case 'basic':
+        this.setData({
+          images: [
+            ...Array.from({ length: 6 }).fill(
+              'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview1.png',
+            ),
+          ],
+          showIndex: true,
+          visible: true,
+        });
+        break;
+      case 'withDeleteBasic':
+        this.setData({
+          images: [
+            ...Array.from({ length: 6 }).fill(
+              'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview4.png',
+            ),
+          ],
+          showIndex: true,
+          visible: true,
+          closeBtn: true,
+          deleteBtn: true,
+        });
+        break;
+      case 'withOverHeightBasic':
+        this.setData({
+          images: [
+            ...Array.from({ length: 6 }).fill(
+              'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview3.png',
+            ),
+          ],
+          showIndex: true,
+          visible: true,
+        });
+        break;
+      case 'withOverWidthBasic':
+        this.setData({
+          images: [
+            ...Array.from({ length: 6 }).fill(
+              'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/miniprogram/images/preview2.png',
+            ),
+          ],
+          showIndex: true,
+          visible: true,
+        });
+        break;
+      default:
+        break;
+    }
+  },
+
+  onChange(e: any) {
+    const {
+      detail: { index },
+    } = e;
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: `翻到第${index + 1}个`,
+    });
+  },
+
+  onDelete(e: any) {
+    const {
+      detail: { index },
+    } = e;
+    Toast({
+      context: this,
+      selector: '#t-toast',
+      message: `删除第${index + 1}个`,
+    });
+  },
+
+  onClose(e: any) {
+    const {
+      detail: { trigger },
+    } = e;
+    if (trigger === 'overlay') {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: '点击overlay关闭',
+      });
+    } else if (trigger === 'button') {
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `点击button关闭`,
+      });
+    }
+    this.setData({
+      visible: false,
+    });
+  },
+});

example/pages/image-viewer/image-viewer.wxml

@@ -0,0 +1,16 @@
+<view class="image-viewer">
+  <view class="demo-title">ImageViewer 图片预览</view>
+  <view class="demo-desc">图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范</view>
+  <t-demo title="01 类型" desc="" operList="{{operList1}}" bindclickoper="clickHandle" />
+  <t-toast id="t-toast" />
+  <t-image-viewer
+    deleteBtn="{{deleteBtn}}"
+    closeBtn="{{closeBtn}}"
+    showIndex="{{showIndex}}"
+    visible="{{visible}}"
+    images="{{images}}"
+    bind:change="onChange"
+    bind:delete="onDelete"
+    bind:close="onClose"
+  />
+</view>

example/project.config.json

@@ -86,6 +86,12 @@
           "name": "actionSheet",
           "pathName": "pages/action-sheet/action-sheet",
           "scene": null
+        },
+        {
+          "id": -1,
+          "name": "image-viewer",
+          "pathName": "pages/image-viewer/image-viewer",
+          "scene": null
         }
       ]
     }

src/image-viewer/README.md

@@ -0,0 +1,100 @@
+---
+title: ImageViewer 图片预览
+description: 图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范。
+spline: data
+isComponent: true
+---
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer",
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<t-image-viewer
+  visible="{{visible}}"
+  images="{{images}}"
+  bind:visible-change="onVisibleChange"
+  bind:change="onChange"
+/>
+```
+
+### 显示页码
+
+```html
+<t-image-viewer
+  showIndex="{{showIndex}}"
+  visible="{{visible}}"
+  images="{{images}}"
+  initialIndex="{{initialIndex}}"
+  bind:close="onClose"
+  bind:change="onChange"
+/>
+```
+
+### 带删除操作
+
+```html
+<t-image-viewer
+  deleteBtn="{{deleteBtn}}"
+  closeBtn="{{closeBtn}}"
+  showIndex="{{showIndex}}"
+  visible="{{visible}}"
+  images="{{images}}"
+  initialIndex="{{initialIndex}}"
+  bind:change="onChange"
+  bind:delete="onDelete"
+  bind:close="onClose"
+/>
+```
+
+### 支持自定义操作按钮
+
+```html
+<t-image-viewer
+  showIndex="{{showIndex}}"
+  visible="{{visible}}"
+  images="{{images}}"
+  initialIndex="{{initialIndex}}"
+  bind:change="onChange"
+/>
+  <view class="closeBtn">我是自定义的关闭内容</view>
+  <view class="deleteBtn">我是自定义的删除内容</view>
+</t-image-viewer>
+```
+
+
+## API
+
+### ImageViewer Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+background-color | String / Number | rgba(0, 0, 0, 1) | 遮罩的背景颜色 | N
+images | Array | [] | 图片数组。TS 类型：`Array<string>` | N
+initial-index | Number | 0 | 默认展示第几项 | N
+show-index | Boolean | false | 是否显示页码 | N
+delete-btn | Boolean | false | 是否显示删除操作，前提需要开启页码 | N 
+close-btn | Boolean | false | 是否显示关闭操作，前提需要开启页码 | N 
+visible | Boolean | false | 隐藏/显示预览 | N
+default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 | N
+
+
+
+### ImageViewer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(index: Number)` | 翻页时回调 
+close | `(trigger: 'overlay' | 'button' , visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发 
+delete | `(index: Number)` | 点击删除操作按钮时触发 
+

src/image-viewer/image-viewer.json

@@ -0,0 +1,9 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-image": "../image/image",
+    "t-icon": "../icon/icon",
+    "t-swiper": "../swiper/swiper",
+    "t-swiper-item": "../swiper/swiper-item"
+  }
+}