feat(DropdownMenu): support external-classes attr

src/dropdown-menu/README.en-US.md

@@ -9,15 +9,17 @@ active-color | String | - | \- | N
 close-on-click-overlay | Boolean | true | \- | N
 custom-style `v0.25.0` | String | - | \- | N
 duration | String / Number | 200 | \- | N
+external-classes | Array | - | `['t-class', 't-class-menu', 't-class-menu-item', 't-class-menu-label', 't-class-menu-icon']` | N
 show-overlay | Boolean | true | \- | N
 z-index | Number | 11600 | \- | N
 
 ### DropdownItem Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-custom-style | String | - | \- | N
+custom-style `v0.25.0` | String | - | \- | N
 disabled | Boolean | false | \- | N
+external-classes | Array | - | `['t-class','t-class-content', 't-class-column', 't-class-column-item', 't-class-column-item-label', 't-class-tree', 't-class-tree-item', 't-class-tree-columns', 't-class-tree-columns-item', 't-class-tree-columns-item-label', 't-class-footer']` | N
 keys | Object | - | Typescript：`KeysType` | N
 label | String | - | \- | N
 multiple | Boolean | false | \- | N

src/dropdown-menu/README.md

@@ -42,6 +42,7 @@ active-color | String | - | 【讨论中】菜单标题和选项的选中态颜
 close-on-click-overlay | Boolean | true | 是否在点击遮罩层后关闭菜单 | N
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 duration | String / Number | 200 | 动画时长 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、菜单标签、菜单图标类名 等。`['t-class', 't-class-menu', 't-class-menu-item', 't-class-menu-label', 't-class-menu-icon']` | N
 show-overlay | Boolean | true | 是否显示遮罩层 | N
 z-index | Number | 11600 | 菜单栏 z-index 层级 | N
 
@@ -58,6 +59,7 @@ toggle | 切换下拉菜单的展示状态，传入索引值则切换对应菜
 -- | -- | -- | -- | --
 custom-style `v0.25.0` | String | - | 自定义组件样式 | N
 disabled | Boolean | false | 是否禁用 | N
