Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
wants to merge 5 commits into from
Closed

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8bab50c
fix: 🐛 修复wd-button 在hairline时active没有圆角问题
icjs-cc Aug 2, 2024
e629d23
Merge branch 'Moonofweisheng:master' into master
icjs-cc Sep 21, 2024
704ae69
Merge branch 'Moonofweisheng:master' into master
icjs-cc Oct 8, 2024
1e91f8c
feat: ✨ 新增Curtain 幕帘属性，支持使用其他图标
icjs-cc Oct 9, 2024
e5c9920
refactor: ♻️ 删除多余代码
icjs-cc Oct 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions docs/component/curtain.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 | $LOWEST_VERSION$ |
| close-icon-size | 图标的字体大小 | string | - | inherit | - |
| close-icon-color | 图标的字体颜色 | string | - | inherit | - |

## Events

Expand Down
20 changes: 20 additions & 0 deletions src/pages/curtain/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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)
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🛠️ Refactor suggestion

建议重构重复代码

当前实现中，每个 curtain 实例都有独立的 value、handleClick 和 handleClose 方法，导致了大量重复代码。建议考虑重构，使用一个通用的状态管理方法来处理所有 curtain 实例，这样可以显著减少代码重复并提高可维护性。

例如，可以考虑使用一个对象来管理所有 curtain 的状态，并使用一个通用的方法来处理打开和关闭操作。

以下是一个可能的重构方案：

interface CurtainState {
  [key: string]: boolean;
}

const curtainStates = reactive<CurtainState>({
  curtain1: false,
  curtain2: false,
  // ... 其他 curtain
  curtain9: false
});

function handleCurtainToggle(curtainKey: string) {
  curtainStates[curtainKey] = !curtainStates[curtainKey];
}

然后在模板中可以这样使用：

<wd-button @click="handleCurtainToggle('curtain9')">关闭图标自定义</wd-button>

<wd-curtain
  :value="curtainStates.curtain9"
  :src="img"
  :to="link"
  closeIconName="close"
  closeIconSize="20"
  closeIconColor="red"
  @close="handleCurtainToggle('curtain9')"
  :width="280"
></wd-curtain>

这种方法可以大大减少重复代码，使得添加新的 curtain 实例变得更加简单和一致。

Also applies to: 116-121

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')

Expand Down Expand Up @@ -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'
Expand Down
1 change: 1 addition & 0 deletions src/uni_modules/wot-design-uni/components/wd-button/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
@include m(active) {
&:active::before {
opacity: 0.15;
border-radius: 6px;
}
}

Expand Down
15 changes: 14 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-curtain/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
8 changes: 7 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down