@tdesign/uniapp 0.7.1 → 0.7.2

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>

package/dist/notice-bar/notice-bar.vue

@@ -13,20 +13,20 @@
     >
       <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"
-          :aria-hidden="!!_prefixIcon.ariaHidden"
-          :aria-label="_prefixIcon.ariaLabel"
-          :aria-role="_prefixIcon.ariaRole"
-          @click="_prefixIcon.bindclick || ''"
+          :prefix="iPrefixIcon.prefix"
+          :name="iPrefixIcon.name"
+          :size="iPrefixIcon.size"
+          :color="iPrefixIcon.color"
+          :aria-hidden="!!iPrefixIcon.ariaHidden"
+          :aria-label="iPrefixIcon.ariaLabel"
+          :aria-role="iPrefixIcon.ariaRole"
+          @click="iPrefixIcon.bindclick || ''"
         />
       </block>
     </view>
@@ -82,20 +82,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"
-          :aria-hidden="!!_suffixIcon.ariaHidden"
-          :aria-label="_suffixIcon.ariaLabel"
-          :aria-role="_suffixIcon.ariaRole"
-          @click="_suffixIcon.bindclick || ''"
+          :prefix="iSuffixIcon.prefix"
+          :name="iSuffixIcon.name"
+          :size="iSuffixIcon.size"
+          :color="iSuffixIcon.color"
+          :aria-hidden="!!iSuffixIcon.ariaHidden"
+          :aria-label="iSuffixIcon.ariaLabel"
+          :aria-role="iSuffixIcon.ariaRole"
+          @click="iSuffixIcon.bindclick || ''"
         />
       </block>
     </view>
