project init & fix ui

miniprogram_npm/tdesign-miniprogram/image-viewer/README.md

@@ -0,0 +1,66 @@
+---
+title: ImageViewer 图片预览
+description: 图片全屏放大预览效果，包含全屏背景色、页码位置样式、增加操作等规范。
+spline: data
+isComponent: true
+---
+
+<span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20lines-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20functions-88%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20statements-90%25-blue" /></span><span class="coverages-badge" style="margin-right: 10px"><img src="https://img.shields.io/badge/coverages%3A%20branches-88%25-blue" /></span>
+
+<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
+  <svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
+    <path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
+  </svg>
+  该组件于 0.10.0 版本上线，请留意版本。
+</div>
+
+## 引入
+
+全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
+
+```json
+"usingComponents": {
+  "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer",
+}
+```
+
+## 代码演示
+
+### 类型
+
+基础图片预览
+
+{{ base }}
+
+带操作图片预览
+
+{{ delete }}
+
+
+## API
+
+### ImageViewer Props
+
+名称 | 类型 | 默认值 | 说明 | 必传
+-- | -- | -- | -- | --
+custom-style `v0.25.0` | String | - | 自定义组件样式 | N
+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 / String / Object / Slot | false | 是否显示删除操作，前提需要开启页码。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽，值为 `true` 表示使用默认图标 `delete`，值为 `Object` 类型，表示透传至 `icon`，不传表示不显示图标。 | N
+ | N
+close-btn | Boolean / String / Object / Slot | false | 是否显示关闭操作，前提需要开启页码。值为字符串表示图标名称，值为 `'slot'` 表示使用插槽，值为 `true` 表示使用默认图标 `close`，值为 `Object` 类型，表示透传至 `icon` ，不传表示不显示图标。 | N
+ | N
+visible | Boolean | false | 隐藏/显示预览 | N
+default-visible | Boolean | undefined | 隐藏/显示预览。非受控属性 |
+
+
+### ImageViewer Events
+
+名称 | 参数 | 描述
+-- | -- | --
+change | `(index: Number)` | 翻页时回调
+close | `(trigger: 'overlay' | 'button' , visible: Boolean, index: Number)` | 点击操作按钮button或者overlay时触发
+delete | `(index: Number)` | 点击删除操作按钮时触发
+

miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.d.ts

@@ -0,0 +1,86 @@
+import { SuperComponent } from '../common/src/index';
+export default class ImageViewer extends SuperComponent {
+    externalClasses: string[];
+    properties: {
+        customStyle?: {
+            type: StringConstructor;
+            value?: string;
+        };
+        backgroundColor?: {
+            type: StringConstructor;
+            optionalTypes: NumberConstructor[];
+            value?: string | number;
+        };
+        images?: {
+            type: ArrayConstructor;
+            value?: string[];
+        };
+        initialIndex?: {
+            type: NumberConstructor;
+            value?: number;
+        };
+        showIndex?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        deleteBtn?: {
+            type: null;
+            value?: string | boolean | object;
+        };
+        closeBtn?: {
+            type: null;
+            value?: string | boolean | object;
+        };
+        visible?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+        defaultVisible?: {
+            type: BooleanConstructor;
+            value?: boolean;
+        };
+    };
+    data: {
+        prefix: string;
+        classPrefix: string;
+        currentSwiperIndex: number;
+        windowHeight: number;
+        windowWidth: number;
+        imagesShape: {};
+    };
+    options: {
+        multipleSlots: boolean;
+    };
+    controlledProps: {
+        key: string;
+        event: string;
+    }[];
+    ready(): void;
+    observers: {
+        visible(value: any): void;
+        closeBtn(closeBtn: any): void;
+        deleteBtn(deleteBtn: any): void;
+    };
+    methods: {
+        saveScreenSize(): void;
+        calcImageDisplayStyle(imageWidth: any, imageHeight: any): {
+            styleObj: {
+                width: string;
+                height: string;
+                left: string;
+                transform: string;
+            };
+        } | {
+            styleObj: {
+                width: string;
+                height: string;
+                left?: undefined;
+                transform?: undefined;
+            };
+        };
+        onImageLoadSuccess(e: WechatMiniprogram.TouchEvent): void;
+        onSwiperChange(e: WechatMiniprogram.TouchEvent): void;
+        onClose(): void;
+        onDelete(): void;
+    };
+}

miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.js

