feat: actionSheet 增加和popup组合功能

src/packages/actionsheet/actionsheet.vue

@@ -1,6 +1,13 @@
 <template>
   <div class="nut-actionsheet">
-    <nut-popup v-model="isVisiblePopup" position="bottom" round @close="closeActionSheet" :close-on-click-overlay="isClickCloseMask">
+    <nut-popup
+      id="combinationActionsheet"
+      v-model="isVisiblePopup"
+      position="bottom"
+      round
+      @close="closeActionSheet"
+      :close-on-click-overlay="isClickCloseMask"
+    >
       <div class="nut-actionsheet-panel">
         <dl class="nut-actionsheet-modal" v-if="$slots.title || $slots.desc">
           <dt class="nut-actionsheet-title">

src/packages/actionsheet/demo.vue

@@ -3,8 +3,8 @@
     <h4>基础样式</h4>
     <div>
       <nut-cell :show-icon="true" title="基础样式" :desc="option" @click.native="openSwitch('isVisible')"> </nut-cell>
-      <nut-actionsheet :is-visible="isVisible" @close="closeSwitch('isVisible')" :option-list="optionList" @choose="choose"></nut-actionsheet>
 
+      <nut-actionsheet :is-visible="isVisible" @close="closeSwitch('isVisible')" :option-list="optionList" @choose="choose"></nut-actionsheet>
       <nut-cell :show-icon="true" title="带取消按钮" :desc="option1" @click.native="openSwitch('isVisible1')"> </nut-cell>
       <nut-actionsheet
         :is-visible="isVisible1"
@@ -42,6 +42,12 @@
         @choose="choose6"
       ></nut-actionsheet>
       <nut-cell :show-icon="true" title="高亮选中项" :desc="option6" @click.native="openSwitch('isVisible6')"> </nut-cell>
+
+      <nut-cell :show-icon="true" title="和popup组合使用" :desc="option7" @click.native="openSwitch('isVisible7')"> </nut-cell>
+      <nut-actionsheet :is-visible="isVisible7" @close="closeSwitch('isVisible7')" :option-list="optionList" @choose="choose7"></nut-actionsheet>
+      <nut-popup id="combinationActionsheet" v-model="isVisible7">
+        <img src="https://m.360buyimg.com/babel/s202x202_jfs/t1/125451/13/9108/20190/5f2fbe70E8d551f81/8a5d3b1215ae05bc.png" />
+      </nut-popup>
     </div>
   </div>
 </template>
@@ -93,6 +99,7 @@ export default {
           value: 1,
         },
       ],
+      isVisible7: false,
     };
   },
   methods: {
@@ -133,6 +140,10 @@ export default {
     choose6(itemParams) {
       this.option6 = itemParams.name;
     },
+
+    choose7(itemParams) {
+      this.option7 = itemParams.name;
+    },
   },
 };
 </script>

src/packages/actionsheet/doc.md

@@ -393,6 +393,64 @@ export default {
 };
 ```
 
+和popup组合使用
+```html
+<nut-cell 
+    :show-icon="true" 
+    title="和popup组合使用" 
+    :desc="option" 
+    @click.native="openSwitch('isVisible')">
+</nut-cell>
+<nut-popup id="combinationActionsheet" v-model="isVisible">
+    <img src="https://m.360buyimg.com/babel/s202x202_jfs/t1/125451/13/9108/20190/5f2fbe70E8d551f81/8a5d3b1215ae05bc.png">
+</nut-popup>
+<nut-actionsheet 
+    :is-visible="isVisible"
+    @close="closeSwitch('isVisible')" 
+    :option-list="optionList" 
+    @choose="choose"
+>
+</nut-actionsheet>
+```
+```javascript
+export default {
+  data() {
+    return {
+      option: '',
+      isVisible: false,
+      optionList: [
+        {
+          name: '选项A',
+          value: 0
+        },
+        {
+          name: '选项B',
+          value: 1,
+          disable: true
+        },
+        {
+          name: '选项C',
+          value: 1
+        }
+      ]
+    };
+  },
+  methods: {
+    openSwitch(param) {
+      this[`${param}`] = true;
+    },
+
+    closeSwitch(param) {
+      this[`${param}`] = false;
+    },
+
+    choose(itemParams) {
+      this.option = itemParams.name;
+    }
+  }
+};
+```
+
 
 
 ## Prop