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

Jump to bottom

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

Closed
wants to merge 5 commits into from
+45 −2
Closed

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

Show file tree
Hide file tree
Changes from 4 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>
11 changes: 9 additions & 2 deletions 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 All @@ -39,7 +45,8 @@ export default {
<script lang="ts" setup>
import wdIcon from '../wd-icon/wd-icon.vue'
import wdPopup from '../wd-popup/wd-popup.vue'
import { ref, watch } from 'vue'
import { addUnit, objToStyle } from '../common/util'
import { computed, ref, watch, type CSSProperties } from 'vue'
Copy link

Choose a reason for hiding this comment

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

💡 Codebase verification

新导入的内容未在组件中使用，请检查是否需要这些导入。如果不需要，请移除它们以优化代码。

🔗 Analysis chain

导入的更新增强了组件的功能，很好！

新增的 addUnit 和 objToStyle 工具函数以及 CSSProperties 类型的导入表明了对样式处理的改进。同时，导入 computed 函数暗示可能会使用计算属性来优化组件逻辑。

为了确保这些新导入的充分利用，请确认：

  1. addUnit 和 objToStyle 函数在组件中的使用位置。
  2. CSSProperties 类型是否用于类型注解。
  3. 是否计划添加新的计算属性。

可以运行以下脚本来验证这些导入的使用情况：

请运行以下脚本以验证新导入的内容在组件中的实际使用情况：

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# 检查新导入的使用情况
echo "Checking usage of new imports:"
rg "addUnit|objToStyle|CSSProperties|computed" src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue

Length of output: 354

Script:

# 检查 `addUnit` 和 `objToStyle` 的使用情况
rg 'addUnit\(|objToStyle\(' src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue

# 检查 `CSSProperties` 类型的使用情况，排除导入语句
rg 'CSSProperties' src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue | grep -v 'import'

# 检查 `computed` 的使用情况，排除导入语句
rg 'computed\(' src/uni_modules/wot-design-uni/components/wd-curtain/wd-curtain.vue | grep -v 'import'

Length of output: 304

import { curtainProps } from './types'

const props = defineProps(curtainProps)
Expand Down