@tdesign/uniapp 0.7.2 → 0.8.0

package/dist/image-viewer/image-viewer.vue

@@ -3,7 +3,7 @@
     v-if="dataVisible"
     :id="classPrefix"
     :class="classPrefix + ' ' + tClass"
-    :style="tools._style([customStyle, '--td-image-viewer-top: ' + distanceTop + 'px'])"
+    :style="'' + tools._style([customStyle, '--td-image-viewer-top: ' + distanceTop + 'px'])"
     :aria-modal="true"
     aria-role="dialog"
     aria-label="图片查看器"
@@ -12,7 +12,7 @@
     <view
       :class="classPrefix + '__mask'"
       data-source="overlay"
-      :style="tools._style([backgroundColor && '--td-image-viewer-mask-bg-color: ' + backgroundColor])"
+      :style="'' + tools._style([backgroundColor && '--td-image-viewer-mask-bg-color: ' + backgroundColor])"
       aria-role="button"
       aria-label="关闭"
       @click="(e) => onClose(e, 'overlay')"
@@ -46,7 +46,7 @@
               :shape="(imageProps && imageProps.shape) || 'square'"
               :webp="(imageProps && imageProps.webp) || false"
               :show-menu-by-longpress="(imageProps && imageProps.showMenuByLongpress) || false"
-              @load="onImageLoadSuccess($event, { index })"
+              @load="(e) => onImageLoadSuccess(e, { index })"
             />
           </swiper-item>
         </swiper>
