Merge pull request #557 from webwyb/feature/action-sheet/add-class

feat(action-sheet): add class config
Tencent · Jul 1, 2022 · 54b1a18 · 54b1a18
2 parents 89a35d5 + e2d0dcd
commit 54b1a18
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 13 deletions.
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
@@ -76,6 +76,7 @@ show-cancel | Boolean | true | 是否显示取消按钮 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | null | 必需。显示与隐藏 | Y
 default-visible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
+external-classes | Array | - | 组件类名，分别用于设置 组件外层元素、组件内容部分、取消按钮 等元素类名。`['t-class', 't-class-content', 't-class-cancel']` | N
 
 ### ActionSheet Events
 

diff --git a/src/action-sheet/action-sheet.ts b/src/action-sheet/action-sheet.ts
@@ -11,7 +11,7 @@ const name = `${prefix}-action-sheet`;
 export default class ActionSheet extends SuperComponent {
   static show = show;
 
-  externalClasses = [`${prefix}-class`];
+  externalClasses = [`${prefix}-class`, `${prefix}-class-content`, `${prefix}-class-cancel`];
 
   properties = {
     ...props,

diff --git a/src/action-sheet/action-sheet.wxml b/src/action-sheet/action-sheet.wxml
@@ -3,22 +3,24 @@
 <import src="./template/action-sheet-grid.wxml" />
 <view id="{{classPrefix}}" class="{{classPrefix}} {{prefix}}-class">
   <t-popup visible="{{visible}}" placement="bottom" bind:visible-change="onPopupVisibleChange">
-    <block wx:if="{{gridThemeItems.length}}">
-      <template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
-    </block>
-    <block wx:elif="{{items && items.length}}">
-      <view class="{{classPrefix}}__list" wx:for="{{ items }}" wx:key="index">
-        <template
-          is="list"
-          data="{{index, classPrefix, listThemeItemClass: this.getListThemeItemClass({ item, prefix, classPrefix }), item}}"
-        />
-      </view>
-    </block>
+    <view class="{{classPrefix}}__content {{prefix}}-class-content">
+      <block wx:if="{{gridThemeItems.length}}">
+        <template is="grid" data="{{classPrefix, prefix, gridThemeItems, count, currentSwiperIndex}}" />
+      </block>
+      <block wx:elif="{{items && items.length}}">
+        <view class="{{classPrefix}}__list" wx:for="{{ items }}" wx:key="index">
+          <template
+            is="list"
+            data="{{index, classPrefix, listThemeItemClass: this.getListThemeItemClass({ item, prefix, classPrefix }), item}}"
+          />
+        </view>
+      </block>
+    </view>
     <slot />
     <view wx:if="{{showCancel}}" class="{{classPrefix}}__footer {{classPrefix}}__safe">
       <view class="{{classPrefix}}__gap-{{theme}}" />
       <view
-        class="{{classPrefix}}__cancel"
+        class="{{classPrefix}}__cancel {{prefix}}-class-cancel"
         hover-class="{{classPrefix}}__cancel--hover"
         hover-stay-time="70"
         bind:tap="onCancel"