feat: 动作面板细节80%

package.json

@@ -117,4 +117,4 @@
     "last 2 versions",
     "not dead"
   ]
-}
+}

src/packages/actionsheet/demo.vue

@@ -39,14 +39,12 @@
     <!-- demo 基础用法 -->
     <nut-actionsheet
       :is-visible="state.isVisible1"
-      @close="switchActionSheet('isVisible1')"
       :menu-items="menuItemsOne"
       @choose="chooseItem"
     ></nut-actionsheet>
     <!-- demo(带取消按钮） -->
     <nut-actionsheet
       :is-visible="state.isVisible2"
-      @close="switchActionSheet('isVisible2')"
       cancelTxt="取消"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
@@ -57,28 +55,22 @@
       :description="state.desc"
       :menu-items="menuItemsTwo"
       cancelTxt="取消"
-      @close="switchActionSheet('isVisible3')"
     >
     </nut-actionsheet>
     <!-- demo 选项状态-->
     <nut-actionsheet
       :is-visible="state.isVisible4"
-      @close="switchActionSheet('isVisible4')"
       cancelTxt="取消"
       :menu-items="menuItemsThree"
     ></nut-actionsheet>
     <!-- demo 自定义 -->
-    <nut-actionsheet
-      :is-visible="state.isVisible5"
-      cancelTxt="取消"
-      @close="switchActionSheet('isVisible5')"
-    >
+    <nut-actionsheet :is-visible="state.isVisible5" cancelTxt="取消">
       <div class="custom-wrap"><span>自定义</span></div>
     </nut-actionsheet>
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { reactive } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('actionsheet');
@@ -138,9 +130,8 @@ export default createDemo({
       }
     ];
     const switchActionSheet = param => {
-      console.log(param);
       state[`${param}`] = !state[`${param}`];
-      console.log(state[`${param}`], '2');
+      //   console.log(state[`${param}`], '2');
     };
 
     const chooseItem = itemParams => {

src/packages/actionsheet/index.vue

@@ -1,6 +1,11 @@
 <template>
   <view class="nut-actionsheet">
-    <nut-popup v-model:show="state.maskIsVisible" position="bottom" round>
+    <nut-popup
+      v-model:show="state.maskIsVisible"
+      position="bottom"
+      round
+      @click-overlay="closeMask"
+    >
       <view class="nut-actionsheet-panel">
         <view class="nut-actionsheet-custom">
           <slot name="custom"></slot>
@@ -84,6 +89,7 @@ export default create({
   emits: ['click', 'close', 'cancel', 'choose'],
 
   setup(props, { emit }) {
+    console.log(props.isVisible, 'props.isVisible');
     // state
     const state = reactive({
       maskIsVisible: false
@@ -91,13 +97,12 @@ export default create({
 
     // methods
     const isHighlight = item => {
-      console.log(item.color, 'color');
       return item.color;
     };
 
     const closeActionSheet = () => {
       state.maskIsVisible = false;
-      console.log(state.maskIsVisible, 'mask');
+      //   console.log(state.maskIsVisible, 'mask');
       emit('close');
     };
 
@@ -108,20 +113,25 @@ export default create({
 
     const chooseItem = (item, index) => {
       if (!item.disable) {
-        if (props.isClickChooseClose) {
-          closeActionSheet();
-        }
+        closeActionSheet();
         emit('choose', item, index);
       }
     };
-
+    const closeMask = () => {
+      state.maskIsVisible = false;
+    };
     watch(
       () => props.isVisible,
-      val => {
-        if (val) {
-          state.maskIsVisible = true;
-        }
+      () => {
+        console.log(props.isVisible, 'val');
+        state.maskIsVisible = true;
       }
+      // val => {
+      //   console.log(val, 'val');
+      //   if (val) {
+      //     state.maskIsVisible = true;
+      //   }
+      // }
     );
 
     return {
@@ -129,6 +139,7 @@ export default create({
       closeActionSheet,
       cancelActionSheet,
       chooseItem,
+      closeMask,
       state
     };
   }