@@ -0,0 +1,121 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { styles, setIcon } from '../common/utils';
+import { SuperComponent, wxComponent } from '../common/src/index';
+import config from '../common/config';
+import props from './props';
+const { prefix } = config;
+const name = `${prefix}-image-viewer`;
+let ImageViewer = class ImageViewer extends SuperComponent {
+    constructor() {
+        super(...arguments);
+        this.externalClasses = [`${prefix}-class`];
+        this.properties = Object.assign({}, props);
+        this.data = {
+            prefix,
+            classPrefix: name,
+            currentSwiperIndex: 0,
+            windowHeight: 0,
+            windowWidth: 0,
+            imagesShape: {},
+        };
+        this.options = {
+            multipleSlots: true,
+        };
+        this.controlledProps = [
+            {
+                key: 'visible',
+                event: 'close',
+            },
+        ];
+        this.observers = {
+            visible(value) {
+                this.setData({
+                    currentSwiperIndex: value ? this.properties.initialIndex : 0,
+                });
+            },
+            closeBtn(closeBtn) {
+                const obj = setIcon('closeBtn', closeBtn, 'close');
+                this.setData(Object.assign({}, obj));
+            },
+            deleteBtn(deleteBtn) {
+                const obj = setIcon('deleteBtn', deleteBtn, 'delete');
+                this.setData(Object.assign({}, obj));
+            },
+        };
+        this.methods = {
+            saveScreenSize() {
+                const { windowHeight, windowWidth } = wx.getSystemInfoSync();
+                this.setData({
+                    windowHeight,
+                    windowWidth,
+                });
+            },
+            calcImageDisplayStyle(imageWidth, imageHeight) {
+                const { windowWidth, windowHeight } = this.data;
+                const ratio = imageWidth / imageHeight;
+                if (imageWidth < windowWidth && imageHeight < windowHeight) {
+                    return {
+                        styleObj: {
+                            width: `${imageWidth * 2}rpx`,
+                            height: `${imageHeight * 2}rpx`,
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                        },
+                    };
+                }
+                if (ratio >= 1) {
+                    return {
+                        styleObj: {
+                            width: '100vw',
+                            height: `${(windowWidth / ratio) * 2}rpx`,
+                        },
+                    };
+                }
+                return {
+                    styleObj: {
+                        width: `${ratio * windowHeight * 2}rpx`,
+                        height: '100vh',
+                        left: '50%',
+                        transform: 'translate(-50%, -50%)',
+                    },
+                };
+            },
+            onImageLoadSuccess(e) {
+                const { detail: { width, height }, currentTarget: { dataset: { index }, }, } = e;
+                const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
+                const origin = this.data.imagesShape;
+                this.setData({
+                    imagesShape: Object.assign(Object.assign({}, origin), { [index]: {
+                            mode,
+                            style: styles(Object.assign({}, styleObj)),
+                        } }),
+                });
+            },
+            onSwiperChange(e) {
+                const { detail: { current }, } = e;
+                this.setData({
+                    currentSwiperIndex: current,
+                });
+                this._trigger('change', { index: current });
+            },
+            onClose() {
+                this._trigger('close', { visible: false, trigger: 'button', index: this.data.currentSwiperIndex });
+            },
+            onDelete() {
+                this._trigger('delete', { index: this.data.currentSwiperIndex });
+            },
+        };
+    }
+    ready() {
+        this.saveScreenSize();
+    }
+};
+ImageViewer = __decorate([
+    wxComponent()
+], ImageViewer);
+export default ImageViewer;

miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.json

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

miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.wxml

@@ -0,0 +1,59 @@
+<import src="../common/template/icon.wxml" />
+<wxs src="../common/utils.wxs" module="_" />
+
+<view wx:if="{{visible}}" id="{{classPrefix}}" class="{{classPrefix}} {{prefix}}-class">
+  <view class="{{classPrefix}}__mask" style="{{ 'background-color: ' + backgroundColor }}" />
+  <block wx:if="{{images && images.length}}">
+    <view slot="content" class="{{classPrefix}}__content">
+      <swiper
+        height="{{windowHeight * 2}}"
+        class="swiper"
+        autoplay="{{false}}"
+        current="{{currentSwiperIndex}}"
+        bindchange="onSwiperChange"
+      >
+        <swiper-item
+          wx:for="{{images}}"
+          wx:key="index"
+          class="{{classPrefix}}__preview-image"
+          data-source="overlay"
+          bind:tap="onClose"
+        >
+          <t-image
+            t-class="t-image--external"
+            style="{{imagesShape[index].style}}"
+            mode="aspectFit"
+            lazy
+            src="{{item}}"
+            data-index="{{index}}"
+            class="{{classPrefix}}__image"
+            bindload="onImageLoadSuccess"
+          ></t-image>
+        </swiper-item>
+      </swiper>
+    </view>
+    <view class="{{classPrefix}}__nav">
+      <view
+        wx:if="{{closeBtnName || _.isNoEmptyObj(closeBtnData)}}"
+        class="{{classPrefix}}__nav-close"
+        bind:tap="onClose"
+      >
+        <slot wx:if="{{closeBtnName === 'slot'}}" name="close-btn" />
+        <template wx:else is="icon" data="{{ name: closeBtnName, ...closeBtnData}}"></template>
+      </view>
+
+      <view wx:if="{{showIndex}}" class="{{classPrefix}}__nav-index">
+        {{currentSwiperIndex + 1}}/{{images.length}}
+      </view>
+
+      <view
+        wx:if="{{deleteBtnName || _.isNoEmptyObj(deleteBtnData)}}"
+        class="{{classPrefix}}__nav-delete"
+        bind:tap="onDelete"
+      >
+        <slot wx:if="{{deleteBtnName === 'slot'}}" name="delete-btn" />
+        <template wx:else is="icon" data="{{ name: deleteBtnName, ...deleteBtnData}}"></template>
+      </view>
+    </view>
+  </block>
+</view>

