From aa92332f3913be000d1aef36a8aed7f34b736ad6 Mon Sep 17 00:00:00 2001
From: xuqingkai <xuqingkai@hd123.com>
Date: Thu, 24 Aug 2023 19:45:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E2=9C=A8=20ActionSheet=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E8=B0=83=E6=95=B4=E4=B8=BA=E4=BD=BF=E7=94=A8v-model?=
 =?UTF-8?q?=E8=AE=BE=E7=BD=AE=E6=98=BE=E7=A4=BA=E4=B8=8E=E9=9A=90=E8=97=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/component/actionSheet.md                    | 16 ++++++++--------
 src/pages/actionSheet/Index.vue                  | 10 +++++-----
 src/pages/configProvider/Index.vue               |  5 +----
 .../wd-action-sheet/wd-action-sheet.vue          |  9 +++++----
 .../wd-calendar-view/monthPanel/month-panel.vue  |  1 -
 .../components/wd-calendar-view/year/year.vue    |  2 +-
 .../wd-calendar-view/yearPanel/year-panel.vue    |  1 -
 .../components/wd-calendar/wd-calendar.vue       |  4 ++--
 .../components/wd-col-picker/wd-col-picker.vue   |  2 +-
 .../wd-select-picker/wd-select-picker.vue        |  2 +-
 10 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/docs/component/actionSheet.md b/docs/component/actionSheet.md
index 5cd5122d..54354fb8 100644
--- a/docs/component/actionSheet.md
+++ b/docs/component/actionSheet.md
@@ -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  | -      | -       | -        |
diff --git a/src/pages/actionSheet/Index.vue b/src/pages/actionSheet/Index.vue
index eddbd368..f47b37a4 100644
--- a/src/pages/actionSheet/Index.vue
+++ b/src/pages/actionSheet/Index.vue
@@ -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>
diff --git a/src/pages/configProvider/Index.vue b/src/pages/configProvider/Index.vue
index 8077a9b3..269aa544 100644
--- a/src/pages/configProvider/Index.vue
+++ b/src/pages/configProvider/Index.vue
@@ -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 = [
diff --git a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
index 357d8e45..0032257b 100644
--- a/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-action-sheet/wd-action-sheet.vue
@@ -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() {
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
index 0eae9ca7..e02f7a6e 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/monthPanel/month-panel.vue
@@ -18,7 +18,6 @@
           class="month"
           :type="type"
           :date="item.date"
-          :data-date="item.date"
           :value="value"
           :min-date="minDate"
           :max-date="maxDate"
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
index a133c130..316e3e8a 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/year/year.vue
@@ -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
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
index f6f738d0..bcde36b1 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar-view/yearPanel/year-panel.vue
@@ -7,7 +7,6 @@
           class="year"
           :type="type"
           :date="item.date"
-          :data-date="item.date"
           :value="value"
           :min-date="minDate"
           :max-date="maxDate"
diff --git a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
index 2a2dbde1..1d368abb 100644
--- a/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-calendar/wd-calendar.vue
@@ -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"
diff --git a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
index 21ff9b93..1dd686e5 100644
--- a/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-col-picker/wd-col-picker.vue
@@ -25,7 +25,7 @@
       </view>
     </view>
     <wd-action-sheet
-      :show="pickerShow"
+      v-model="pickerShow"
       :duration="250"
       :title="title || '请选择'"
       :close-on-click-modal="closeOnClickModal"
diff --git a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
index 9893a2eb..3be31691 100644
--- a/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
+++ b/src/uni_modules/wot-design-uni/components/wd-select-picker/wd-select-picker.vue
@@ -27,7 +27,7 @@
       </view>
     </view>
     <wd-action-sheet
-      :show="pickerShow"
+      v-model="pickerShow"
       :duration="250"
       :title="title || '请选择'"
       :close-on-click-modal="closeOnClickModal"