@tdesign/uniapp 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -5,6 +5,27 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 0.7.3 `2026-03-04`
+
+### 🐞 Bug Fixes
+
+- `Button`: 去除多余动画效果 @novlan1 ([#4305](https://github.com/Tencent/tdesign-miniprogram/pull/4305))
+- `Dialog`: 修复确认/取消按钮不显示问题 @novlan1 ([#4305](https://github.com/Tencent/tdesign-miniprogram/pull/4305))
+- `Theme`: 修复 `index.css` 尺寸值错误的问题 @liweijie0812 ([#4290](https://github.com/Tencent/tdesign-miniprogram/pull/4290))
+
+## 🌈 0.7.2 `2026-02-26`
+
+### 🚀 Features
+
+- `Calendar`: 新增 `PopupProps` 属性，透传至 `Popup` @novlan1 ([#4264](https://github.com/Tencent/tdesign-miniprogram/pull/4264))
+- `Navbar`: 支持监听页面变化，重新计算尺寸 @novlan1 ([#4282](https://github.com/Tencent/tdesign-miniprogram/pull/4282))
+
+### 🐞 Bug Fixes
+
+- `Button`: 修复 `icon.size` 不生效问题 @novlan1 ([#4264](https://github.com/Tencent/tdesign-miniprogram/pull/4264))
+- `Form`: 修改边距错误问题 @novlan1 ([#4282](https://github.com/Tencent/tdesign-miniprogram/pull/4282))
+- `Search`: 修复 `value` 未监听问题 @novlan1 ([#4264](https://github.com/Tencent/tdesign-miniprogram/pull/4264))
+
 ## 🌈 0.7.1 `2026-02-04`
 
 ### 🚀 Features

package/README.md

@@ -54,13 +54,21 @@ npm i @tdesign/uniapp
 1. 在 `main.ts` 中引入样式文件
 
 ```js
+// CLI 模式
 import '@tdesign/uniapp/common/style/theme/index.css';
+
+// HBuilderX 模式
+// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.css';
 ```
 
 也可以引入 `rpx` 单位的 `less` 文件，该文件与 `tdesign-miniprogram` 完全一致。
 
 ```js
+// CLI 模式
 import '@tdesign/uniapp/common/style/theme/index.less';
+
+// HBuilderX 模式
+// import './uni_modules/tdesign-uniapp/components/common/style/theme/index.less';
 ```
 
 2. 在文件中使用
@@ -113,7 +121,17 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 
 安装注册 TDesign 之后，在开发项目时，可以配合插件在VSCode等主流编辑器中达到提示组件名及API的效果。
 
-推荐安装 `Volar`，并在项目的 `tsconfig.json` 的 `includes` 属性中增加 `node_modules/@tdesign/uniapp/global.d.ts`，即可实现该效果。
+推荐安装 [Vue (Official)](https://marketplace.visualstudio.com/items?itemName=Vue.volar) 插件，并在项目的 `tsconfig.json` 的 `compilerOptions.types` 属性中增加 `@tdesign/uniapp/global`，即可实现提示效果。
+
+```json
+{
+  "compilerOptions": {
+    "types": [
+      "@tdesign/uniapp/global",
+    ]
+  }
+}
+```
 
 ## 平台兼容性
 
@@ -133,6 +151,18 @@ import TLoading from '@tdesign/uniapp/loading/loading.vue';
 
 详情参见[移动端组件库浏览器兼容性说明](https://github.com/Tencent/tdesign/wiki/Browser-Compatibility)
 
+## 模板项目
+
+我们提供了多种开箱即用的模板项目，帮助你快速开始开发。
+
+| 模板 | 描述 | 预览 |
+| --- | --- | --- |
+| [TDesign UniApp Starter](https://github.com/TDesignOteam/tdesign-uniapp-starter/) | Vue3 + CLI 模式模板 - 通用类 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-h5.png" height="100" /> |
+| [TDesign UniApp Starter Apply](https://github.com/TDesignOteam/tdesign-uniapp-starter-apply/) | Vue3 + CLI 模式模板 - 活动报名 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-apply-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue3 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue3-hx/) | Vue3 + HBuilderX 模式模板 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue3-hx-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue2 CLI](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-cli/) | Vue2 + CLI 模式模板 | <img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-cli-h5.png" height="100" /> |
+| [TDesign UniApp Starter Vue2 HX](https://github.com/TDesignOteam/tdesign-uniapp-starter-vue2-hx/) | Vue2 + HBuilderX 模式模板 |<img src="https://cdn.uwayfly.com/tdesign-uniapp/image/tdesign-uniapp-starter-vue2-hx-h5.png" height="100" /> |
+
 ## 反馈
 
 有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-miniprogram/issues) 反馈或扫码加入用户微信群。

package/dist/action-sheet/action-sheet.vue

@@ -11,7 +11,7 @@
       :custom-navbar-height="customNavbarHeight"
       :show-overlay="dataShowOverlay"
       :z-index="(dataPopupProps && dataPopupProps.zIndex) || defaultPopUpzIndex"
-      :overlay-props="(dataPopupProps && dataPopupProps.overlayProps) || defaultPopUpProps"
+      :overlay-props="(dataPopupProps && dataPopupProps.overlayProps) || defaultOverlayProps"
       @visible-change="onPopupVisibleChange"
     >
       <view
@@ -224,7 +224,7 @@ export default uniComponent({
       classPrefix: name,
       gridThemeItems: [],
       currentSwiperIndex: 0,
-      defaultPopUpProps: {},
+      defaultOverlayProps: {},
       defaultPopUpzIndex: 11500,
       tools,
 
@@ -362,6 +362,4 @@ export default uniComponent({
 });
 </script>
 
-<style scoped>
-@import './action-sheet.css';
-</style>
+<style scoped src="./action-sheet.css"></style>

package/dist/avatar/avatar.vue

@@ -83,7 +83,7 @@ import TImage from '../image/image';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import avatarProps from './props';
-import { setIcon, systemInfo } from '../common/utils';
+import { setIcon, systemInfo, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
 import * as utils from './computed.js';
 import { ChildrenMixin, RELATION_MAP } from '../common/relation';
@@ -139,10 +139,12 @@ export default uniComponent({
         medium: 'var(--td-avatar-icon-medium-font-size, 24px)',
         large: 'var(--td-avatar-icon-large-font-size, 32px)',
       };
-      if (!fontSize[this.dataSize]) return '';
+
       return tools._style([
         {
-          fontSize: fontSize[this.dataSize],
+          fontSize: this.iconData.size
+            ? addUnit(this.iconData.size)
+            : fontSize[this.dataSize],
         },
         this.iconData.style || '',
       ]);
@@ -195,6 +197,4 @@ export default uniComponent({
 });
 
 </script>
-<style scoped>
-@import './avatar.css';
-</style>
+<style scoped src="./avatar.css"></style>

package/dist/avatar-group/avatar-group.vue

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

package/dist/back-top/back-top.vue

@@ -12,20 +12,20 @@
     >
       <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"
-          :aria-hidden="!!_icon.ariaHidden"
-          :aria-label="_icon.ariaLabel"
-          :aria-role="_icon.ariaRole"
-          @click="_icon.click || ''"
+          :prefix="innerIcon.prefix"
+          :name="innerIcon.name"
+          :size="innerIcon.size"
+          :color="innerIcon.color"
+          :aria-hidden="!!innerIcon.ariaHidden"
+          :aria-label="innerIcon.ariaLabel"
+          :aria-role="innerIcon.ariaRole"
+          @click="innerIcon.click || ''"
         />
       </block>
     </view>
@@ -90,7 +90,7 @@ export default uniComponent({
   },
   methods: {
     setIcon(v) {
-      this._icon = calcIcon(v, 'backtop');
+      this.innerIcon = calcIcon(v, 'backtop');
     },
 
     toTop() {
@@ -110,13 +110,11 @@ export default uniComponent({
     return {
       prefix,
       classPrefix: name,
-      _icon: null,
+      innerIcon: null,
       hidden: true,
       tools,
     };
   },
 });
 </script>
-<style scoped>
-@import './back-top.css';
-</style>
+<style scoped src="./back-top.css"></style>

package/dist/badge/badge.vue

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

package/dist/button/button.vue

@@ -32,16 +32,16 @@
     @agreeprivacyauthorization="agreeprivacyauthorization"
   >
     <block
-      v-if="_icon"
+      v-if="innerIcon"
       name="icon"
     >
       <t-icon
         :custom-style="iconCustomStyle"
-        :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (_icon.activeIdx == _icon.index ? 'active ' : ' ') + tClassIcon"
-        :prefix="_icon.prefix"
-        :name="_icon.name || ''"
-        :size="_icon.size"
-        :color="_icon.color"
+        :t-class="classPrefix + '__icon ' + classPrefix + '__icon--' + (innerIcon.activeIdx == innerIcon.index ? 'active ' : ' ') + tClassIcon"
+        :prefix="innerIcon.prefix"
+        :name="innerIcon.name || ''"
+        :size="innerIcon.size"
+        :color="innerIcon.color"
         @click="'handleClose' || ''"
       />
     </block>
@@ -65,7 +65,7 @@
     />
     <view
       :class="classPrefix + '__content '
-        + ((_icon && _icon.name || loading) && content ? classPrefix + '__content--has-icon' : '')"
+        + ((innerIcon && innerIcon.name || loading) && content ? classPrefix + '__content--has-icon' : '')"
     >
       <slot name="content" />
       <block v-if="content">
@@ -82,7 +82,7 @@ import TLoading from '../loading/loading';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import props from './props';
-import { calcIcon } from '../common/utils';
+import { calcIcon, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
 
 
@@ -115,7 +115,7 @@ export default uniComponent({
       prefix,
       className: '',
       classPrefix: name,
-      _icon: undefined,
+      innerIcon: undefined,
     };
   },
   computed: {
@@ -129,10 +129,12 @@ export default uniComponent({
 
       return tools._style([
         {
-          fontSize: fontSize[this.size || 'medium'],
+          fontSize: this.innerIcon.size
+            ? addUnit(this.innerIcon.size)
+            : fontSize[this.size || 'medium'],
           borderRadius: 'var(--td-button-icon-border-radius, 4px)',
         },
-        this._icon.style || '',
+        this.innerIcon.style || '',
       ]);
     },
     loadingCustomStyle() {
@@ -146,7 +148,7 @@ export default uniComponent({
   watch: {
     icon: {
       handler(value) {
-        this._icon = calcIcon(value, '');
+        this.innerIcon = calcIcon(value, '');
       },
       immediate: true,
     },
@@ -159,7 +161,7 @@ export default uniComponent({
     loading: 'setClass',
     variant: 'setClass',
   },
-  mounted() {
+  created() {
     this.setClass();
   },
   methods: {
@@ -214,9 +216,8 @@ export default uniComponent({
   },
 });
 </script>
+<style scoped src="./button.css"></style>
 <style scoped>
-@import './button.css';
-
 /* #ifdef MP-QQ */
 /* 适配 qq 小程序 */
 .t-button--outline {

package/dist/calendar/README.en-US.md

@@ -15,6 +15,7 @@ format | Function | - | Typescript: `CalendarFormatType ` `type CalendarFormatTy
 locale-text | Object | - | Typescript: `CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/calendar/type.ts) | N
 max-date | Number | - | \- | N
 min-date | Number | - | \- | N
+popup-props | Object | {} | popup properties。Typescript: `PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/calendar/type.ts) | N
 readonly | Boolean | - | \- | N
 switch-mode | String | none | options: none/month/year-month | N
 title | String | - | \- | N

package/dist/calendar/README.md

@@ -65,6 +65,7 @@ format | Function | - | 用于格式化日期的函数。TS 类型：`CalendarFo
 locale-text | Object | - | 国际化文案。TS 类型：`CalendarLocaleText` `interface CalendarLocaleText {title?: string; weekdays?: string[]; monthTitle?: string; months?: string[]; confirm?: string;}`。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/calendar/type.ts) | N
 max-date | Number | - | 最大可选的日期，不传则默认半年后 | N
 min-date | Number | - | 最小可选的日期，不传则默认今天 | N
+popup-props | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/tencent/tdesign-miniprogram/blob/develop/packages/uniapp-components/calendar/type.ts) | N
 readonly | Boolean | - | 是否只读，只读状态下不能选择日期 | N
 switch-mode | String | none | 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换。可选项：none/month/year-month | N
 title | String | - | 标题，不传默认为“请选择日期” | N

package/dist/calendar/calendar-header.vue

@@ -93,6 +93,4 @@ export default {
 
 </script>
 
-<style scoped>
-@import './calendar.css';
-</style>
+<style scoped src="./calendar.css"></style>

package/dist/calendar/calendar.vue

@@ -3,9 +3,12 @@
     <t-popup
       v-if="usePopup"
       :visible="visible"
-      :using-custom-navbar="usingCustomNavbar"
-      :custom-navbar-height="customNavbarHeight"
       placement="bottom"
+      :show-overlay="isShowOverlay(popupProps && popupProps.showOverlay, true)"
+      :using-custom-navbar="usingCustomNavbar || (popupProps && popupProps.usingCustomNavbar)"
+      :custom-navbar-height="coalesce(customNavbarHeight, popupProps && popupProps.usingCustomNavbar)"
+      :z-index="(popupProps && popupProps.zIndex)"
+      :overlay-props="(popupProps && popupProps.overlayProps) || defaultOverlayProps"
       @visible-change="onVisibleChange"
     >
       <CalendarTemplate
@@ -153,6 +156,8 @@ export default uniComponent({
       dataVisible: this.visible,
       dataValue: coalesce(this.value, this.defaultValue),
       days: [],
+
+      defaultOverlayProps: {},
     };
   },
   watch: {
@@ -253,6 +258,8 @@ export default uniComponent({
     }
   },
   methods: {
+    coalesce,
+
     getMonthTitle,
     getDateLabel,
     isDateSelected,
@@ -291,23 +298,23 @@ export default uniComponent({
     },
 
     updateActionButton(value) {
-      const _min = this.getCurrentYearAndMonth(this.base.minDate);
-      const _max = this.getCurrentYearAndMonth(this.base.maxDate);
-      const _value = this.getCurrentYearAndMonth(value);
+      const iMin = this.getCurrentYearAndMonth(this.base.minDate);
+      const iMax = this.getCurrentYearAndMonth(this.base.maxDate);
+      const iValue = this.getCurrentYearAndMonth(value);
 
-      const _minTimestamp = new Date(_min.year, _min.month, 1).getTime();
-      const _maxTimestamp = new Date(_max.year, _max.month, 1).getTime();
-      const _dateValue = new Date(_value.year, _value.month, 1);
+      const iMinTimestamp = new Date(iMin.year, iMin.month, 1).getTime();
+      const iMaxTimestamp = new Date(iMax.year, iMax.month, 1).getTime();
+      const iDateValue = new Date(iValue.year, iValue.month, 1);
 
-      const _prevYearTimestamp = getPrevYear(_dateValue).getTime();
-      const _prevMonthTimestamp = getPrevMonth(_dateValue).getTime();
-      const _nextMonthTimestamp = getNextMonth(_dateValue).getTime();
-      const _nextYearTimestamp = getNextYear(_dateValue).getTime();
+      const iPrevYearTimestamp = getPrevYear(iDateValue).getTime();
+      const iPrevMonthTimestamp = getPrevMonth(iDateValue).getTime();
+      const iNextMonthTimestamp = getNextMonth(iDateValue).getTime();
+      const iNextYearTimestamp = getNextYear(iDateValue).getTime();
 
-      const preYearBtnDisable = _prevYearTimestamp < _minTimestamp || _prevMonthTimestamp < _minTimestamp;
-      const prevMonthBtnDisable = _prevMonthTimestamp < _minTimestamp;
-      const nextYearBtnDisable = _nextMonthTimestamp > _maxTimestamp || _nextYearTimestamp > _maxTimestamp;
-      const nextMonthBtnDisable = _nextMonthTimestamp > _maxTimestamp;
+      const preYearBtnDisable = iPrevYearTimestamp < iMinTimestamp || iPrevMonthTimestamp < iMinTimestamp;
+      const prevMonthBtnDisable = iPrevMonthTimestamp < iMinTimestamp;
+      const nextYearBtnDisable = iNextMonthTimestamp > iMaxTimestamp || iNextYearTimestamp > iMaxTimestamp;
+      const nextMonthBtnDisable = iNextMonthTimestamp > iMaxTimestamp;
 
       this.actionButtons = {
         preYearBtnDisable,
@@ -440,12 +447,14 @@ export default uniComponent({
       maxDate && (this.base.maxDate = maxDate);
       this.calcMonths();
     },
+
+    isShowOverlay(value, defaultValue) {
+      return tools.isBoolean(value) ? value : defaultValue;
+    },
   },
 });
 </script>
-<style scoped>
-@import './calendar.css';
-</style>
+<style scoped src="./calendar.css"></style>
 <style scoped>
 .t-calendar-switch-mode--none > .t-calendar__months {
   /* support mp-alipay */

package/dist/calendar/props.ts

@@ -39,6 +39,11 @@ export default {
   minDate: {
     type: Number,
   },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object,
+    default: () => ({}),
+  },
   /** 是否只读，只读状态下不能选择日期 */
   readonly: Boolean,
   /** 切换模式。 `none` 表示平铺展示所有月份； `month` 表示支持按月切换， `year-month` 表示既按年切换，也支持按月切换 */

package/dist/calendar/template.vue

@@ -256,6 +256,4 @@ export default {
 };
 
 </script>
-<style scoped>
-@import './calendar.css';
-</style>
+<style scoped src="./calendar.css"></style>

package/dist/calendar/type.ts

@@ -5,6 +5,7 @@
  * */
 
 import type { TdButtonProps as ButtonProps } from '../button/type';
+import type { TdPopupProps as PopupProps } from '../popup/type';
 
 export interface TdCalendarProps {
   /**
@@ -43,6 +44,11 @@ export interface TdCalendarProps {
    * 最小可选的日期，不传则默认今天
    */
   minDate?: number;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
   /**
    * 是否只读，只读状态下不能选择日期
    */

package/dist/cascader/cascader.vue

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

package/dist/cell/cell.vue

@@ -13,18 +13,18 @@
   >
     <view :class="classPrefix + '__left ' + tClassLeft">
       <block
-        v-if="_leftIcon"
+        v-if="iLeftIcon"
         name="icon"
       >
         <t-icon
           :custom-style="leftIconCustomStyle"
           :t-class="classPrefix + '__left-icon ' + tClassLeftIcon"
-          :name="_leftIcon.name"
-          :size="_leftIcon.size"
-          :color="_leftIcon.color"
+          :name="iLeftIcon.name"
+          :size="iLeftIcon.size"
+          :color="iLeftIcon.color"
           :aria-hidden="true"
-          :aria-label="_leftIcon.ariaLabel"
-          :aria-role="_leftIcon.ariaRole"
+          :aria-label="iLeftIcon.ariaLabel"
+          :aria-role="iLeftIcon.ariaRole"
           @click="'handleClose' || ''"
         />
       </block>
@@ -93,31 +93,31 @@
       ]"
     >
       <t-icon
-        v-if="_arrow"
+        v-if="rightArrow"
         :custom-style="rightArrowCustomStyle"
         :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
-        :name="_arrow.name || ''"
-        :size="_arrow.size"
-        :color="_arrow.color"
+        :name="rightArrow.name || ''"
+        :size="rightArrow.size"
+        :color="rightArrow.color"
         :aria-hidden="true"
-        :aria-label="_arrow.ariaLabel"
-        :aria-role="_arrow.ariaRole"
+        :aria-label="rightArrow.ariaLabel"
+        :aria-role="rightArrow.ariaRole"
         @click="'handleClose' || ''"
       />
       <block v-else>
         <block
-          v-if="_rightIcon"
+          v-if="iRightIcon"
           name="icon"
         >
           <t-icon
             :custom-style="rightIconCustomStyle"
             :t-class=" classPrefix + '__right-icon ' + tClassRightIcon"
-            :name="_rightIcon.name"
-            :size="_rightIcon.size"
-            :color="_rightIcon.color || ''"
+            :name="iRightIcon.name"
+            :size="iRightIcon.size"
+            :color="iRightIcon.color || ''"
             :aria-hidden="true"
-            :aria-label="_rightIcon.ariaLabel"
-            :aria-role="_rightIcon.ariaRole"
+            :aria-label="iRightIcon.ariaLabel"
+            :aria-role="iRightIcon.ariaRole"
             @click="'handleClose' || ''"
           />
         </block>
@@ -132,7 +132,7 @@ import TImage from '../image/image';
 import { uniComponent } from '../common/src/index';
 import { prefix } from '../common/config';
 import props from './props';
-import { calcIcon } from '../common/utils';
+import { calcIcon, addUnit } from '../common/utils';
 import tools from '../common/utils.wxs';
 
 import { ChildrenMixin, RELATION_MAP } from '../common/relation';
@@ -177,9 +177,9 @@ export default uniComponent({
     return {
       prefix,
       classPrefix: name,
-      _arrow: null,
-      _rightIcon: null,
-      _leftIcon: null,
+      rightArrow: null,
+      iRightIcon: null,
+      iLeftIcon: null,
       isLastChild: false,
       tools,
     };
@@ -187,25 +187,43 @@ export default uniComponent({
   computed: {
     rightArrowCustomStyle() {
       return tools._style([
-        COMMON_RIGHT_ICON_STYLE,
+        {
+          color: this.rightArrow.color
+            ? this.rightArrow.color
+            : COMMON_RIGHT_ICON_STYLE.color,
+          fontSize: this.rightArrow.size
+            ? addUnit(this.rightArrow.size)
+            : COMMON_RIGHT_ICON_STYLE.fontSize,
+        },
         this.rightIconStyle || '',
-        this._arrow.style || '',
+        this.rightArrow.style || '',
       ]);
     },
     rightIconCustomStyle() {
       return tools._style([
-        COMMON_RIGHT_ICON_STYLE,
+        {
+          color: this.iRightIcon.color
+            ? this.iRightIcon.color
+            : COMMON_RIGHT_ICON_STYLE.color,
+          fontSize: this.iRightIcon.size
+            ? addUnit(this.iRightIcon.size)
+            : COMMON_RIGHT_ICON_STYLE.fontSize,
+        },
         this.rightIconStyle || '',
-        this._rightIcon.style || '',
+        this.iRightIcon.style || '',
       ]);
     },
     leftIconCustomStyle() {
       return tools._style([
         {
-          color: 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
-          fontSize: 'var(--td-cell-left-icon-font-size, 24px)',
+          color: this.iLeftIcon.color
+            ? this.iLeftIcon.color
+            : 'var(--td-cell-left-icon-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)))',
+          fontSize: this.iLeftIcon.size
+            ? addUnit(this.iLeftIcon.size)
+            : 'var(--td-cell-left-icon-font-size, 24px)',
         },
-        this._leftIcon.style || '',
+        this.iLeftIcon.style || '',
       ]);
     },
     leftImageCustomStyle() {
@@ -218,19 +236,19 @@ export default uniComponent({
   watch: {
     leftIcon: {
       handler(e) {
-        this.setIcon('_leftIcon', e, '');
+        this.setIcon('iLeftIcon', e, '');
       },
       immediate: true,
     },
     rightIcon: {
       handler(e) {
-        this.setIcon('_rightIcon', e, '');
+        this.setIcon('iRightIcon', e, '');
       },
       immediate: true,
     },
     arrow: {
       handler(e) {
-        this.setIcon('_arrow', e, 'chevron-right');
+        this.setIcon('rightArrow', e, 'chevron-right');
       },
       immediate: true,
     },
@@ -255,6 +273,4 @@ export default uniComponent({
   },
 });
 </script>
-<style scoped>
-@import './cell.css';
-</style>
+<style scoped src="./cell.css"></style>

package/dist/cell-group/cell-group.vue

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