@tdesign/uniapp 0.7.3 → 0.8.1

package/dist/icon/icon.vue

@@ -1,7 +1,7 @@
 <template>
   <view
     :class="[tClass, prefix || 't-icon']"
-    :style="tools._style([iconStyle, customStyle])"
+    :style="'' + tools._style([iconStyle, customStyle])"
     :aria-hidden="ariaHidden"
     :aria-label="ariaLabel"
     :aria-role="ariaRole"
@@ -32,88 +32,90 @@ import tools from '../common/utils.wxs';
 
 
 const name = `${prefix}-icon`;
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [`${prefix}-class`],
-  props: {
-    ...props,
-  },
-  data() {
-    return {
-      componentPrefix: prefix,
-      classPrefix: name,
-      isImage: false,
-      iconStyle: undefined,
-      tools,
-    };
-  },
-  watch: {
-    name: {
-      handler() {
-        this.setIconStyle();
-      },
-      immediate: true,
+export default {
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    color: {
-      handler() {
-        this.setIconStyle();
-      },
-      immediate: true,
+    externalClasses: [`${prefix}-class`],
+    props: {
+      ...props,
     },
-    size: {
-      handler() {
-        this.setIconStyle();
-      },
-      immediate: true,
+    data() {
+      return {
+        componentPrefix: prefix,
+        classPrefix: name,
+        isImage: false,
+        iconStyle: undefined,
+        tools,
+      };
     },
-    style: {
-      handler() {
-        this.setIconStyle();
+    watch: {
+      name: {
+        handler() {
+          this.setIconStyle();
+        },
+        immediate: true,
+      },
+      color: {
+        handler() {
+          this.setIconStyle();
+        },
+        immediate: true,
+      },
+      size: {
+        handler() {
+          this.setIconStyle();
+        },
+        immediate: true,
+      },
+      style: {
+        handler() {
+          this.setIconStyle();
+        },
+        immediate: true,
       },
-      immediate: true,
-    },
-  },
-  methods: {
-    onTap(t) {
-      this.$emit('click', t);
     },
-    setIconStyle() {
-      const {
-        name,
-        color,
-        size,
-        classPrefix,
-      } = this;
-      const isImage = name.indexOf('/') !== -1;
-      const sizeValue = size !== null && size !== '' ? addUnit(size) : undefined;
-      const colorStyle = color ? {
-        color,
-      } : {};
-      const fontStyle = size ? {
-        'font-size': sizeValue,
-      } : {};
-      const iconStyle = { ...colorStyle, ...fontStyle };
-      this.isImage = isImage;
+    methods: {
+      onTap(t) {
+        this.$emit('click', t);
+      },
+      setIconStyle() {
+        const {
+          name,
+          color,
+          size,
+          classPrefix,
+        } = this;
+        const isImage = name.indexOf('/') !== -1;
+        const sizeValue = size !== null && size !== '' ? addUnit(size) : undefined;
+        const colorStyle = color ? {
+          color,
+        } : {};
+        const fontStyle = size ? {
+          'font-size': sizeValue,
+        } : {};
+        const iconStyle = { ...colorStyle, ...fontStyle };
+        this.isImage = isImage;
 
-      if (isImage) {
-        let iconSize = sizeValue;
-        if (!iconSize) {
-          getRect(this, `.${classPrefix}`)
-            .then((res) => {
-              iconSize = addUnit(res?.height);
-            })
-            .catch(() => {});
-        }
+        if (isImage) {
+          let iconSize = sizeValue;
+          if (!iconSize) {
+            getRect(this, `.${classPrefix}`)
+              .then((res) => {
+                iconSize = addUnit(res?.height);
+              })
+              .catch(() => {});
+          }
 
-        iconStyle.width = iconSize;
-        iconStyle.height = iconSize;
-      }
-      this.iconStyle = `${styles(iconStyle)}`;
+          iconStyle.width = iconSize;
+          iconStyle.height = iconSize;
+        }
+        this.iconStyle = `${styles(iconStyle)}`;
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./icon.css"></style>

package/dist/image/README.md

@@ -1,7 +1,7 @@
 ---
 title: Image 图片
 description: 用于展示效果，主要为上下左右居中裁切、拉伸、平铺等方式。
-spline: base
+spline: data
 isComponent: true
 ---
 
@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-image />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TImage from '@tdesign/uniapp/image/image.vue';

package/dist/image/image.vue

@@ -1,11 +1,11 @@
 <template>
   <view
-    :style="tools._style([customStyle])"
+    :style="'' + tools._style([customStyle])"
     :class="[tClass, classPrefix]"
   >
     <view
       v-if="isLoading"
-      :style="tools._style([innerStyle])"
+      :style="'' + tools._style([innerStyle])"
       :class="classPrefix + '__mask ' + classPrefix + '--loading ' + classPrefix + '--shape-' + shape"
       :aria-hidden="ariaHidden"
     >
@@ -31,7 +31,7 @@
     </view>
     <view
       v-else-if="isFailed"
-      :style="tools._style([innerStyle])"
+      :style="'' + tools._style([innerStyle])"
       :class="[
         classPrefix + '__mask ' + classPrefix + '--failed ' + classPrefix + '--shape-' + shape,
         tClassError
@@ -63,7 +63,7 @@
     <image
       v-if="!isFailed"
       :id="tId || 'image'"
-      :style="tools._style([innerStyle])"
+      :style="'' + tools._style([innerStyle])"
       :class="[
         classPrefix + '__img ' + classPrefix + '--shape-' + shape + ' ',
         (isLoading ? classPrefix + '--lazy' : '') + ' ',
@@ -94,112 +94,114 @@ import tools from '../common/utils.wxs';
 
 
 const name = `${prefix}-image`;
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-load`,
-    `${prefix}-class-image`,
-    `${prefix}-class-error`,
-  ],
+export default {
   components: {
     TLoading,
     TIcon,
   },
-  props: {
-    ...ImageProps,
-  },
-  emits: [
-    'click',
-  ],
-  data() {
-    return {
-      prefix,
-      isLoading: true,
-      isFailed: false,
-      innerStyle: '',
-      classPrefix: name,
-      tools,
-      preSrc: '',
-    };
-  },
-  watch: {
-    src() {
-      if (this.preSrc !== this.src) {
-        this.update();
-      }
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
     },
-    width: 'calcSize',
-    height: 'calcSize',
-  },
-  mounted() {
-    this.calcSize(this.width, this.height);
-  },
-  methods: {
-    onLoaded(e) {
-      const version = appBaseInfo.SDKVersion;
-      const {
-        mode,
-        tId,
-      } = this;
-
-      const lower = compareVersion(version, '2.10.3') < 0;
-      // #ifdef MP-WEIXIN || MP-QQ
-      if ('heightFix' === mode && lower) {
-        getRect(this, `#${tId || 'image'}`).then((e) => {
-          const {
-            height,
-            width,
-          } = e;
-
-          this.innerStyle = `height: ${addUnit(height)}; width: ${width}px;`;
-        })
-          .catch(() => {
-
-          });
-      }
-      // #endif
-      this.isLoading = false;
-      this.isFailed = false;
-      this.$emit('load', { e });
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-load`,
+      `${prefix}-class-image`,
+      `${prefix}-class-error`,
+    ],
+    props: {
+      ...ImageProps,
     },
-    onLoadError(e) {
-      this.isLoading = false;
-      this.isFailed = true;
-
-      this.$emit('error', { e });
+    emits: [
+      'click',
+    ],
+    data() {
+      return {
+        prefix,
+        isLoading: true,
+        isFailed: false,
+        innerStyle: '',
+        classPrefix: name,
+        tools,
+        preSrc: '',
+      };
     },
-    calcSize(width = this.width, height = this.height) {
-      let innerStyle = '';
-      if (width) {
-        innerStyle += `width: ${addUnit(width)};`;
-      }
-      if (height) {
-        innerStyle += `height: ${addUnit(height)};`;
-      }
-      this.innerStyle = innerStyle;
+    watch: {
+      src() {
+        if (this.preSrc !== this.src) {
+          this.update();
+        }
+      },
+      width: 'calcSize',
+      height: 'calcSize',
     },
-    update() {
-      const {
-        src,
-      } = this;
-      this.preSrc = src;
-      if (src) {
-        this.isLoading = true;
-        this.isFailed = false;
-      } else {
-        this.onLoadError({
-          errMsg: '图片链接为空',
-        });
-      }
+    mounted() {
+      this.calcSize(this.width, this.height);
     },
-    onClick(e) {
-      this.$emit('click', e);
+    methods: {
+      onLoaded(e) {
+        const version = appBaseInfo.SDKVersion;
+        const {
+          mode,
+          tId,
+        } = this;
+
+        const lower = compareVersion(version, '2.10.3') < 0;
+        // #ifdef MP-WEIXIN || MP-QQ
+        if ('heightFix' === mode && lower) {
+          getRect(this, `#${tId || 'image'}`).then((e) => {
+            const {
+              height,
+              width,
+            } = e;
+
+            this.innerStyle = `height: ${addUnit(height)}; width: ${width}px;`;
+          })
+            .catch(() => {
+
+            });
+        }
+        // #endif
+        this.isLoading = false;
+        this.isFailed = false;
+        this.$emit('load', { e });
+      },
+      onLoadError(e) {
+        this.isLoading = false;
+        this.isFailed = true;
+
+        this.$emit('error', { e });
+      },
+      calcSize(width = this.width, height = this.height) {
+        let innerStyle = '';
+        if (width) {
+          innerStyle += `width: ${addUnit(width)};`;
+        }
+        if (height) {
+          innerStyle += `height: ${addUnit(height)};`;
+        }
+        this.innerStyle = innerStyle;
+      },
+      update() {
+        const {
+          src,
+        } = this;
+        this.preSrc = src;
+        if (src) {
+          this.isLoading = true;
+          this.isFailed = false;
+        } else {
+          this.onLoadError({
+            errMsg: '图片链接为空',
+          });
+        }
+      },
+      onClick(e) {
+        this.$emit('click', e);
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./image.css"></style>

package/dist/image-viewer/README.md

@@ -9,7 +9,9 @@ isComponent: true
 
 ## 引入
 
-可在 `main.ts` 或在需要使用的页面或组件中引入。
+推荐使用 easycom 模式引入组件，配置后无需手动 import 即可直接在模板中使用 `<t-image-viewer />`。详细配置请参考 [快速开始](../getting-started)。
+
+如需手动引入：
 
 ```js
 import TImageViewer from '@tdesign/uniapp/image-viewer/image-viewer.vue';