admin/wot-design-uni
1
0
Fork 0
mirror of https://gitee.com/wot-design-uni/wot-design-uni.git synced 2025-12-06 17:18:40 +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`，数组内部对象结构如下：
@ -17,7 +17,7 @@
```html
<wd-toast />
<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
@ -56,7 +56,7 @@ function select({ item, index }) {
```html
<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
@ -88,7 +88,7 @@ function close() {
设置 `cancel-text` 取消按钮文案，展示取消按钮。
```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
<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
@ -138,7 +138,7 @@ function select({ item, index }) {
```html
<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
@ -177,7 +177,7 @@ function select({ item, index }) {
设置 `title` 展示标题。
```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>
</wd-action-sheet>
```
@ -186,7 +186,7 @@ function select({ item, index }) {
| 参数 | 说明 | 类型 | 可选值 | 默认值 | 最低版本 |
| ---------------------- | ----------------------------------------------------------------------------- | ------- | ------ | ------- | -------- |
| show | 设置菜单显示隐藏 | boolean | - | - | - |
| v-model | 设置菜单显示隐藏 | boolean | - | - | - |
| actions | 菜单选项 | array | - | [] | - |
| panels | 自定义面板项,可以为字符串数组，也可以为对象数组，如果为二维数组，则为多行展示 | array | - | [] | - |
| title | 标题 | string | - | - | - |

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

@ -4,27 +4,27 @@
<view>
<demo-block title="基本用法">
<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 title="选项状态">
<wd-button @click="showActions2">弹出菜单</wd-button>
</demo-block>
<demo-block title="取消按钮">
<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 title="自定义面板单行">
<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 title="自定义面板多行">
<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 title="标题">
<wd-button @click="showActions6">弹出菜单</wd-button>
</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>
</wd-action-sheet>
</view>

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

@ -2,7 +2,7 @@
<page-wraper>
<wd-message-box />
<wd-toast />
<wd-action-sheet :show="showAction" :actions="actions" @close="closeActions" />
<wd-action-sheet v-model="showAction" :actions="actions" />
<wd-cell-group>
<wd-cell title="弹出菜单" clickable @click="showActions"></wd-cell>
@ -201,9 +201,6 @@ const phone = ref<string>('')
const toast = useToast()
const messageBox = useMessage()
function closeActions() {
showAction.value = false
}
function showActions() {
showAction.value = true
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 {
customClass?: string
customHeaderClass?: string
show: boolean
modelValue: boolean
actions?: Array<Action>
panels?: Array<Panel>
title?: string
@ -109,7 +109,7 @@ interface Props {
const props = withDefaults(defineProps<Props>(), {
customClass: '',
customHeaderClass: '',
show: false,
modelValue: false,
actions: () => [] as Array<Action>,
panels: () => [] as Array<Panel>,
closeOnClickAction: true,
@ -132,14 +132,14 @@ watch(
)
watch(
() => props.show,
() => props.modelValue,
(newValue) => {
showPopup.value = newValue
},
{ 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() {
return props.panels.length && !(props.panels[0] instanceof Array)
@ -179,6 +179,7 @@ function handleCancel() {
close()
}
function close() {
emit('update:modelValue', false)
emit('close')
}
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"
:type="type"
:date="item.date"
:data-date="item.date"
:value="value"
:min-date="minDate"
:max-date="maxDate"

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

@ -1,7 +1,7 @@
<template>
<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__months">
<view

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

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

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

@ -25,7 +25,7 @@
</view>
</view>
<wd-action-sheet
:show="pickerShow"
v-model="pickerShow"
:duration="250"
:close-on-click-modal="closeOnClickModal"
:safe-area-inset-bottom="safeAreaInsetBottom"
@ -54,7 +54,7 @@
{{ item.text }}
</wd-tag>
</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
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>
<wd-action-sheet
:show="pickerShow"
v-model="pickerShow"
:duration="250"
:title="title || '请选择'"
: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>
<wd-action-sheet
:show="pickerShow"
v-model="pickerShow"
:duration="250"
:title="title || '请选择'"
:close-on-click-modal="closeOnClickModal"