admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-07 01:28:30 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: ✨ ActionSheet组件调整为使用v-model设置显示与隐藏

Browse Source
This commit is contained in:
xuqingkai 2023-08-24 19:45:08 +08:00
parent 8acaabc208
commit aa92332f39
10 changed files with 24 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
docs/component/actionSheet.md
View File

@ -4,7 +4,7 @@
## 基本用法 ## 基本用法
通过 `show` 属性设置显示隐藏，监听 `close` 事件，隐藏菜单。 通过 `v-model` 设置显示隐藏。
`actions` 类型为 `Array`，数组内部对象结构如下： `actions` 类型为 `Array`，数组内部对象结构如下：
@ -17,7 +17,7 @@
```html ```html
<wd-toast /> <wd-toast />
<wd-button @click="showActions">弹出菜单</wd-button> <wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" @select="select" /> <wd-action-sheet v-model="show" :actions="actions" @close="close" @select="select" />
``` ```
```typescript ```typescript
@ -56,7 +56,7 @@ function select({ item, index }) {
```html ```html
<wd-button @click="showActions">弹出菜单</wd-button> <wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" /> <wd-action-sheet v-model="show" :actions="actions" @close="close" />
``` ```
```typescript ```typescript
@ -88,7 +88,7 @@ function close() {
设置 `cancel-text` 取消按钮文案，展示取消按钮。 设置 `cancel-text` 取消按钮文案，展示取消按钮。
```html ```html
<wd-action-sheet :show="show" :actions="actions" @close="close" cancel-text="取消" /> <wd-action-sheet v-model="show" :actions="actions" @close="close" cancel-text="取消" />
``` ```
## 自定义单行面板 ## 自定义单行面板
@ -102,7 +102,7 @@ function close() {
```html ```html
<wd-button @click="showActions">弹出菜单</wd-button> <wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :panels="panels" @close="close" @select="select" /> <wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />
``` ```
```typescript ```typescript
@ -138,7 +138,7 @@ function select({ item, index }) {
```html ```html
<wd-button @click="showActions">弹出菜单</wd-button> <wd-button @click="showActions">弹出菜单</wd-button>
<wd-action-sheet :show="show" :panels="panels" @close="close" @select="select" /> <wd-action-sheet v-model="show" :panels="panels" @close="close" @select="select" />
``` ```
```typescript ```typescript
@ -177,7 +177,7 @@ function select({ item, index }) {
设置 `title` 展示标题。 设置 `title` 展示标题。
```html ```html
<wd-action-sheet :show="show" title="标题" @close="close"> <wd-action-sheet v-model="show" title="标题" @close="close">
<view style="padding: 15px 15px 150px 15px;">内容</view> <view style="padding: 15px 15px 150px 15px;">内容</view>
</wd-action-sheet> </wd-action-sheet>
``` ```
@ -186,7 +186,7 @@ function select({ item, index }) {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 | | 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | ----------------------------------------------------------------------------- | ------- | ------ | ------- | -------- | | ---------------------- | ----------------------------------------------------------------------------- | ------- | ------ | ------- | -------- |
| show | 设置菜单显示隐藏 | boolean | - | - | - | | v-model | 设置菜单显示隐藏 | boolean | - | - | - |
| actions | 菜单选项 | array | - | [] | - | | actions | 菜单选项 | array | - | [] | - |
| panels | 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 | array | - | [] | - | | panels | 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 | array | - | [] | - |
| title | 标题 | string | - | - | - | | title | 标题 | string | - | - | - |

10
src/pages/actionSheet/Index.vue
View File

@ -4,27 +4,27 @@
<view> <view>
<demo-block title="基本用法"> <demo-block title="基本用法">
<wd-button @click="showActions1">弹出菜单</wd-button> <wd-button @click="showActions1">弹出菜单</wd-button>
<wd-action-sheet :show="show" :actions="actions" @close="close" /> <wd-action-sheet v-model="show" :actions="actions" />
</demo-block> </demo-block>
<demo-block title="选项状态"> <demo-block title="选项状态">
<wd-button @click="showActions2">弹出菜单</wd-button> <wd-button @click="showActions2">弹出菜单</wd-button>
</demo-block> </demo-block>
<demo-block title="取消按钮"> <demo-block title="取消按钮">
<wd-button @click="showActions3">弹出菜单</wd-button> <wd-button @click="showActions3">弹出菜单</wd-button>
<wd-action-sheet :show="show1" :actions="actions" cancel-text="取消" @close="close1" /> <wd-action-sheet v-model="show1" :actions="actions" cancel-text="取消" @close="close1" />
</demo-block> </demo-block>
<demo-block title="自定义面板单行"> <demo-block title="自定义面板单行">
<wd-button @click="showActions4">弹出菜单</wd-button> <wd-button @click="showActions4">弹出菜单</wd-button>
<wd-action-sheet :show="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" /> <wd-action-sheet v-model="show2" :panels="panels" cancel-text="取消" @close="close2" @select="select" />
</demo-block> </demo-block>
<demo-block title="自定义面板多行"> <demo-block title="自定义面板多行">
<wd-button @click="showActions5">弹出菜单</wd-button> <wd-button @click="showActions5">弹出菜单</wd-button>
<wd-action-sheet :show="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" /> <wd-action-sheet v-model="show3" :panels="panels" cancel-text="取消" @close="close3" @select="select1" />
</demo-block> </demo-block>
<demo-block title="标题"> <demo-block title="标题">
<wd-button @click="showActions6">弹出菜单</wd-button> <wd-button @click="showActions6">弹出菜单</wd-button>
</demo-block> </demo-block>
<wd-action-sheet :show="show4" title="标题" @close="close4" :cancelText="cancelText"> <wd-action-sheet v-model="show4" title="标题" @close="close4" :cancelText="cancelText">
<view style="padding: 15px 15px 150px 15px">内容</view> <view style="padding: 15px 15px 150px 15px">内容</view>
</wd-action-sheet> </wd-action-sheet>
</view> </view>

5
src/pages/configProvider/Index.vue
View File

@ -2,7 +2,7 @@
<page-wraper> <page-wraper>
<wd-message-box /> <wd-message-box />
<wd-toast /> <wd-toast />
<wd-action-sheet :show="showAction" :actions="actions" @close="closeActions" /> <wd-action-sheet v-model="showAction" :actions="actions" />
<wd-cell-group> <wd-cell-group>
<wd-cell title="弹出菜单" clickable @click="showActions"></wd-cell> <wd-cell title="弹出菜单" clickable @click="showActions"></wd-cell>
@ -201,9 +201,6 @@ const phone = ref<string>('')
const toast = useToast() const toast = useToast()
const messageBox = useMessage() const messageBox = useMessage()
function closeActions() {
showAction.value = false
}
function showActions() { function showActions() {
showAction.value = true showAction.value = true
actions.value = [ actions.value = [

9
src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
View File

@ -93,7 +93,7 @@ interface Panel {
interface Props { interface Props {
customClass?: string customClass?: string
customHeaderClass?: string customHeaderClass?: string
show: boolean modelValue: boolean
actions?: Array<Action> actions?: Array<Action>
panels?: Array<Panel> panels?: Array<Panel>
title?: string title?: string
@ -109,7 +109,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), { const props = withDefaults(defineProps<Props>(), {
customClass: '', customClass: '',
customHeaderClass: '', customHeaderClass: '',
show: false, modelValue: false,
actions: () => [] as Array<Action>, actions: () => [] as Array<Action>,
panels: () => [] as Array<Panel>, panels: () => [] as Array<Panel>,
closeOnClickAction: true, closeOnClickAction: true,
@ -132,14 +132,14 @@ watch(
) )
watch( watch(
() => props.show, () => props.modelValue,
(newValue) => { (newValue) => {
showPopup.value = newValue showPopup.value = newValue
}, },
{ deep: true, immediate: true } { deep: true, immediate: true }
) )
const emit = defineEmits(['select', 'clickmodal', 'cancel', 'closed', 'close', 'open', 'opened']) const emit = defineEmits(['select', 'clickmodal', 'cancel', 'closed', 'close', 'open', 'opened', 'update:modelValue'])
function isArray() { function isArray() {
return props.panels.length && !(props.panels[0] instanceof Array) return props.panels.length && !(props.panels[0] instanceof Array)
@ -179,6 +179,7 @@ function handleCancel() {
close() close()
} }
function close() { function close() {
emit('update:modelValue', false)
emit('close') emit('close')
} }
function handleOpen() { function handleOpen() {

1
src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
View File

@ -18,7 +18,6 @@
class="month" class="month"
:type="type" :type="type"
:date="item.date" :date="item.date"
:data-date="item.date"
:value="value" :value="value"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"

2
src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<wd-toast selector="wd-year" /> <wd-toast selector="wd-year" />
<view class="wd-year year" :data-date="date"> <view class="wd-year year">
<view class="wd-year__title">{{ yearTitle(date) }}</view> <view class="wd-year__title">{{ yearTitle(date) }}</view>
<view class="wd-year__months"> <view class="wd-year__months">
<view <view

1
src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
View File

@ -7,7 +7,6 @@
class="year" class="year"
:type="type" :type="type"
:date="item.date" :date="item.date"
:data-date="item.date"
:value="value" :value="value"
:min-date="minDate" :min-date="minDate"
:max-date="maxDate" :max-date="maxDate"

4
src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
View File

@ -25,7 +25,7 @@
</view> </view>
</view> </view>
<wd-action-sheet <wd-action-sheet
:show="pickerShow" v-model="pickerShow"
:duration="250" :duration="250"
:close-on-click-modal="closeOnClickModal" :close-on-click-modal="closeOnClickModal"
:safe-area-inset-bottom="safeAreaInsetBottom" :safe-area-inset-bottom="safeAreaInsetBottom"
@ -54,7 +54,7 @@
{{ item.text }} {{ item.text }}
</wd-tag> </wd-tag>
</view> </view>
<wd-icon custom-class="wd-calendar__close" name="add" @tap="close" /> <wd-icon custom-class="wd-calendar__close" name="add" @click="close" />
</view> </view>
<view <view
v-if="inited" v-if="inited"

2
src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
View File

@ -25,7 +25,7 @@
</view> </view>
</view> </view>
<wd-action-sheet <wd-action-sheet
:show="pickerShow" v-model="pickerShow"
:duration="250" :duration="250"
:title="title || '请选择'" :title="title || '请选择'"
:close-on-click-modal="closeOnClickModal" :close-on-click-modal="closeOnClickModal"

2
src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
View File

@ -27,7 +27,7 @@
</view> </view>
</view> </view>
<wd-action-sheet <wd-action-sheet
:show="pickerShow" v-model="pickerShow"
:duration="250" :duration="250"
:title="title || '请选择'" :title="title || '请选择'"
:close-on-click-modal="closeOnClickModal" :close-on-click-modal="closeOnClickModal"