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: ✨ datetime-picker新增right-icon插槽 #633

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: ✨ datetime-picker新增right-icon插槽 #633

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
99ad5e3
feat: ✨ Datetime-picker新增right-icon插槽
810505339 Sep 26, 2024
df64340
docs: ✏️ datetime-picker修复right-icon插槽文本
810505339 Sep 26, 2024
9517e44
fix: 🐛 Pagination修复在暗黑模式显示的问题
810505339 Sep 27, 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
35 changes: 35 additions & 0 deletions docs/component/datetime-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,6 +255,40 @@ const displayFormatTabLabel = (items) => {

```

## 自定义icon

添加 `right-icon` 插槽来自定义右侧图标。


```html
<wd-datetime-picker label="自定义icon" v-model="value" ref="dateTimePickerRef">
<template #right-icon="{ disabled, readonly }">
<view @click.stop="rightIconClick" v-if="!disabled && !readonly">
<wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" />
</view>
</template>
</wd-datetime-picker>
```

```typescript
import type {,
DatetimePickerExpose
} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'

const value = ref<any[]>(['', Date.now()])
const dateTimePickerRef=ref<DatetimePickerExpose>(null)

/* right-icon点击事件 */
function rightIconClick() {
if (isEmpty.value) {
dateTimePickerRef.value!.open()
return
}
value.value = []
}
```


## Attributes

| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
Expand Down Expand Up @@ -328,6 +362,7 @@ const displayFormatTabLabel = (items) => {
|------|-----|---------|
| default | 使用默认插槽 | - |
| label | 左侧标题插槽 | - |
| right-icon | 右侧图标插槽,作用域参数：{ disabled, readonly } | $LOWEST_VERSION$ |

## 外部样式类

Expand Down
30 changes: 28 additions & 2 deletions src/pages/datetimePicker/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,15 @@
<demo-block title="范围tab展示格式" transparent>
<wd-datetime-picker label="日期选择" v-model="value15" @confirm="handleConfirm15" :display-format-tab-label="displayFormatTabLabel" />
</demo-block>
<demo-block title="自定义icon" transparent>
<wd-datetime-picker label="自定义icon" v-model="value18" ref="dateTimePickerRef">
<template #right-icon="{ disabled, readonly }">
<view @click.stop="rightIconClick" v-if="!disabled && !readonly">
<wd-icon custom-class="wd-picker__arrow" :name="isEmpty ? 'arrow-right' : 'close'" />
</view>
</template>
</wd-datetime-picker>
</demo-block>
</page-wraper>
</template>
<script lang="ts" setup>
Expand All @@ -41,9 +50,10 @@ import type { DatetimePickerViewFilter, DatetimePickerViewFormatter } from '@/un
import type {
DatetimePickerDisplayFormat,
DatetimePickerDisplayFormatTabLabel,
DatetimePickerInstance
DatetimePickerInstance,
DatetimePickerExpose
} from '@/uni_modules/wot-design-uni/components/wd-datetime-picker/types'
import { ref } from 'vue'
import { ref, computed } from 'vue'

const value1 = ref<string>('')
const value2 = ref<number>(Date.now())
Expand All @@ -62,10 +72,13 @@ const value14 = ref<any[]>(['', ''])
const value15 = ref<any[]>(['', Date.now()])
const value16 = ref(Date.now())
const value17 = ref(Date.now())
const value18 = ref<any[]>(['', Date.now()])

const minDate = ref<number>(Date.now())
const maxDate = ref<number>(new Date(new Date().getFullYear() + 1, new Date().getMonth(), new Date().getDate()).getTime())

const dateTimePickerRef = ref<DatetimePickerExpose>()

const formatter: DatetimePickerViewFormatter = (type, value) => {
switch (type) {
case 'year':
Expand Down Expand Up @@ -160,5 +173,18 @@ function handleConfirm16({ value }: any) {
}
/** picker触发cancel事件，同步触发cancel事件 */
function onCancel() {}
/* 自定义icon */
const isEmpty = computed(() => {
return value18.value.every((item) => item == '')
})
/* right-icon点击事件 */
function rightIconClick() {
if (isEmpty.value) {
dateTimePickerRef.value!.open()
return
}
value18.value = []
toast.success('清空成功')
}
Comment on lines +181 to +188
Copy link

Choose a reason for hiding this comment

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

⚠️ Potential issue

建议改进 rightIconClick 函数中的空值处理。

rightIconClick 函数的实现逻辑正确，但在访问 dateTimePickerRef.value 时使用了非空断言操作符 (!)，这可能在某些情况下导致运行时错误。

建议使用可选链操作符 (?.) 来安全地访问和调用 open 方法：

function rightIconClick() {
  if (isEmpty.value) {
-   dateTimePickerRef.value!.open()
+   dateTimePickerRef.value?.open()
    return
  }
  value18.value = []
  toast.success('清空成功')
}

这样可以避免在 dateTimePickerRef.value 为 null 或 undefined 时抛出错误。

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
function rightIconClick() {
if (isEmpty.value) {
dateTimePickerRef.value!.open()
return
}
value18.value = []
toast.success('清空成功')
}
function rightIconClick() {
if (isEmpty.value) {
dateTimePickerRef.value?.open()
return
}
value18.value = []
toast.success('清空成功')
}

</script>
<style lang="scss" scoped></style>
4 changes: 3 additions & 1 deletion src/uni_modules/wot-design-uni/components/wd-datetime-picker/wd-datetime-picker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,9 @@
{{ showValue ? showValue : placeholder || translate('placeholder') }}
</view>
</view>
<wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
<slot name="right-icon" :disabled="disabled" :readonly="readonly">
<wd-icon v-if="!disabled && !readonly" custom-class="wd-picker__arrow" name="arrow-right" />
</slot>
</view>
<view v-if="errorMessage" class="wd-picker__error-message">{{ errorMessage }}</view>
</view>
Expand Down
7 changes: 4 additions & 3 deletions src/uni_modules/wot-design-uni/components/wd-pagination/index.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,11 @@
@include edeep(nav) {
min-width: $-pagination-nav-width;
@include m(active){
color: rgba(0,0,0,0.65)
opacity:0.935;
}
@include m(disabled){
color: rgba(0,0,0,0.15)
// color: rgba(0,0,0,0.15)
opacity:0.985;
}
}
@include e(size){
Expand All @@ -54,4 +55,4 @@
@include e(current){
color: $-pagination-nav-current-color;
}
}
}