Merge pull request #712 from Tencent/docs/image-viewer

docs(image-viewer): update code sample

src/image-viewer/README.md

@@ -17,60 +17,23 @@ isComponent: true
 
 ## 代码演示
 
-### 基础用法
-
-```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"
-/>
-```
+{{ base }}
+
+### 有删除操作
+
+{{ delete }}
+
+### 图片超高情况
+
+{{ over-height }}
+
+### 图片超宽情况
+
+{{ over-width }}
 
-### 带删除操作
-
-```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
@@ -83,8 +46,8 @@ background-color | String / Number | rgba(0, 0, 0, 1) | 遮罩的背景颜色 |
 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 
+delete-btn | Boolean | false | 是否显示删除操作，前提需要开启页码 | N
+close-btn | Boolean | false | 是否显示关闭操作，前提需要开启页码 | N
 visible | Boolean | false | 隐藏/显示预览 | N
 default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 | N
 
@@ -94,7 +57,7 @@ default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 |
 
 名称 | 参数 | 描述
 -- | -- | --
-change | `(index: Number)` | 翻页时回调 
-close | `(trigger: 'overlay' | 'button' , visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发 
-delete | `(index: Number)` | 点击删除操作按钮时触发 
+change | `(index: Number)` | 翻页时回调
+close | `(trigger: 'overlay' | 'button' , visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
+delete | `(index: Number)` | 点击删除操作按钮时触发
 

src/image-viewer/_example/base/index.js

@@ -0,0 +1,67 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+
+Component({
+  data: {
+    visible: false,
+    showIndex: false,
+    closeBtn: false,
+    deleteBtn: false,
+    images: [],
+  },
+  methods: {
+    clickHandle() {
+      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,
+      });
+    },
+    onChange(e) {
+      const {
+        detail: { index },
+      } = e;
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `翻到第${index + 1}个`,
+      });
+    },
+
+    onDelete(e) {
+      const {
+        detail: { index },
+      } = e;
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `删除第${index + 1}个`,
+      });
+    },
+
+    onClose(e) {
+      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,
+      });
+    },
+  },
+});

src/image-viewer/_example/base/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
+  }
+}

src/image-viewer/_example/base/index.wxml

@@ -0,0 +1,12 @@
+<t-button size="large" block bind:tap="clickHandle">基础图片预览</t-button>
+<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"
+></t-image-viewer>

src/image-viewer/_example/delete/index.js

@@ -0,0 +1,69 @@
+import Toast from 'tdesign-miniprogram/toast/index';
+
+Component({
+  data: {
+    visible: false,
+    showIndex: false,
+    closeBtn: false,
+    deleteBtn: false,
+    images: [],
+  },
+  methods: {
+    clickHandle() {
+      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,
+      });
+    },
+    onChange(e) {
+      const {
+        detail: { index },
+      } = e;
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `翻到第${index + 1}个`,
+      });
+    },
+
+    onDelete(e) {
+      const {
+        detail: { index },
+      } = e;
+      Toast({
+        context: this,
+        selector: '#t-toast',
+        message: `删除第${index + 1}个`,
+      });
+    },
+
+    onClose(e) {
+      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,
+      });
+    },
+  },
+});

src/image-viewer/_example/delete/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-toast": "tdesign-miniprogram/toast/toast",
+    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
+  }
+}

src/image-viewer/_example/delete/index.wxml

@@ -0,0 +1,12 @@
+<t-button block bind:tap="clickHandle">有删除操作</t-button>
+<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"
+></t-image-viewer>

src/image-viewer/_example/image-viewer.json

@@ -2,6 +2,10 @@
   "navigationBarTitleText": "ImageViewer",
   "navigationBarBackgroundColor": "#fff",
   "usingComponents": {
-    "t-demo": "../../components/demo-block/index"
+    "t-demo": "../../components/demo-block/index",
+    "base": "./base",
+    "delete": "./delete",
+    "over-height": "./over-height",
+    "over-width": "./over-width"
   }
 }

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

@@ -1,62 +1,3 @@
-.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;
-  }
+.t-button {
+  margin-bottom: 32rpx;
 }