@tdesign/uniapp 0.7.1 → 0.7.3

package/dist/indexes-anchor/indexes-anchor.vue

@@ -68,6 +68,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './indexes-anchor.css';
-</style>
+<style scoped src="./indexes-anchor.css"></style>

package/dist/input/input.vue

@@ -9,20 +9,20 @@
       <view :class="classPrefix + '__icon--prefix'">
         <slot name="prefix-icon" />
         <block
-          v-if="_prefixIcon"
+          v-if="iPrefixIcon"
           name="icon"
         >
           <t-icon
-            :custom-style="_prefixIcon.style || ''"
+            :custom-style="iPrefixIcon.style || ''"
             :t-class="tClassPrefixIcon"
-            :prefix="_prefixIcon.prefix"
-            :name="_prefixIcon.name"
-            :size="_prefixIcon.size"
-            :color="_prefixIcon.color"
+            :prefix="iPrefixIcon.prefix"
+            :name="iPrefixIcon.name"
+            :size="iPrefixIcon.size"
+            :color="iPrefixIcon.color"
             :aria-hidden="true"
-            :aria-label="_prefixIcon.ariaLabel"
-            :aria-role="_prefixIcon.ariaRole"
-            @click="_prefixIcon.click || ''"
+            :aria-label="iPrefixIcon.ariaLabel"
+            :aria-role="iPrefixIcon.ariaRole"
+            @click="iPrefixIcon.click || ''"
           />
         </block>
       </view>
@@ -81,21 +81,21 @@
           @nicknamereview="onNickNameReview"
         >
         <view
-          v-if="_clearIcon && dataValue && dataValue.length && showClearIcon"
+          v-if="iClearIcon && dataValue && dataValue.length && showClearIcon"
           :class="classPrefix + '__wrap--clearable-icon'"
           @click.stop="clearInput"
         >
           <t-icon
-            :custom-style="_clearIcon.style || ''"
+            :custom-style="iClearIcon.style || ''"
             :t-class="tClassClearable"
-            :prefix="_clearIcon.prefix"
-            :name="_clearIcon.name"
-            :size="_clearIcon.size"
-            :color="_clearIcon.color"
+            :prefix="iClearIcon.prefix"
+            :name="iClearIcon.name"
+            :size="iClearIcon.size"
+            :color="iClearIcon.color"
             :aria-hidden="false"
-            :aria-label="_clearIcon.ariaLabel || '清除'"
-            :aria-role="_clearIcon.ariaRole || 'button'"
-            @click="_clearIcon.click || ''"
+            :aria-label="iClearIcon.ariaLabel || '清除'"
+            :aria-role="iClearIcon.ariaRole || 'button'"
+            @click="iClearIcon.click || ''"
           />
         </view>
         <view
@@ -113,20 +113,20 @@
         >
           <slot name="suffix-icon" />
           <block
-            v-if="_suffixIcon"
+            v-if="iSuffixIcon"
             name="icon"
           >
             <t-icon
-              :custom-style="_suffixIcon.style || ''"
+              :custom-style="iSuffixIcon.style || ''"
               :t-class="tClassSuffixIcon"
-              :prefix="_suffixIcon.prefix"
-              :name="_suffixIcon.name"
-              :size="_suffixIcon.size"
-              :color="_suffixIcon.color"
+              :prefix="iSuffixIcon.prefix"
+              :name="iSuffixIcon.name"
+              :size="iSuffixIcon.size"
+              :color="iSuffixIcon.color"
               :aria-hidden="true"
-              :aria-label="_suffixIcon.ariaLabel"
-              :aria-role="_suffixIcon.ariaRole || 'button'"
-              @click="_suffixIcon.click || ''"
+              :aria-label="iSuffixIcon.ariaLabel"
+              :aria-role="iSuffixIcon.ariaRole || 'button'"
+              @click="iSuffixIcon.click || ''"
             />
           </block>
         </view>
