feat: ✨ 新增Curtain 幕帘属性，支持使用其他图标

docs/component/curtain.md

@@ -108,6 +108,9 @@ function handleClose() {
 | close-position | 关闭按钮位置 | string | inset / top / bottom / top-left / top-right / bottom-left / bottom-right | inset | - |
 | close-on-click-modal | 点击遮罩是否关闭 | boolean | - | false | - |
 | hide-when-close | 是否当关闭时将弹出层隐藏（display: none) | boolean | - | true | - |
+| close-icon-name | 关闭按钮图标 | string | close-outline / close | close-outline | - |
+| close-icon-size | 图标的字体大小 | string |	- |	inherit | - |
+| close-icon-color | 图标的字体颜色 | string |	- |	inherit | - |
 
 ## Events
 

src/pages/curtain/Index.vue

@@ -18,6 +18,9 @@
     <demo-block title="点击遮罩关闭">
       <wd-button @click="handleClick8">点击遮罩关闭</wd-button>
     </demo-block>
+    <demo-block title="自定义图标">
+      <wd-button @click="handleClick9">关闭图标自定义</wd-button>
+    </demo-block>
 
     <wd-curtain :value="value1" :src="img" :to="link" @close="handleClose1" :width="280"></wd-curtain>
     <wd-curtain :value="value2" :src="img" :to="link" close-position="top-left" :width="200" @close="handleClose2"></wd-curtain>
@@ -35,6 +38,16 @@
       @close="handleClose8"
       :close-on-click-modal="true"
     ></wd-curtain>
+    <wd-curtain
+      :value="value9"
+      :src="img"
+      :to="link"
+      closeIconName="close"
+      closeIconSize="20"
+      closeIconColor="red"
+      @close="handleClose9"
+      :width="280"
+    ></wd-curtain>
   </page-wraper>
 </template>
 <script lang="ts" setup>
@@ -48,6 +61,7 @@ const value5 = ref<boolean>(false)
 const value6 = ref<boolean>(false)
 const value7 = ref<boolean>(false)
 const value8 = ref<boolean>(false)
+const value9 = ref<boolean>(false)
 const img = ref<string>('https://img20.360buyimg.com/da/jfs/t1/141592/25/8861/261559/5f68d8c1E33ed78ab/698ad655bfcfbaed.png')
 const link = ref<string>('/pages/index/index')
 
@@ -99,6 +113,12 @@ function handleClick8() {
 function handleClose8() {
   value8.value = false
 }
+function handleClick9() {
+  value9.value = true
+}
+function handleClose9() {
+  value9.value = false
+}
 function clickImg() {
   uni.navigateTo({
     url: '/pages/index/index'

src/uni_modules/wot-design-uni/components/wd-button/index.scss

@@ -82,6 +82,7 @@
   @include m(active) {
     &:active::before {
       opacity: 0.15;
+      border-radius: 6px;
     }
   }
 

src/uni_modules/wot-design-uni/components/wd-curtain/types.ts

@@ -2,6 +2,7 @@ import type { ExtractPropTypes } from 'vue'
 import { baseProps, makeBooleanProp, makeStringProp } from '../common/props'
 
 export type ClosePosition = 'inset' | 'top' | 'bottom' | 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'
+export type CloseIconName = 'close-outline' | 'close'
 
 export const curtainProps = {
   ...baseProps,
@@ -32,7 +33,19 @@ export const curtainProps = {
   /**
    * 是否当关闭时将弹出层隐藏（display: none)
    */
-  hideWhenClose: makeBooleanProp(true)
+  hideWhenClose: makeBooleanProp(true),
+  /**
+   * 关闭按钮图标，可选值：close-outline / close
+   */
+  closeIconName: makeStringProp<CloseIconName>('close-outline'),
+  /**
+   * 图标的字体大小
+   */
+  closeIconSize: String,
+  /**
+   * 图标的字体颜色
+   */
+  closeIconColor: String
 }
 
 export type CurtainProps = ExtractPropTypes<typeof curtainProps>

src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue

@@ -19,7 +19,13 @@
     >
       <view class="wd-curtain__content">
         <image :src="src" class="wd-curtain__content-img" :style="imgStyle" @click="clickImage" @error="imgErr" @load="imgLoad"></image>
-        <wd-icon name="close-outline" :custom-class="`wd-curtain__content-close ${closePosition}`" @click="close" />
+        <wd-icon
+          :name="closeIconName"
+          :size="closeIconSize"
+          :color="closeIconColor"
+          :custom-class="`wd-curtain__content-close ${closePosition}`"
+          @click="close"
+        />
       </view>
     </wd-popup>
   </view>