refactor: actionsheet优化

src/packages/actionsheet/demo.vue

@@ -27,12 +27,7 @@
       <span><label>选项状态</label></span>
       <!-- <div class="selected-option">打开</div> -->
     </nut-cell>
-    <h2>自定义面板</h2>
 
-    <nut-cell :isLink="true" @click="switchActionSheet('isVisible5')">
-      <span><label>自定义内容</label></span>
-      <!-- <div class="selected-option">打开</div> -->
-    </nut-cell>
     <!-- demo 基础用法 -->
     <nut-actionsheet
       :is-visible="state.isVisible1"
@@ -42,7 +37,7 @@
     <!-- demo(带取消按钮） -->
     <nut-actionsheet
       :is-visible="state.isVisible2"
-      cancelTxt="取消"
+      cancel-txt="取消"
       :menu-items="menuItemsOne"
       @choose="chooseItemTwo"
     ></nut-actionsheet>
@@ -52,19 +47,16 @@
       :description="state.desc"
       :menu-items="menuItemsTwo"
       @choose="chooseItemThree"
-      cancelTxt="取消"
+      cancel-txt="取消"
     >
     </nut-actionsheet>
     <!-- demo 选项状态-->
     <nut-actionsheet
       :is-visible="state.isVisible4"
-      cancelTxt="取消"
+      cancel-txt="取消"
       :menu-items="menuItemsThree"
+      :choose-tag-value="state.chooseTagValue"
     ></nut-actionsheet>
-    <!-- demo 自定义 -->
-    <nut-actionsheet :is-visible="state.isVisible5" title="标题">
-      <div class="myContent">内容</div>
-    </nut-actionsheet>
   </div>
 </template>
 
@@ -72,6 +64,11 @@
 import { reactive } from 'vue';
 import { createComponent } from '@/utils/create';
 const { createDemo } = createComponent('actionsheet');
+interface Item {
+  name: string;
+  subname?: string;
+  disable?: boolean;
+}
 export default createDemo({
   props: {},
   setup() {
@@ -84,63 +81,57 @@ export default createDemo({
       val1: '',
       val2: '',
       val3: '',
-      desc: '这是一段描述信息'
+      val4: '',
+      desc: '这是一段描述信息',
+      chooseTagValue: '着色选项'
     });
-    const menuItemsOne = [
+    const menuItemsOne: Item[] = [
       {
-        name: '选项一',
-        value: 0
+        name: '选项一222'
       },
       {
-        name: '选项二',
-        value: 1
+        name: '选项二'
       },
       {
-        name: '选项三',
-        value: 2
+        name: '选项三'
       }
     ];
-    const menuItemsTwo = [
+    const menuItemsTwo: Item[] = [
       {
-        name: '选项一',
-        value: 0
+        name: '选项一'
       },
       {
-        name: '选项二',
-        value: 1
+        name: '选项二'
       },
       {
         name: '选项三',
-        subname: '描述信息',
-        value: 2
+        subname: '描述信息'
       }
     ];
-    const menuItemsThree = [
+    const menuItemsThree: Item[] = [
       {
-        name: '着色选项',
-        color: '#ee0a24',
-        value: 0
+        name: '着色选项'
       },
       {
         name: '禁用选项',
-        disable: true,
-        value: 1
+        disable: true
       }
     ];
-    const switchActionSheet = param => {
+    const switchActionSheet = (
+      param: 'isVisible1' | 'isVisible2' | 'isVisible3' | 'isVisible4'
+    ) => {
       state[param] = !state[param];
-      //   console.log(state[`${param}`], '2');
     };
 
-    const chooseItem = itemParams => {
+    const chooseItem = (itemParams: any) => {
       console.log(itemParams, 'itemParams');
       state.val1 = itemParams.name;
     };
 
-    function chooseItemTwo(itemParams) {
+    function chooseItemTwo(itemParams: Item) {
       state.val2 = itemParams.name;
     }
-    function chooseItemThree(itemParams) {
+    function chooseItemThree(itemParams: Item) {
       state.val3 = itemParams.name;
     }
 

src/packages/actionsheet/doc.md

@@ -27,7 +27,7 @@
     @close="switchActionSheet"
     :menu-items="menuItems"
     @choose="chooseItem"
-    cancelTxt="取消"
+    cancel-txt="取消"
 ></nut-actionsheet>
 ```
 ## 展示描述信息
@@ -41,7 +41,7 @@
     description="state.desc"
     :menu-items="menuItems"
     @choose="chooseItem"
-    cancelTxt="取消"
+    cancel-txt="取消"
 ></nut-actionsheet>
 ```
 
@@ -54,26 +54,11 @@
 <nut-actionsheet
 @close="switchActionSheet"
         :is-visible="state.isVisible4"
-        cancelTxt="取消"
+        cancel-txt="取消"
         :menu-items="menuItemsThree"
       ></nut-actionsheet>
 ```
-```javascript
-
-```
 
-## 自定义内容
-```html
-<div @click.native="switchActionSheet">
-    <span class="title"><label>内容自定义</label></span>
-    <div class="selected-option">打开</div>
-</div>
-<nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet"
->
-    <div slot="custom" class="custom-wrap"><span>自定义</span></div>
-</nut-actionsheet>
-```
 ```javascript
 setup() {
     const state = reactive({
@@ -95,18 +80,6 @@ setup() {
         value: 2
       }
     ];
-    const menuItemsStatus = [
-      {
-        name: '着色选项',
-        color: '#ee0a24',
-        value: 0
-      },
-      {
-        name: '禁用选项',
-        disable: true,
-        value: 1
-      }
-    ];
      const switchActionSheet = () => {
        state.isVisible = !state.isVisible
     };
@@ -121,22 +94,20 @@ setup() {
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
 | cancel-txt | 取消文案 | String | '取消'
-| choose-tag-value | 已选值，如果填写，高亮显示 | String | -
 | menu-items | 列表项 | Array | [ ]
 | option-tag | 设置列表项展示使用参数 | String | 'name'
+| is-visible | 遮罩层可见 | Boolean | false
+| option-sub-tag | 设置列表项描述展示使用参数 | String | 'subname'
+| choose-tag-value | 设置选中项的值，和'option-tag'的值对应 | String | ''
+| title | 设置列表项标题 | String | ''
+| description | 设置列表项副标题/描述 | String | ''
+| color | 高亮颜色 | String | '#ee0a24'
+| close-abled | 遮罩层是否可关闭 | Boolean | true
 
-## Slot
-
-| 名称 | 说明 
-|----- | ----- 
-| custom | 自定义内容
-| title | 自定义标题
-| subTitle | 自定义副标题  
 
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
-| choose | 选择之后触发 | 选中列表项 
-| close | 关闭时触发 | 无 
-| cancel | 点击取消文案时触发 | 无 
+| choose | 选择之后触发 | 选中列表项item, 选中的索引值index 
+| cancel | 点击取消文案时触发 | 无

src/packages/actionsheet/index.scss

@@ -55,12 +55,8 @@
     cursor: pointer;
   }
 
-  .nut-actionsheet-item-active {
-    color: $primary-color;
-  }
-
   .nut-actionsheet-item-disabled {
-    color: #e1e1e1;
+    color: #e1e1e1 !important;
     cursor: not-allowed;
   }
 

src/packages/actionsheet/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="nut-actionsheet">
+  <view :class="classes">
     <nut-popup
       v-model:show="state.maskIsVisible"
       position="bottom"
@@ -8,13 +8,14 @@
       @click-overlay="closeMask"
     >
       <view class="nut-actionsheet-panel">
-        <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
-        <slot></slot>
-        <view class="nut-actionsheet-menu">
-          <view class="nut-actionsheet-item desc" v-if="description">{{
-            description
-          }}</view>
-          <view
+        <view-block v-if="title" class="nut-actionsheet-title">{{
+          title
+        }}</view-block>
+        <view-block class="nut-actionsheet-item desc" v-if="description">{{
+          description
+        }}</view-block>
+        <view class="nut-actionsheet-menu" v-if="menuItems.length">
+          <view-block
             v-for="(item, index) of menuItems"
             class="nut-actionsheet-item"
             :class="{ 'nut-actionsheet-item-disabled': item.disable }"
@@ -22,34 +23,31 @@
             :key="index"
             @click="chooseItem(item, index)"
             >{{ item[optionTag]
-            }}<view class="subdesc">{{ item[subname] }}</view></view
-          >
+            }}<view class="subdesc">{{ item[optionSubTag] }}</view>
+          </view-block>
         </view>
-        <view
+        <view-block
           class="nut-actionsheet-cancel"
           v-if="cancelTxt"
           @click="cancelActionSheet"
         >
           {{ cancelTxt }}
-        </view>
+        </view-block>
       </view>
     </nut-popup>
   </view>
 </template>
 <script>
 import { createComponent } from '@/utils/create';
-import { watch, reactive } from 'vue';
-const { create } = createComponent('actionsheet');
+import { watch, reactive, computed } from 'vue';
+const { componentName, create } = createComponent('actionsheet');
+
 export default create({
   props: {
     isVisible: {
       type: Boolean,
       default: false
     },
-    isClickChooseClose: {
-      type: Boolean,
-      default: true
-    },
     cancelTxt: {
       type: String,
       default: ''
@@ -58,6 +56,10 @@ export default create({
       type: String,
       default: 'name'
     },
+    optionSubTag: {
+      type: String,
+      default: 'subname'
+    },
     chooseTagValue: {
       type: String,
       default: ''
@@ -66,6 +68,10 @@ export default create({
       type: String,
       default: ''
     },
+    color: {
+      type: String,
+      default: '#ee0a24'
+    },
     closeAbled: {
       type: Boolean,
       default: false
@@ -74,38 +80,39 @@ export default create({
       type: String,
       default: ''
     },
-    subname: {
-      type: String,
-      default: ''
-    },
     menuItems: {
       type: Array,
       default: () => []
     }
   },
-  emits: ['click', 'close', 'cancel', 'choose'],
-
-  setup(props, { slots, emit }) {
-    console.log(slots.default?.());
+  emits: ['cancel', 'choose'],
 
-    // state
+  setup(props, { emit }) {
+    console.log(props);
     const state = reactive({
-      maskIsVisible: false,
-      descf: slots.default
+      maskIsVisible: false
+    });
+
+    const classes = computed(() => {
+      const prefixCls = componentName;
+      return {
+        [prefixCls]: true
+      };
     });
 
-    // methods
     const isHighlight = item => {
-      return item.color;
+      return props.chooseTagValue &&
+        props.chooseTagValue === item[props.optionTag]
+        ? props.color
+        : '#1a1a1a';
     };
     const closeActionSheet = () => {
       state.maskIsVisible = false;
-      // emit('close');
     };
 
     const cancelActionSheet = () => {
       closeActionSheet();
-      // emit('cancel');
+      emit('cancel');
     };
 
     const chooseItem = (item, index) => {
@@ -114,9 +121,11 @@ export default create({
         emit('choose', item, index);
       }
     };
+
     const closeMask = () => {
       state.maskIsVisible = false;
     };
+
     watch(
       () => props.isVisible,
       () => {
@@ -129,7 +138,8 @@ export default create({
       cancelActionSheet,
       chooseItem,
       closeMask,
-      state
+      state,
+      classes
     };
   }
 });

src/packages/drag/index.vue

@@ -11,7 +11,14 @@
 </template>
 
 <script lang="ts">
-import { onMounted, reactive, ref, computed } from 'vue';
+import {
+  onMounted,
+  onDeactivated,
+  onActivated,
+  reactive,
+  ref,
+  computed
+} from 'vue';
 import { createComponent } from '@/utils/create';
 import requestAniFrame from '@/utils/raf';
 const { componentName, create } = createComponent('drag');
@@ -40,6 +47,7 @@ export default create({
   setup(props, { emit }) {
     const myDrag = ref();
     const state = reactive({
+      keepAlive: false,
       elWidth: 0,
       elHeight: 0,
       screenWidth: 0,
@@ -181,6 +189,17 @@ export default create({
       getInfo();
       state.boundary = props.boundary;
     });
+    onActivated(() => {
+      if (state.keepAlive) {
+        state.keepAlive = false;
+      }
+    });
+    onDeactivated(() => {
+      state.keepAlive = true;
+      (myDrag as any).removeEventListener('touchstart', touchStart);
+      (myDrag as any).removeEventListener('touchmove', touchMove);
+      (myDrag as any).removeEventListener('touchend', touchEnd);
+    });
     return {
       classes,
       myDrag,