@@ -185,7 +185,7 @@ export default uniComponent({
 
     suffixIcon: {
       handler(v) {
-        this._suffixIcon = calcIcon(v);
+        this.iSuffixIcon = calcIcon(v);
       },
       immediate: true,
     },
@@ -209,7 +209,7 @@ export default uniComponent({
     this.show();
     this.__ready = true;
   },
-  beforeUnMount() {
+  beforeUnmount() {
     this.clearNoticeBarAnimation();
   },
   methods: {
@@ -295,7 +295,7 @@ export default uniComponent({
 
     setPrefixIcon(v) {
       const { theme } = this;
-      this._prefixIcon = calcIcon(v, THEME_ICON[theme]);
+      this.iPrefixIcon = calcIcon(v, THEME_ICON[theme]);
     },
 
     onChange(e) {
@@ -321,6 +321,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './notice-bar.css';
-</style>
+<style scoped src="./notice-bar.css"></style>

package/dist/overlay/overlay.vue

@@ -5,7 +5,7 @@
       :class="prefix + '-overlay ' + transitionClass"
       :style="tools._style([
         '--td-overlay-transition-duration:' + duration + 'ms',
-        'z-index:' + _zIndex, 'top:' + distanceTop + 'px',
+        'z-index:' + iZIndex, 'top:' + distanceTop + 'px',
         computedStyle,
         customStyle
       ])"
@@ -22,7 +22,7 @@
       v-else-if="realVisible"
       :class="prefix + '-overlay ' + transitionClass "
       :style="tools._style([
-        'z-index:' + _zIndex,
+        'z-index:' + iZIndex,
         'top:' + distanceTop + 'px',
         computedStyle,
         customStyle
@@ -69,7 +69,7 @@ export default uniComponent({
       prefix,
       classPrefix: name,
       computedStyle: '',
-      _zIndex: 11000,
+      iZIndex: 11000,
       tools,
     };
   },
@@ -83,7 +83,7 @@ export default uniComponent({
     zIndex: {
       handler(v) {
         if (v !== 0) {
-          this._zIndex = v;
+          this.iZIndex = v;
         }
       },
       immediate: true,
@@ -100,6 +100,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './overlay.css';
-</style>
+<style scoped src="./overlay.css"></style>

package/dist/picker/picker.vue

@@ -9,7 +9,7 @@
       :using-custom-navbar="usingCustomNavbar || (popupProps && popupProps.usingCustomNavbar)"
       :custom-navbar-height="coalesce(customNavbarHeight, popupProps && popupProps.usingCustomNavbar)"
       :z-index="(popupProps && popupProps.zIndex) || defaultPopUpzIndex"
-      :overlay-props="(popupProps && popupProps.overlayProps) || defaultPopUpProps"
+      :overlay-props="(popupProps && popupProps.overlayProps) || defaultOverlayProps"
       @visible-change="onPopupChange"
     >
       <template #content>
@@ -147,7 +147,7 @@ export default uniComponent({
     return {
       prefix,
       classPrefix: name,
-      defaultPopUpProps: {},
+      defaultOverlayProps: {},
       defaultPopUpzIndex: 11500,
       indicatorTop: 72, // 默认indicator位置，会动态计算
 
@@ -302,9 +302,8 @@ export default uniComponent({
   },
 });
 </script>
+<style scoped src="./picker.css"></style>
 <style scoped>
-@import './picker.css';
-
 /* #ifndef MP-WEIXIN */
 /* 适配 qq 小程序等 */
 :deep(t-picker-item) {

package/dist/picker-item/picker-item.vue

@@ -185,7 +185,7 @@ export default uniComponent({
 
   },
 
-  beforeUnMount() {
+  beforeUnmount() {
     // 清理定时器，防止内存泄漏
     if (this._animationTimer) {
       clearInterval(this._animationTimer);
@@ -441,6 +441,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './picker-item.css';
-</style>
+<style scoped src="./picker-item.css"></style>

package/dist/popover/popover.vue

@@ -347,6 +347,4 @@ export default uniComponent({
 
 
 </script>
-<style scoped>
-@import './popover.css';
-</style>
+<style scoped src="./popover.css"></style>

package/dist/popup/popup.vue

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

package/dist/progress/progress.vue

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

package/dist/pull-down-refresh/pull-down-refresh.vue

@@ -122,8 +122,8 @@ export default uniComponent({
       loosing: false,
       enableToRefresh: true,
       scrollTop: 0,
-      _maxBarHeight: 0,
-      _loadingBarHeight: 0,
+      iMaxBarHeight: 0,
+      iLoadingBarHeight: 0,
 
       pixelRatio: 1,
       startPoint: null,
@@ -171,15 +171,15 @@ export default uniComponent({
         }, 240);
       }
 
-      this.tipsHeight = Math.min(val, this._loadingBarHeight);
+      this.tipsHeight = Math.min(val, this.iLoadingBarHeight);
     },
 
     maxBarHeight(v) {
-      this._maxBarHeight = unitConvert(v);
+      this.iMaxBarHeight = unitConvert(v);
     },
 
     loadingBarHeight(v) {
-      this._loadingBarHeight = unitConvert(v);
+      this.iLoadingBarHeight = unitConvert(v);
     },
   },
   mounted() {
@@ -187,8 +187,8 @@ export default uniComponent({
     const { loadingTexts, maxBarHeight, loadingBarHeight } = this;
     const isCustomLoadingTexts = Array.isArray(loadingTexts) && loadingTexts.length >= 4;
 
-    this._maxBarHeight = unitConvert(maxBarHeight);
-    this._loadingBarHeight = unitConvert(loadingBarHeight);
+    this.iMaxBarHeight = unitConvert(maxBarHeight);
+    this.iLoadingBarHeight = unitConvert(loadingBarHeight);
     this.dataLoadingTexts = isCustomLoadingTexts ? loadingTexts : defaultLoadingTexts;
 
     this.pixelRatio = 750 / screenWidth;
@@ -196,7 +196,7 @@ export default uniComponent({
     this.updateDistanceTop();
   },
 
-  beforeUnMount() {
+  beforeUnmount() {
     clearTimeout(this.maxRefreshAnimateTimeFlag);
     clearTimeout(this.closingAnimateTimeFlag);
     this.resetTimer();
@@ -287,7 +287,7 @@ export default uniComponent({
       this.loosing = true;
 
       // 松开时高度超过阈值则触发刷新
-      if (barHeight > this._loadingBarHeight) {
+      if (barHeight > this.iLoadingBarHeight) {
         this._trigger('change', { value: true });
         this.$emit('refresh');
       } else {
@@ -299,7 +299,7 @@ export default uniComponent({
 
     doRefresh() {
       if (this.disabled) return;
-      this.barHeight = this._loadingBarHeight;
+      this.barHeight = this.iLoadingBarHeight;
       this.refreshStatus = REFRESH_STATUS_MAP.LOADING;
       this.loosing = true;
 
@@ -315,10 +315,10 @@ export default uniComponent({
     },
 
     setRefreshBarHeight(value) {
-      const barHeight = Math.min(value, this._maxBarHeight);
+      const barHeight = Math.min(value, this.iMaxBarHeight);
       const data = { barHeight };
 
-      if (barHeight >= this._loadingBarHeight) {
+      if (barHeight >= this.iLoadingBarHeight) {
         data.refreshStatus = REFRESH_STATUS_MAP.LOSING;
       } else {
         data.refreshStatus = REFRESH_STATUS_MAP.PULLING;
@@ -361,6 +361,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './pull-down-refresh.css';
-</style>
+<style scoped src="./pull-down-refresh.css"></style>

package/dist/qrcode/components/qrcode-canvas/qrcode-canvas.vue

@@ -408,6 +408,4 @@ export default uniComponent({
 });
 </script>
 
-<style lang="less" scoped>
-@import './qrcode-canvas.css';
-</style>
+<style scoped src="./qrcode-canvas.css"></style>

package/dist/qrcode/components/qrcode-status/qrcode-status.vue

@@ -89,6 +89,4 @@ export default {
 };
 </script>
 
-<style lang="less" scoped>
-@import './qrcode-status.css';
-</style>
+<style scoped src="./qrcode-status.css"></style>

package/dist/qrcode/qrcode.vue

@@ -139,6 +139,4 @@ export default uniComponent({
 });
 </script>
 
-<style lang="less" scoped>
-@import './qrcode.css';
-</style>
+<style scoped src="./qrcode.css"></style>

package/dist/radio/radio.vue

@@ -2,15 +2,15 @@
   <view
     :id="tId"
     :style="tools._style([customStyle])"
-    :class="tools.cls(classPrefix, [innerPlacement, ['block', block], ['disabled', _disabled]]) + ' ' + tClass"
-    :disabled="_disabled"
+    :class="tools.cls(classPrefix, [innerPlacement, ['block', block], ['disabled', iDisabled]]) + ' ' + tClass"
+    :disabled="iDisabled"
     aria-role="radio"
     :aria-checked="dataChecked"
     :aria-label="label + content"
-    :aria-disabled="_disabled"
+    :aria-disabled="iDisabled"
     @click.stop="handleTap"
   >
-    <view :class="tools.cls(classPrefix + '__icon', [innerPlacement, ['checked', dataChecked], ['disabled', _disabled]]) + ' ' + tClassIcon">
+    <view :class="tools.cls(classPrefix + '__icon', [innerPlacement, ['checked', dataChecked], ['disabled', iDisabled]]) + ' ' + tClassIcon">
       <slot
         v-if="slotIcon"
         name="icon"
@@ -33,11 +33,11 @@
         />
         <view
           v-if="dataChecked && icon == 'dot'"
-          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', _disabled]])"
+          :class="tools.cls(classPrefix + '__icon-' + icon, [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && (icon == 'circle' || icon == 'dot')"
-          :class="tools.cls(classPrefix + '__icon-circle', [['disabled', _disabled]])"
+          :class="tools.cls(classPrefix + '__icon-circle', [['disabled', iDisabled]])"
         />
         <view
           v-if="!dataChecked && icon == 'line'"
@@ -53,7 +53,7 @@
       <view
         :class="
           tools.cls(classPrefix + '__title', [
-            ['disabled', _disabled],
+            ['disabled', iDisabled],
             ['checked', dataChecked]
           ]) +
             ' ' +
@@ -70,7 +70,7 @@
       <view
         :class="
           tools.cls(classPrefix + '__description', [
-            ['disabled', _disabled],
+            ['disabled', iDisabled],
             ['checked', dataChecked]
           ]) +
             ' ' +
@@ -143,8 +143,8 @@ export default uniComponent({
       optionLinked: false,
       iconVal: [],
       innerPlacement: '',
-      _disabled: false,
-      _readonly: false,
+      iDisabled: false,
+      iReadonly: false,
       tools,
 
       dataChecked: coalesce(this.checked, this.defaultChecked),
@@ -164,13 +164,13 @@ export default uniComponent({
     },
     disabled: {
       handler(v) {
-        this._disabled = v;
+        this.iDisabled = v;
       },
       immediate: true,
     },
     readonly: {
       handler(v) {
-        this._readonly = v;
+        this.iReadonly = v;
       },
       immediate: true,
     },
@@ -180,10 +180,10 @@ export default uniComponent({
   },
   methods: {
     handleTap(e) {
-      const { _disabled, _readonly, contentDisabled } = this;
+      const { iDisabled, iReadonly, contentDisabled } = this;
       const { target } = e.currentTarget.dataset;
 
-      if (_disabled || _readonly || (target === 'text' && contentDisabled)) return;
+      if (iDisabled || iReadonly || (target === 'text' && contentDisabled)) return;
 
       this.doChange();
     },
@@ -213,15 +213,13 @@ export default uniComponent({
     setDisabled(disabled) {
       if (this.isIsolated) return;
 
-      this._disabled = this.disabled || disabled;
+      this.iDisabled = this.disabled || disabled;
     },
 
     setReadonly(readonly) {
-      this._readonly = this.readonly || readonly;
+      this.iReadonly = this.readonly || readonly;
     },
   },
 });
 </script>
-<style scoped>
-@import './radio.css';
-</style>
+<style scoped src="./radio.css"></style>

package/dist/rate/rate.vue

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

package/dist/result/result.vue

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

package/dist/row/row.vue

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

package/dist/search/search.vue

@@ -170,6 +170,13 @@ export default uniComponent({
       immediate: true,
     },
 
+    value: {
+      handler(val) {
+        this.dataValue = val;
+      },
+      immediate: true,
+    },
+
     dataValue: {
       handler() {
         // this.updateInnerMaxLen();
@@ -287,6 +294,4 @@ export default uniComponent({
 
 
 </script>
-<style scoped>
-@import './search.css';
-</style>
+<style scoped src="./search.css"></style>

package/dist/side-bar/side-bar.vue

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