+external-classes | Array | - | 组件类名，分别用于设置 组件外层类名、菜单列、菜单列选项、菜单列选项标签、树形菜单、树形菜单列等类名。`['t-class','t-class-content', 't-class-column', 't-class-column-item', 't-class-column-item-label', 't-class-tree', 't-class-tree-item', 't-class-tree-columns', 't-class-tree-columns-item', 't-class-tree-columns-item-label', 't-class-footer']` | N
 keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType` | N
 label | String | - | 标题 | N
 multiple | Boolean | false | 是否多选 | N

src/dropdown-menu/dropdown-item-props.ts

@@ -16,6 +16,10 @@ const props: TdDropdownItemProps = {
     type: Boolean,
     value: false,
   },
+  /** 组件类名，分别用于设置 组件外层类名、菜单列、菜单列选项、菜单列选项标签、树形菜单、树形菜单列等类名 */
+  externalClasses: {
+    type: Array,
+  },
   /** 用来定义 value / label 在 `options` 中对应的字段别名 */
   keys: {
     type: Object,

src/dropdown-menu/dropdown-item.ts

@@ -11,6 +11,20 @@ const name = `${prefix}-dropdown-item`;
 export interface DropdownItemProps extends TdDropdownItemProps {}
 @wxComponent()
 export default class DropdownMenuItem extends SuperComponent {
+  externalClasses = [
+    `${prefix}-class`,
+    `${prefix}-class-content`,
+    `${prefix}-class-column`,
+    `${prefix}-class-column-item`,
+    `${prefix}-class-column-item-label`,
+    `${prefix}-class-tree`,
+    `${prefix}-class-tree-item`,
+    `${prefix}-class-tree-columns`,
+    `${prefix}-class-tree-columns-item`,
+    `${prefix}-class-tree-columns-item-label`,
+    `${prefix}-class-footer`,
+  ];
+
   properties = {
     ...props,
   };

src/dropdown-menu/dropdown-item.wxml

@@ -1,6 +1,10 @@
 <wxs module="_" src="./util.wxs" />
 
-<view wx:if="{{wrapperVisible}}" class="{{classPrefix}}" style="{{_.getDropdownItemStyles(top, zIndex, customStyle)}}">
+<view
+  wx:if="{{wrapperVisible}}"
+  class="{{classPrefix}} {{prefix}}-class"
+  style="{{_.getDropdownItemStyles(top, zIndex, customStyle)}}"
+>
   <t-popup
     visible="{{show}}"
     z-index="{{zIndex + 1}}"
@@ -11,21 +15,25 @@
     bind:leaved="onLeaved"
     bind:visible-change="handleMaskClick"
     class="{{classPrefix}}__popup-host"
-    t-class-content="{{contentClasses}} {{classPrefix}}__content"
+    t-class-content="{{contentClasses}} {{classPrefix}}__content {{prefix}}-class-content"
   >
     <view class="{{classPrefix}}__body">
       <block wx:if="{{optionsLayout === 'columns'}}">
         <!-- 单选列表 -->
         <t-cell-group wx:if="{{!multiple}}">
-          <t-radio-group class="{{classPrefix}}__radio" value="{{value}}" bind:change="handleRadioChange">
+          <t-radio-group
+            class="{{classPrefix}}__radio {{prefix}}-class-column"
+            value="{{value}}"
+            bind:change="handleRadioChange"
+          >
             <t-radio
               wx:for="{{options}}"
               wx:key="index"
-              class="{{classPrefix}}__radio-item"
+              class="{{classPrefix}}__radio-item {{prefix}}-class-column-item"
               icon="stroke-line"
               align="right"
               t-class="radio"
-              t-class-label="radio__label radio__label--{{value == item[valueAlias] ? 'active' : ''}}"
+              t-class-label="radio__label radio__label--{{value == item[valueAlias] ? 'active' : ''}} {{prefix}}-class-column-item-label"
               value="{{item[valueAlias]}}"
               label="{{item[labelAlias]}}"
               disabled="{{item.disabled}}"
@@ -35,15 +43,15 @@
         <!-- 多选列表 -->
         <block wx:else>
           <t-checkbox-group
-            class="{{classPrefix}}__checkbox"
+            class="{{classPrefix}}__checkbox {{prefix}}-class-column"
             t-class="{{classPrefix}}__checkbox-group"
             custom-style="grid-template-columns: repeat({{optionsColumns}}, 1fr)"
             value="{{value}}"
             bind:change="handleRadioChange"
           >
             <block wx:for="{{options}}" wx:key="index">
               <t-checkbox
-                class="{{classPrefix}}__checkbox-item"
+                class="{{classPrefix}}__checkbox-item {{prefix}}-class-column-item"
                 theme="tag"
                 value="{{item[valueAlias]}}"
                 label="{{item[labelAlias]}}"
@@ -56,7 +64,7 @@
       <block wx:elif="{{optionsLayout === 'tree'}}">
         <scroll-view
           scroll-y
-          class="{{classPrefix}}__column {{classPrefix}}__column--{{_.getTreeClass(leafLevel - level)}}"
+          class="{{classPrefix}}__column {{classPrefix}}__column--{{_.getTreeClass(leafLevel - level)}} {{prefix}}-class-tree"
           wx:for="{{treeOptions}}"
           wx:key="level"
           wx:for-index="level"
@@ -68,7 +76,7 @@
               bind:tap="handleTreeClick"
               data-level="{{level}}"
               data-value="{{item[valueAlias]}}"
-              class="{{classPrefix}}__tree-item {{item[valueAlias] === value[level] ? classPrefix + '__tree-item--active' : '' }}"
+              class="{{classPrefix}}__tree-item {{item[valueAlias] === value[level] ? classPrefix + '__tree-item--active' : '' }} {{prefix}}-class-tree-item"
             >
               {{item[labelAlias]}}
             </view>
@@ -77,17 +85,17 @@
           <block wx:else>
             <block wx:if="{{!multiple}}">
               <t-radio-group
-                class="{{classPrefix}}__radio"
+                class="{{classPrefix}}__radio {{prefix}}-class-tree-columns"
                 data-level="{{level}}"
                 value="{{value[level]}}"
                 bind:change="handleRadioChange"
               >
                 <t-radio
                   wx:for="{{treeOptions[level]}}"
                   wx:key="value"
-                  class="{{classPrefix}}__radio-item"
+                  class="{{classPrefix}}__radio-item {{prefix}}-class-tree-columns-item"
                   t-class="radio"
-                  t-class-label="radio__label radio__label--{{value[level] === item[valueAlias] ? 'active' : ''}}"
+                  t-class-label="radio__label radio__label--{{value[level] === item[valueAlias] ? 'active' : ''}} {{prefix}}-class-tree-columns-item-label"
                   value="{{item[valueAlias]}}"
                   borderless
                   align="right"
@@ -97,7 +105,7 @@
             </block>
             <block wx:elif="{{multiple}}">
               <t-checkbox-group
-                class="{{classPrefix}}__checkbox"
+                class="{{classPrefix}}__checkbox {{prefix}}-class-tree-columns"
                 value="{{value[level]}}"
                 bind:change="handleRadioChange"
                 data-level="{{level}}"
@@ -106,8 +114,9 @@
                   wx:for="{{treeOptions[level]}}"
                   wx:key="value"
                   align="right"
+                  class="{{prefix}}-class-tree-columns-item"
                   t-class="radio"
-                  t-class-label="radio__label radio__label--{{value[level] === item[valueAlias] ? 'active' : ''}}"
+                  t-class-label="radio__label radio__label--{{value[level] === item[valueAlias] ? 'active' : ''}} {{prefix}}-class-tree-columns-item-label"
                   borderless
                   value="{{item[valueAlias]}}"
                   >{{item[labelAlias]}}</t-checkbox
@@ -120,7 +129,7 @@
 
       <slot />
     </view>
-    <view class="{{classPrefix}}__foot" wx:if="{{multiple || optionsLayout === 'tree'}}">
+    <view class="{{classPrefix}}__foot {{prefix}}-class-footer" wx:if="{{multiple || optionsLayout === 'tree'}}">
       <t-button-group>
         <t-button
           block

src/dropdown-menu/dropdown-menu.ts

@@ -10,6 +10,14 @@ export interface DropdownMenuProps extends TdDropdownMenuProps {}
 
 @wxComponent()
 export default class DropdownMenu extends SuperComponent {
+  externalClasses = [
+    `${prefix}-class`,
+    `${prefix}-class-menu`,
+    `${prefix}-class-menu-item`,
+    `${prefix}-class-menu-label`,
+    `${prefix}-class-menu-icon`,
+  ];
+
   properties = props; // todo: zindex activeColor
 
   nodes = null;

src/dropdown-menu/dropdown-menu.wxml

@@ -1,17 +1,17 @@
-<view style="{{ customStyle }}" class="{{ classPrefix }}">
-  <view class="{{ classPrefix }}__bar" id="t-bar">
+<view style="{{ customStyle }}" class="{{ classPrefix }} {{prefix}}-class">
+  <view class="{{ classPrefix }}__bar {{prefix}}-class-menu" id="t-bar">
     <view
       wx:for="{{menus}}"
       wx:key="index"
       bindtap="handleToggle"
       data-index="{{index}}"
-      class="{{ classPrefix }}__item {{ activeIdx == index ? prefix + '-is-active' : ''}} {{ item.disabled ? prefix + '-is-disabled' : ''}}"
+      class="{{ classPrefix }}__item {{ activeIdx == index ? prefix + '-is-active' : ''}} {{ item.disabled ? prefix + '-is-disabled' : ''}} {{prefix}}-class-menu-item"
     >
-      <view class="{{ classPrefix }}__title">{{item.label}}</view>
+      <view class="{{ classPrefix }}__title {{prefix}}-class-menu-label">{{item.label}}</view>
       <t-icon
         name="caret-down-small"
         size="48rpx"
-        class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}}"
+        class="{{classPrefix}}__icon {{classPrefix}}__icon--{{activeIdx == index ? 'active' : ''}} {{prefix}}-class-menu-icon"
       />
     </view>
   </view>

src/dropdown-menu/props.ts

@@ -26,6 +26,10 @@ const props: TdDropdownMenuProps = {
     type: null,
     value: 200,
   },
+  /** 组件类名，分别用于设置 组件外层类名、菜单标签、菜单图标类名 等 */
+  externalClasses: {
+    type: Array,
+  },
   /** 是否显示遮罩层 */
   showOverlay: {
     type: Boolean,

src/dropdown-menu/type.ts

@@ -39,6 +39,13 @@ export interface TdDropdownMenuProps {
     type: null;
     value?: string | number;
   };
+  /**
+   * 组件类名，分别用于设置 组件外层类名、菜单标签、菜单图标类名 等
+   */
+  externalClasses?: {
+    type: ArrayConstructor;
+    value?: ['t-class', 't-class-menu', 't-class-menu-item', 't-class-menu-label', 't-class-menu-icon'];
+  };
   /**
    * 是否显示遮罩层
    * @default true
@@ -74,6 +81,25 @@ export interface TdDropdownItemProps {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 组件类名，分别用于设置 组件外层类名、菜单列、菜单列选项、菜单列选项标签、树形菜单、树形菜单列等类名
+   */
+  externalClasses?: {
+    type: ArrayConstructor;
+    value?: [
+      't-class',
+      't-class-content',
+      't-class-column',
+      't-class-column-item',
+      't-class-column-item-label',
+      't-class-tree',
+      't-class-tree-item',
+      't-class-tree-columns',
+      't-class-tree-columns-item',
+      't-class-tree-columns-item-label',
+      't-class-footer',
+    ];
+  };
   /**
    * 用来定义 value / label 在 `options` 中对应的字段别名
    */

src/dropdown-menu/util.wxs

@@ -5,7 +5,7 @@ var getTreeClass = function (level) {
 };
 
 var getDropdownItemStyles = function (top, zIndex, customStyle) {
-  var topStyle = 'top:' + top + 'px;';
+  var topStyle = top ? 'top:' + top + 'px;' : '';
   var zIndexStyle = zIndex ? 'z-index:' + zIndex + ';' : '';
   return topStyle + zIndexStyle + customStyle;
 };