@@ -214,21 +214,21 @@ export default uniComponent({
   watch: {
     prefixIcon: {
       handler(v) {
-        this._prefixIcon = calcIcon(v);
+        this.iPrefixIcon = calcIcon(v);
       },
       immediate: true,
     },
 
     suffixIcon: {
       handler(v) {
-        this._suffixIcon = calcIcon(v);
+        this.iSuffixIcon = calcIcon(v);
       },
       immediate: true,
     },
 
     clearable: {
       handler(v) {
-        this._clearIcon = calcIcon(v, 'close-circle-filled');
+        this.iClearIcon = calcIcon(v, 'close-circle-filled');
       },
       immediate: true,
     },
@@ -390,8 +390,8 @@ export default uniComponent({
 });
 
 </script>
+<style scoped src="./input.css"></style>
 <style scoped>
-@import './input.css';
 /* #ifdef H5 */
 .t-input--disabled {
   :deep(input) {

package/dist/link/link.vue

@@ -24,20 +24,20 @@
       <view :class="classPrefix + '__prefix-icon ' + tClassPrefixIcon">
         <slot name="prefix-icon" />
         <block
-          v-if="_prefixIcon"
+          v-if="iPrefixIcon"
           name="icon"
         >
           <t-icon
-            :custom-style="_prefixIcon.style || ''"
-            :t-class="_prefixIcon.tClass"
-            :prefix="_prefixIcon.prefix"
-            :name="_prefixIcon.name"
-            :size="_prefixIcon.size"
-            :color="_prefixIcon.color"
+            :custom-style="iPrefixIcon.style || ''"
+            :t-class="iPrefixIcon.tClass"
+            :prefix="iPrefixIcon.prefix"
+            :name="iPrefixIcon.name"
+            :size="iPrefixIcon.size"
+            :color="iPrefixIcon.color"
             :aria-hidden="true"
-            :aria-label="_prefixIcon.ariaLabel"
-            :aria-role="_prefixIcon.arialRole"
-            @click="_suffixIcon.click || ''"
+            :aria-label="iPrefixIcon.ariaLabel"
+            :aria-role="iPrefixIcon.arialRole"
+            @click="iSuffixIcon.click || ''"
           />
         </block>
       </view>
@@ -51,20 +51,20 @@
       <view :class="classPrefix + '__suffix-icon ' + tClassSuffixIcon">
         <slot name="suffix-icon" />
         <block
-          v-if="_suffixIcon"
+          v-if="iSuffixIcon"
           name="icon"
         >
           <t-icon
-            :custom-style="_suffixIcon.style || ''"
-            :t-class="_suffixIcon.tClass"
-            :prefix="_suffixIcon.prefix || ''"
-            :name="_suffixIcon.name"
-            :size="_suffixIcon.size"
-            :color="_suffixIcon.color"
+            :custom-style="iSuffixIcon.style || ''"
+            :t-class="iSuffixIcon.tClass"
+            :prefix="iSuffixIcon.prefix || ''"
+            :name="iSuffixIcon.name"
+            :size="iSuffixIcon.size"
+            :color="iSuffixIcon.color"
             :aria-hidden="true"
-            :aria-label="_suffixIcon.ariaLabel"
-            :aria-role="_suffixIcon.arialRole"
-            @click="_suffixIcon.click || ''"
+            :aria-label="iSuffixIcon.ariaLabel"
+            :aria-role="iSuffixIcon.arialRole"
+            @click="iSuffixIcon.click || ''"
           />
         </block>
       </view>
@@ -105,21 +105,21 @@ export default uniComponent({
       prefix,
       classPrefix: name,
       tools,
-      _prefixIcon: null,
-      _suffixIcon: null,
+      iPrefixIcon: null,
+      iSuffixIcon: null,
       className: '',
     };
   },
   watch: {
     prefixIcon: {
       handler(value) {
-        this._prefixIcon = calcIcon(value);
+        this.iPrefixIcon = calcIcon(value);
       },
       immediate: true,
     },
     suffixIcon: {
       handler(value) {
-        this._suffixIcon = calcIcon(value);
+        this.iSuffixIcon = calcIcon(value);
       },
       immediate: true,
     },
@@ -163,9 +163,8 @@ export default uniComponent({
   },
 });
 </script>
+<style scoped src="./link.css"></style>
 <style scoped>
-@import './link.css';
-
 /* #ifdef H5 */
 :deep(.navigator-wrap) {
   display: flex;

package/dist/loading/loading.vue

@@ -142,7 +142,7 @@ export default uniComponent({
       immediate: true,
     },
   },
-  beforeUnMount() {
+  beforeUnmount() {
     clearTimeout(this.timer);
   },
   methods: {
@@ -153,5 +153,5 @@ export default uniComponent({
 });
 
 </script>
-<style src="./loading.css"  scoped>
+<style src="./loading.css" scoped>
 </style>

package/dist/message/index.d.ts

@@ -1,7 +1,7 @@
 import { MessageProps } from './message.interface';
 declare type Context = any;
 declare type Instance = any;
-interface MessageActionOptionsType extends Optional<MessageProps> {
+interface MessageActionOptionsType extends Partial<MessageProps> {
   context?: Context;
   selector?: string;
 }

package/dist/message/message.interface.ts

@@ -1,3 +1,4 @@
+import type { TdMessageProps } from './type';
 
 export const MessageType = {
   info: 'info',
@@ -21,7 +22,7 @@ export interface MessageProps {
   closeBtn?: boolean;
   action?: string;
   marquee?: MessageMarquee;
-  offset?: object;
+  offset?: TdMessageProps['offset'];
   duration?: number;
   zIndex?: number;
   id?: string;

package/dist/message-item/message-item.vue

@@ -12,19 +12,19 @@
       <view :class="classPrefix + '__icon--left'">
         <slot name="icon" />
         <block
-          v-if="_icon"
+          v-if="innerIcon"
           name="icon"
         >
           <t-icon
-            :custom-style="_icon.style || ''"
+            :custom-style="innerIcon.style || ''"
             :t-class="tClassIcon"
-            :prefix="_icon.prefix"
-            :name="_icon.name"
-            :size="_icon.size"
-            :color="_icon.color"
+            :prefix="innerIcon.prefix"
+            :name="innerIcon.name"
+            :size="innerIcon.size"
+            :color="innerIcon.color"
             :aria-hidden="true"
-            :aria-label="_icon.ariaLabel"
-            :aria-role="_icon.ariaRole"
+            :aria-label="innerIcon.ariaLabel"
+            :aria-role="innerIcon.ariaRole"
           />
         </block>
       </view>
@@ -48,18 +48,18 @@
         </view>
       </view>
       <t-link
-        v-if="_link && _link.content"
+        v-if="innerLink && innerLink.content"
         :t-class="classPrefix + '__link ' + tClassLink"
-        :custom-style="tools._style([_link.style, _link.customStyle])"
-        :disabled="_link.disabled || false"
-        :hover="_link.hover || true"
-        :theme="_link.theme || 'primary'"
-        :size="_link.size || 'medium'"
-        :prefix-icon="_link.prefixIcon || ''"
-        :suffix-icon="_link.suffixIcon || ''"
-        :underline="_link.underline || false"
-        :content="_link.content || ''"
-        :navigator-props="_link.navigatorProps || null"
+        :custom-style="tools._style([innerLink.style, innerLink.customStyle])"
+        :disabled="innerLink.disabled || false"
+        :hover="innerLink.hover || true"
+        :theme="innerLink.theme || 'primary'"
+        :size="innerLink.size || 'medium'"
+        :prefix-icon="innerLink.prefixIcon || ''"
+        :suffix-icon="innerLink.suffixIcon || ''"
+        :underline="innerLink.underline || false"
+        :content="innerLink.content || ''"
+        :navigator-props="innerLink.navigatorProps || null"
         @complete="handleLinkClick"
       />
       <slot name="link" />
@@ -69,19 +69,19 @@
       >
         <slot name="close-btn" />
         <block
-          v-if="_closeBtn"
+          v-if="iCloseBtn"
           name="icon"
         >
           <t-icon
-            :custom-style="_closeBtn.style || ''"
+            :custom-style="iCloseBtn.style || ''"
             :t-class="tClassCloseBtn"
-            :prefix="_closeBtn.prefix"
-            :name="_closeBtn.name"
-            :size="_closeBtn.size"
-            :color="_closeBtn.color"
+            :prefix="iCloseBtn.prefix"
+            :name="iCloseBtn.name"
+            :size="iCloseBtn.size"
+            :color="iCloseBtn.color"
             :aria-hidden="false"
-            :aria-label="_closeBtn.ariaLabel || '关闭'"
-            :aria-role="_closeBtn.ariaRole || 'button'"
+            :aria-label="iCloseBtn.ariaLabel || '关闭'"
+            :aria-role="iCloseBtn.ariaRole || 'button'"
           />
         </block>
       </view>
@@ -173,13 +173,13 @@ export default uniComponent({
   watch: {
     theme: {
       handler(theme) {
-        this._icon = calcIcon(this.icon, THEME_ICON[theme]);
+        this.innerIcon = calcIcon(this.icon, THEME_ICON[theme]);
       },
       immediate: true,
     },
     icon: {
       handler(icon) {
-        this._icon = calcIcon(icon, THEME_ICON[this.theme]);
+        this.innerIcon = calcIcon(icon, THEME_ICON[this.theme]);
       },
       immediate: true,
     },
@@ -187,15 +187,15 @@ export default uniComponent({
 
     link: {
       handler(v) {
-        const _link = isObject(v) ? { ...v } : { content: v };
-        this._link = _link;
+        const innerLink = isObject(v) ? { ...v } : { content: v };
+        this.innerLink = innerLink;
       },
       immediate: true,
     },
 
     closeBtn: {
       handler(v) {
-        this._closeBtn = calcIcon(v, 'close');
+        this.iCloseBtn = calcIcon(v, 'close');
       },
       immediate: true,
     },
@@ -203,7 +203,7 @@ export default uniComponent({
   mounted() {
     this.memoInitialData();
   },
-  beforeUnMount() {
+  beforeUnmount() {
     this.clearMessageAnimation();
   },
   methods: {
@@ -348,6 +348,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './message-item.css';
-</style>
+<style scoped src="./message-item.css"></style>

package/dist/mixins/page-scroll.js

@@ -53,7 +53,7 @@ export default (funcName = 'onScroll', useBus = true) => {
       page.onPageScroll = onPageScroll;
     },
 
-    beforeUnMount() {
+    beforeUnmount() {
       if (useBus) {
         bus.off(PAGE_SCROLL_EVENT_NAME, this[funcName]);
         return;

package/dist/navbar/navbar.vue

@@ -49,7 +49,7 @@
 <script>
 import TIcon from '../icon/icon';
 import { uniComponent } from '../common/src/index';
-import { getRect, systemInfo } from '../common/utils';
+import { getRect, getWindowInfo } from '../common/utils';
 import { prefix } from '../common/config';
 import props from './props';
 import tools from '../common/utils.wxs';
@@ -61,7 +61,7 @@ const BASE_MENU_RECT = {
   width: 87,
   height: 32,
   top: 24,
-  right: systemInfo.windowWidth - 10,
+  right: 10, // 距离右侧的间距，实际 right 值在 getMenuRect 中动态计算
 };
 
 
@@ -104,9 +104,9 @@ export default uniComponent({
       showTitle: '',
       hideLeft: false,
       hideCenter: false,
-      _menuRect: null,
-      _leftRect: null,
-      _boxStyle: {},
+      iMenuRect: null,
+      iLeftRect: null,
+      iBoxStyle: {},
       tools,
 
       visibleClass: '',
@@ -143,32 +143,43 @@ export default uniComponent({
     this.initStyle();
     this.getLeftRect();
     this.onMenuButtonBoundingClientRectWeightChange();
+
+    this.onWindowResizeCallback = () => {
+      this.initStyle();
+      this.getLeftRect();
+    };
+    uni.onWindowResize(this.onWindowResizeCallback);
   },
 
-  beforeUnMount() {
+  beforeUnmount() {
     this.offMenuButtonBoundingClientRectWeightChange();
+    if (this.onWindowResizeCallback) {
+      uni.offWindowResize(this.onWindowResizeCallback);
+    }
   },
   methods: {
     initStyle() {
-      this.getMenuRect();
+      // 每次重新获取最新的窗口信息，避免 H5 下窗口大小变化后使用缓存值
+      const windowInfo = getWindowInfo();
+      this.getMenuRect(windowInfo);
 
-      const { _menuRect, _leftRect } = this;
+      const { iMenuRect, iLeftRect } = this;
 
-      if (!_menuRect || !_leftRect || !systemInfo) return;
+      if (!iMenuRect || !iLeftRect || !windowInfo) return;
 
-      const _boxStyle = {
-        '--td-navbar-padding-top': `${systemInfo.statusBarHeight}px`,
-        '--td-navbar-right': `${systemInfo.windowWidth - _menuRect.left}px`, // 导航栏右侧小程序胶囊按钮宽度
-        '--td-navbar-left-max-width': `${_menuRect.left}px`, // 左侧内容最大宽度
-        '--td-navbar-capsule-height': `${_menuRect.height}px`, // 胶囊高度
-        '--td-navbar-capsule-width': `${_menuRect.width}px`, // 胶囊宽度
-        '--td-navbar-height': `${(_menuRect.top - systemInfo.statusBarHeight) * 2 + _menuRect.height}px`,
+      const iBoxStyle = {
+        '--td-navbar-padding-top': `${windowInfo.statusBarHeight}px`,
+        '--td-navbar-right': `${windowInfo.windowWidth - iMenuRect.left}px`, // 导航栏右侧小程序胶囊按钮宽度
+        '--td-navbar-left-max-width': `${iMenuRect.left}px`, // 左侧内容最大宽度
+        '--td-navbar-capsule-height': `${iMenuRect.height}px`, // 胶囊高度
+        '--td-navbar-capsule-width': `${iMenuRect.width}px`, // 胶囊宽度
+        '--td-navbar-height': `${(iMenuRect.top - windowInfo.statusBarHeight) * 2 + iMenuRect.height}px`,
       };
       // #ifdef H5 || APP-PLUS
-      delete _boxStyle['--td-navbar-height'];
+      delete iBoxStyle['--td-navbar-height'];
       // #endif
 
-      this.calcCenterStyle(_leftRect, _menuRect, _boxStyle);
+      this.calcCenterStyle(iLeftRect, iMenuRect, iBoxStyle, windowInfo);
     },
     onWatchTitle() {
       const { title } = this;
@@ -183,48 +194,52 @@ export default uniComponent({
       leftRect,
       menuRect,
       defaultStyle,
+      windowInfo,
     ) {
-      const maxSpacing = Math.max(leftRect.right, systemInfo.windowWidth - menuRect.left);
-      const _boxStyle = {
+      const curWindowInfo = windowInfo || getWindowInfo();
+      const maxSpacing = Math.max(leftRect.right, curWindowInfo.windowWidth - menuRect.left);
+      const iBoxStyle = {
         ...defaultStyle,
         'z-index': this.zIndex,
         '--td-navbar-center-left': `${maxSpacing}px`, // 标题左侧距离
         '--td-navbar-center-width': `${Math.max(menuRect.left - maxSpacing, 0)}px`, // 标题宽度
       };
 
-      const boxStyle = Object.entries(_boxStyle)
+      const boxStyle = Object.entries(iBoxStyle)
         .map(([k, v]) => `${k}: ${v}`)
         .join('; ');
 
       this.boxStyle = boxStyle;
-      this._boxStyle = _boxStyle;
+      this.iBoxStyle = iBoxStyle;
     },
 
     getLeftRect() {
       getRect(this, `.${name}__left`).then((res) => {
-        if (res.right > this._leftRect.right) {
-          this.calcCenterStyle(res, this._menuRect, this._boxStyle);
+        if (res.right > this.iLeftRect.right) {
+          this.calcCenterStyle(res, this.iMenuRect, this.iBoxStyle);
         }
       });
     },
 
-    getMenuRect() {
+    getMenuRect(windowInfo) {
+      const curWindowInfo = windowInfo || getWindowInfo();
       // 场景值为1177（视频号直播间）和1175 （视频号profile页）时，小程序禁用了 uni.getMenuButtonBoundingClientRect
       let rect = {
         ...BASE_MENU_RECT,
+        right: curWindowInfo.windowWidth - BASE_MENU_RECT.right, // 动态计算，避免 H5 下缓存
         bottom: BASE_MENU_RECT.top + BASE_MENU_RECT.height,
-        left: BASE_MENU_RECT.right - BASE_MENU_RECT.width,
+        left: curWindowInfo.windowWidth - BASE_MENU_RECT.right - BASE_MENU_RECT.width,
       };
       if (uni.getMenuButtonBoundingClientRect
          && typeof uni.getMenuButtonBoundingClientRect === 'function'
-         && typeof uni.getMenuButtonBoundingClientRect()  === 'object'
+         && typeof uni.getMenuButtonBoundingClientRect() === 'object'
       ) {
         rect = uni.getMenuButtonBoundingClientRect() || {};
       }
 
-      this._menuRect = rect;
-      this._leftRect = {
-        right: systemInfo.windowWidth - rect.left,
+      this.iMenuRect = rect;
+      this.iLeftRect = {
+        right: curWindowInfo.windowWidth - rect.left,
       };
     },
 
@@ -288,6 +303,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './navbar.css';
-</style>
+<style scoped src="./navbar.css"></style>