miniprogram_npm/tdesign-miniprogram/image-viewer/image-viewer.wxss

@@ -0,0 +1,93 @@
+.t-float-left {
+  float: left;
+}
+.t-float-right {
+  float: right;
+}
+@keyframes tdesign-fade-out {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+.hotspot-expanded.relative {
+  position: relative;
+}
+.hotspot-expanded::after {
+  content: '';
+  display: block;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  transform: scale(1.5);
+}
+.t-image-viewer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1001;
+  height: 100%;
+  transform: translateZ(0);
+  overflow: hidden;
+}
+.t-image-viewer__mask {
+  position: fixed;
+  z-index: 1000;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
+.t-image-viewer__content {
+  width: 100vw;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 1005;
+}
+.t-image-viewer__image {
+  width: 100%;
+  display: inline-block;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.t-image-viewer .t-image--external {
+  width: inherit;
+  height: inherit;
+  display: block;
+}
+.t-image-viewer__nav {
+  width: 100%;
+  position: fixed;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: var(--td-image-viewer-nav-height, 96rpx);
+  background-color: var(--td-image-viewer-nav-bg-color, var(--td-font-gray-3, rgba(0, 0, 0, 0.4)));
+  left: 0;
+  color: var(--td-image-viewer-nav-color, var(--td-text-anti-primary-color, #fff));
+  z-index: 1005;
+}
+.t-image-viewer__nav-close {
+  margin-left: var(--td-image-viewer-close-margin-left, var(--td-spacer-1, 24rpx));
+}
+.t-image-viewer__nav-delete {
+  margin-right: var(--td-image-viewer-delete-margin-right, var(--td-spacer-1, 24rpx));
+}
+.t-image-viewer__nav-close,
+.t-image-viewer__nav-delete {
+  font-size: 48rpx;
+}
+.t-image-viewer__nav-index {
+  flex: 1;
+  font-size: var(--td-image-viewer-nav-index-font-size, var(--td-font-size-base, 28rpx));
+  text-align: center;
+}

miniprogram_npm/tdesign-miniprogram/image-viewer/props.d.ts

@@ -0,0 +1,3 @@
+import { TdImageViewerProps } from './type';
+declare const props: TdImageViewerProps;
+export default props;

miniprogram_npm/tdesign-miniprogram/image-viewer/props.js

@@ -0,0 +1,40 @@
+const props = {
+    customStyle: {
+        type: String,
+        value: '',
+    },
+    backgroundColor: {
+        type: String,
+        optionalTypes: [Number],
+        value: 'rgba(0, 0, 0, 1)',
+    },
+    images: {
+        type: Array,
+        value: [],
+    },
+    initialIndex: {
+        type: Number,
+        value: 0,
+    },
+    showIndex: {
+        type: Boolean,
+        value: false,
+    },
+    deleteBtn: {
+        type: null,
+        value: false,
+    },
+    closeBtn: {
+        type: null,
+        value: false,
+    },
+    visible: {
+        type: Boolean,
+        value: null,
+    },
+    defaultVisible: {
+        type: Boolean,
+        value: false,
+    },
+};
+export default props;

miniprogram_npm/tdesign-miniprogram/image-viewer/type.d.ts

@@ -0,0 +1,39 @@
+export interface TdImageViewerProps {
+    customStyle?: {
+        type: StringConstructor;
+        value?: string;
+    };
+    backgroundColor?: {
+        type: StringConstructor;
+        optionalTypes: Array<NumberConstructor>;
+        value?: string | number;
+    };
+    images?: {
+        type: ArrayConstructor;
+        value?: Array<string>;
+    };
+    initialIndex?: {
+        type: NumberConstructor;
+        value?: number;
+    };
+    showIndex?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    deleteBtn?: {
+        type: null;
+        value?: boolean | string | object;
+    };
+    closeBtn?: {
+        type: null;
+        value?: boolean | string | object;
+    };
+    visible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+    defaultVisible?: {
+        type: BooleanConstructor;
+        value?: boolean;
+    };
+}

miniprogram_npm/tdesign-miniprogram/image-viewer/type.js

@@ -0,0 +1 @@
+export {};