@@ -124,191 +124,193 @@ import useCustomNavbar from '../mixins/using-custom-navbar';
 
 const name = `${prefix}-image-viewer`;
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  controlledProps: [
-    {
-      key: 'visible',
-      event: 'close',
-    },
-  ],
-  externalClasses: [`${prefix}-class`],
-  mixins: [useCustomNavbar],
+export default {
   components: {
     TImage,
     TIcon,
   },
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      currentSwiperIndex: 0,
-      loadedImageIndexes: [],
-      windowHeight: 0,
-      windowWidth: 0,
-      swiperStyle: {},
-      imagesStyle: {},
-      maskTop: 0,
-      tools,
-
-      iDeleteBtn: null,
-      iCloseBtn: null,
-      dataVisible: this.visible,
-    };
-  },
-  watch: {
-    visible: {
-      handler(v) {
-        this.dataVisible = v;
-        this.init();
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    controlledProps: [
+      {
+        key: 'visible',
+        event: 'close',
       },
+    ],
+    externalClasses: [`${prefix}-class`],
+    mixins: [useCustomNavbar],
+    props: {
+      ...props,
     },
-    initialIndex: 'init',
-    images: 'init',
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        currentSwiperIndex: 0,
+        loadedImageIndexes: [],
+        windowHeight: 0,
+        windowWidth: 0,
+        swiperStyle: {},
+        imagesStyle: {},
+        maskTop: 0,
+        tools,
 
-    closeBtn: {
-      handler(v) {
-        this.iCloseBtn = calcIcon(v, 'close');
-      },
-      immediate: true,
+        iDeleteBtn: null,
+        iCloseBtn: null,
+        dataVisible: this.visible,
+      };
     },
+    watch: {
+      visible: {
+        handler(v) {
+          this.dataVisible = v;
+          this.init();
+        },
+      },
+      initialIndex: 'init',
+      images: 'init',
 
-    deleteBtn: {
-      handler(v) {
-        this.iDeleteBtn =  calcIcon(v, 'delete');
+      closeBtn: {
+        handler(v) {
+          this.iCloseBtn = calcIcon(v, 'close');
+        },
+        immediate: true,
+      },
+
+      deleteBtn: {
+        handler(v) {
+          this.iDeleteBtn =  calcIcon(v, 'delete');
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  created() {
-    this.saveScreenSize();
+    created() {
+      this.saveScreenSize();
     // this.calcMaskTop();
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    shouldLoadImage,
-    init() {
-      const { visible: dataVisible, images, initialIndex } = this;
-      if (dataVisible && images?.length) {
-        this.loadedImageIndexes = [];
-        this.currentSwiperIndex =  initialIndex >= images.length ? images.length - 1 : initialIndex;
-      }
     },
-    calcMaskTop() {
-      if (this.usingCustomNavbar) {
-        const rect = wx?.getMenuButtonBoundingClientRect() || null;
-        const { statusBarHeight } = systemInfo;
+    mounted() {
+      this.init();
+    },
+    methods: {
+      shouldLoadImage,
+      init() {
+        const { visible: dataVisible, images, initialIndex } = this;
+        if (dataVisible && images?.length) {
+          this.loadedImageIndexes = [];
+          this.currentSwiperIndex =  initialIndex >= images.length ? images.length - 1 : initialIndex;
+        }
+      },
+      calcMaskTop() {
+        if (this.usingCustomNavbar) {
+          const rect = wx?.getMenuButtonBoundingClientRect() || null;
+          const { statusBarHeight } = systemInfo;
 
-        if (rect && statusBarHeight) {
-          this.maskTop =  rect.top - statusBarHeight + rect.bottom;
+          if (rect && statusBarHeight) {
+            this.maskTop =  rect.top - statusBarHeight + rect.bottom;
+          }
         }
-      }
-    },
-    saveScreenSize() {
-      const { windowHeight, windowWidth } = systemInfo;
-      this.windowHeight = windowHeight;
-      this.windowWidth = windowWidth;
-    },
+      },
+      saveScreenSize() {
+        const { windowHeight, windowWidth } = systemInfo;
+        this.windowHeight = windowHeight;
+        this.windowWidth = windowWidth;
+      },
 
-    calcImageDisplayStyle(imageWidth, imageHeight) {
-      const { windowWidth, windowHeight } = this;
-      const ratio = imageWidth / imageHeight;
-      // 图片宽高都小于屏幕宽高
-      if (imageWidth < windowWidth && imageHeight < windowHeight) {
-        return {
-          styleObj: {
-            width: `${imageWidth}px`,
-            height: `${imageHeight}px`,
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
-          },
-        };
-      }
-      // 图片宽高至少存在一个大于屏幕宽高，此时判断图片宽高比，按长边显示
-      if (ratio >= 1) {
-        return {
-          styleObj: {
-            width: '100vw',
-            height: `${(windowWidth / ratio)}px`,
-          },
-        };
-      }
+      calcImageDisplayStyle(imageWidth, imageHeight) {
+        const { windowWidth, windowHeight } = this;
+        const ratio = imageWidth / imageHeight;
+        // 图片宽高都小于屏幕宽高
+        if (imageWidth < windowWidth && imageHeight < windowHeight) {
+          return {
+            styleObj: {
+              width: `${imageWidth}px`,
+              height: `${imageHeight}px`,
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+            },
+          };
+        }
+        // 图片宽高至少存在一个大于屏幕宽高，此时判断图片宽高比，按长边显示
+        if (ratio >= 1) {
+          return {
+            styleObj: {
+              width: '100vw',
+              height: `${(windowWidth / ratio)}px`,
+            },
+          };
+        }
 
-      // 图片的高大于宽（纵向图），设定高度为100vh，宽度自适应，且确保宽度不超过屏幕宽度
-      const scaledHeight = ratio * windowHeight * 2;
-      if (scaledHeight < windowWidth) {
+        // 图片的高大于宽（纵向图），设定高度为100vh，宽度自适应，且确保宽度不超过屏幕宽度
+        const scaledHeight = ratio * windowHeight * 2;
+        if (scaledHeight < windowWidth) {
+          return {
+            styleObj: {
+              width: `${scaledHeight}rpx`,
+              height: '100vh',
+              left: '50%',
+              transform: 'translate(-50%, -50%)',
+            },
+          };
+        }
+        // 当通过高度计算的图片宽度超过屏幕宽度时, 以屏幕宽度为基准, 重新计算高度
         return {
           styleObj: {
-            width: `${scaledHeight}rpx`,
-            height: '100vh',
-            left: '50%',
-            transform: 'translate(-50%, -50%)',
+            width: '100vw',
+            height: `${(windowWidth / imageWidth) * imageHeight}px`,
           },
         };
-      }
-      // 当通过高度计算的图片宽度超过屏幕宽度时, 以屏幕宽度为基准, 重新计算高度
-      return {
-        styleObj: {
-          width: '100vw',
-          height: `${(windowWidth / imageWidth) * imageHeight}px`,
-        },
-      };
-    },
+      },
 
-    onImageLoadSuccess({ e }, { index }) {
-      const {
-        detail: { width, height },
-      } = e;
+      onImageLoadSuccess({ e }, { index }) {
+        const {
+          detail: { width, height },
+        } = e;
 
-      const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
-      const originImagesStyle = this.imagesStyle;
-      const originSwiperStyle = this.swiperStyle;
+        const { mode, styleObj } = this.calcImageDisplayStyle(width, height);
+        const originImagesStyle = this.imagesStyle;
+        const originSwiperStyle = this.swiperStyle;
 
-      if (!this.loadedImageIndexes.includes(index)) {
-        this.loadedImageIndexes = [...this.loadedImageIndexes, index];
-      }
+        if (!this.loadedImageIndexes.includes(index)) {
+          this.loadedImageIndexes = [...this.loadedImageIndexes, index];
+        }
 
 
-      this.swiperStyle = {
-        ...originSwiperStyle,
-        [index]: {
-          style: `height: ${styleObj.height}`,
-        },
-      };
-      this.imagesStyle = {
-        ...originImagesStyle,
-        [index]: {
-          mode,
-          style: styles({ ...styleObj }),
-        },
-      };
-    },
+        this.swiperStyle = {
+          ...originSwiperStyle,
+          [index]: {
+            style: `height: ${styleObj.height}`,
+          },
+        };
+        this.imagesStyle = {
+          ...originImagesStyle,
+          [index]: {
+            mode,
+            style: styles({ ...styleObj }),
+          },
+        };
+      },
 
-    onSwiperChange(e) {
-      const {
-        detail: { current },
-      } = e;
-      this.currentSwiperIndex = current;
+      onSwiperChange(e) {
+        const {
+          detail: { current },
+        } = e;
+        this.currentSwiperIndex = current;
 
-      this._trigger('change', { index: current });
-    },
+        this._trigger('change', { index: current });
+      },
 
-    onClose(e, source) {
-      this._trigger('close', { visible: false, trigger: source || 'button', index: this.currentSwiperIndex });
-    },
+      onClose(e, source) {
+        this._trigger('close', { visible: false, trigger: source || 'button', index: this.currentSwiperIndex });
+      },
 
-    onDelete() {
-      this._trigger('delete', { index: this.currentSwiperIndex });
+      onDelete() {
+        this._trigger('delete', { index: this.currentSwiperIndex });
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./image-viewer.css"></style>

package/dist/image-viewer/props.ts

@@ -46,8 +46,8 @@ export default {
   usingCustomNavbar: Boolean,
   /** 隐藏/显示预览 */
   visible: {
-    type: Boolean,
-    default: undefined,
+    type: [Boolean, null],
+    default: null as TdImageViewerProps['visible'],
   },
   /** 隐藏/显示预览，非受控属性 */
   defaultVisible: Boolean,

package/dist/image-viewer/type.ts

@@ -55,7 +55,7 @@ export interface TdImageViewerProps {
    * 隐藏/显示预览
    * @default false
    */
-  visible?: boolean;
+  visible?: boolean | null;
   /**
    * 隐藏/显示预览，非受控属性
    * @default false

package/dist/index.js

@@ -0,0 +1,3 @@
+// This file is intentionally empty.
+// It serves as the runtime entry point for module resolvers.
+// All meaningful exports from this package are type-only.