@tdesign/uniapp 0.7.3 → 0.8.0

package/dist/grid-item/grid-item.vue

@@ -4,7 +4,7 @@
       tools.cls(classPrefix, [['auto-size', column == 0]]),
       tClass
     ]"
-    :style="tools._style([gridItemStyle, customStyle])"
+    :style="'' + tools._style([gridItemStyle, customStyle])"
     :hover-class="hover ? classPrefix + '--hover' : ''"
     :hover-stay-time="200"
     :aria-role="ariaRole || 'button'"
@@ -13,7 +13,7 @@
     @click="onClick"
   >
     <view
-      :class="tools.cls(classPrefix + '__wrapper', [layout])"
+      :class="'' + tools.cls(classPrefix + '__wrapper', [layout])"
       :style="gridItemWrapperStyle"
     >
       <view
@@ -60,8 +60,8 @@
                 :webp="imageProps.webp"
                 :show-menu-by-longpress="imageProps.showMenuByLongpress"
                 :data-custom="imageProps.dataset"
-                @error="binderror($event)"
-                @load="bindload($event)"
+                @error="binderror"
+                @load="bindload"
               />
             </block>
             <slot name="image" />
@@ -85,7 +85,7 @@
         </t-badge>
         <view
           :id="describedbyID"
-          :class="tools.cls(classPrefix + '__words', [layout])"
+          :class="'' + tools.cls(classPrefix + '__words', [layout])"
           :aria-label="ariaLabel
             || (
               (badgeProps && (badgeProps.dot || badgeProps.count))
@@ -142,144 +142,146 @@ const LinkTypes = {
   'navigate-to': 'navigateTo',
 };
 
-export default uniComponent({
-  name,
-  options: {
-    styleIsolation: 'shared',
-  },
-  externalClasses: [
-    `${prefix}-class`,
-    `${prefix}-class-content`,
-    `${prefix}-class-image`,
-    `${prefix}-class-text`,
-    `${prefix}-class-description`,
-  ],
-  mixins: [ChildrenMixin(RELATION_MAP.GridItem)],
+export default {
   components: {
     TImage,
     TIcon,
     TBadge,
   },
-  props: {
-    ...props,
-  },
-  emits: [
-    'click',
-  ],
-  data() {
-    return {
-      prefix,
-      classPrefix: name,
-      gridItemStyle: '',
-      gridItemWrapperStyle: '',
-      gridItemContentStyle: '',
-      align: 'center',
-      column: 0,
-      describedbyID: '',
-      tools,
+  ...uniComponent({
+    name,
+    options: {
+      styleIsolation: 'shared',
+    },
+    externalClasses: [
+      `${prefix}-class`,
+      `${prefix}-class-content`,
+      `${prefix}-class-image`,
+      `${prefix}-class-text`,
+      `${prefix}-class-description`,
+    ],
+    mixins: [ChildrenMixin(RELATION_MAP.GridItem)],
+    props: {
+      ...props,
+    },
+    emits: [
+      'click',
+    ],
+    data() {
+      return {
+        prefix,
+        classPrefix: name,
+        gridItemStyle: '',
+        gridItemWrapperStyle: '',
+        gridItemContentStyle: '',
+        align: 'center',
+        column: 0,
+        describedbyID: '',
+        tools,
 
-      iconName: '',
-      iconData: {},
+        iconName: '',
+        iconData: {},
 
-      hover: false,
-    };
-  },
-  watch: {
-    icon: {
-      handler(t) {
-        const obj = setIcon('icon', t, '');
+        hover: false,
+      };
+    },
+    watch: {
+      icon: {
+        handler(t) {
+          const obj = setIcon('icon', t, '');
 
-        Object.keys(obj).forEach((key) => {
-          this[key] = obj[key];
-        });
+          Object.keys(obj).forEach((key) => {
+            this[key] = obj[key];
+          });
+        },
+        immediate: true,
       },
-      immediate: true,
     },
-  },
-  mounted() {
-    this.describedbyID = getUniqueID();
-  },
-  methods: {
-    innerAfterLinked() {
-      this.updateStyle();
-      this.column = this[RELATION_MAP.GridItem].column;
+    mounted() {
+      this.describedbyID = getUniqueID();
     },
-    binderror() {},
-    bindload() {},
-    getImageSize(column) {
-      if (!column || column == 4) return 'middle';
-      return column > 4 ? 'small' : 'large';
-    },
-    updateStyle() {
-      const { hover, align } = this[RELATION_MAP.GridItem];
-      const gridItemStyles = [];
-      const gridItemWrapperStyles = [];
-      const gridItemContentStyles = [];
-      const widthStyle = this.getWidthStyle();
-      const paddingStyle = this.getPaddingStyle();
-      const borderStyle = this.getBorderStyle();
-      widthStyle && gridItemStyles.push(widthStyle);
-      paddingStyle && gridItemWrapperStyles.push(paddingStyle);
-      borderStyle && gridItemContentStyles.push(borderStyle);
+    methods: {
+      innerAfterLinked() {
+        this.updateStyle();
+        this.column = this[RELATION_MAP.GridItem].column;
+      },
+      binderror() {},
+      bindload() {},
+      getImageSize(column) {
+        if (!column || column == 4) return 'middle';
+        return column > 4 ? 'small' : 'large';
+      },
+      updateStyle() {
+        const { hover, align } = this[RELATION_MAP.GridItem];
+        const gridItemStyles = [];
+        const gridItemWrapperStyles = [];
+        const gridItemContentStyles = [];
+        const widthStyle = this.getWidthStyle();
+        const paddingStyle = this.getPaddingStyle();
+        const borderStyle = this.getBorderStyle();
+        widthStyle && gridItemStyles.push(widthStyle);
+        paddingStyle && gridItemWrapperStyles.push(paddingStyle);
+        borderStyle && gridItemContentStyles.push(borderStyle);
 
-      this.gridItemStyle = `${gridItemStyles.join(';')}`;
-      this.gridItemWrapperStyle = gridItemWrapperStyles.join(';');
-      this.gridItemContentStyle = gridItemContentStyles.join(';');
-      this.hover = hover;
-      this.align = align;
-    },
+        this.gridItemStyle = `${gridItemStyles.join(';')}`;
+        this.gridItemWrapperStyle = gridItemWrapperStyles.join(';');
+        this.gridItemContentStyle = gridItemContentStyles.join(';');
+        this.hover = hover;
+        this.align = align;
+      },
 
-    // 判断应该加在gridItem上的宽度
-    getWidthStyle() {
-      const { column } = this[RELATION_MAP.GridItem];
-      return column > 0 ? `width:${(1 / column) * 100}%` : '';
-    },
+      // 判断应该加在gridItem上的宽度
+      getWidthStyle() {
+        const { column } = this[RELATION_MAP.GridItem];
+        return column > 0 ? `width:${(1 / column) * 100}%` : '';
+      },
 
-    // 获取应该加在gridWrap上的padding
-    getPaddingStyle() {
-      const { gutter } = this[RELATION_MAP.GridItem];
-      if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
-      return '';
-    },
+      // 获取应该加在gridWrap上的padding
+      getPaddingStyle() {
+        const { gutter } = this[RELATION_MAP.GridItem];
+        if (gutter) return `padding-bottom:${gutter}rpx;padding-right:${gutter}rpx`;
+        return '';
+      },
 
-    // 判断border在grid-item-content上的css属性
-    getBorderStyle() {
-      const { gutter } = this[RELATION_MAP.GridItem];
-      let { border } = this[RELATION_MAP.GridItem];
+      // 判断border在grid-item-content上的css属性
+      getBorderStyle() {
+        const { gutter } = this[RELATION_MAP.GridItem];
+        let { border } = this[RELATION_MAP.GridItem];
 
-      if (!border) {
+        if (!border) {
         // 如果border的值没传或者是border的值为false
-        return '';
-      }
+          return '';
+        }
 
-      if (!isObject(border)) {
-        border = {};
-      }
-      const { color = '#266FE8', width = 2, style = 'solid' } = border ;
+        if (!isObject(border)) {
+          border = {};
+        }
+        const { color = '#266FE8', width = 2, style = 'solid' } = border ;
 
-      if (gutter) {
-        return `border:${width}rpx ${style} ${color}`;
-      }
+        if (gutter) {
+          return `border:${width}rpx ${style} ${color}`;
+        }
 
-      return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
-    },
+        return `border-bottom:${width}rpx ${style} ${color};border-right:${width}rpx ${style} ${color}`;
+      },
 
-    onClick(e) {
-      const { item } = e.currentTarget.dataset;
-      this.$emit('click', item);
-      this.jumpLink();
-    },
+      onClick(e) {
+        const { item } = e.currentTarget.dataset;
+        this.$emit('click', item);
+        this.jumpLink();
+      },
 
-    jumpLink() {
-      const { url, jumpType } = this;
-      if (url && jumpType) {
-        if (LinkTypes[jumpType]) {
-          wx[LinkTypes[jumpType]]({ url });
+      jumpLink() {
+        const { url, jumpType } = this;
+        if (url && jumpType) {
+          if (LinkTypes[jumpType]) {
+            wx[LinkTypes[jumpType]]({ url });
+          }
         }
-      }
+      },
     },
-  },
-});
+  }),
+};
 </script>
 <style scoped src="./grid-item.css"></style>
 <style scoped>

package/dist/guide/README.md

@@ -1,7 +1,7 @@
 ---
 title: Guide 按钮
 description: 逐步骤进行指引或解释说明的组件，常用于用户不熟悉的或需进行特别强调的页面。
-spline: base
+spline: message
 isComponent: true
 ---