fix: CR第二期- ActionSheet组件优化

src/packages/actionsheet/actionsheet.scss

@@ -9,6 +9,8 @@
     right: 0;
     bottom: 0;
     width: 100%;
+    max-height: 80%;
+    overflow: auto;
     z-index: $zindex-actionsheet;
     background-color: $body-background;
 }
@@ -50,6 +52,9 @@
 .nut-actionsheet-item-active{
     color: $primary-color;
 }
+.nut-actionsheet-item-disabled{
+    color: #e1e1e1;
+}
 .nut-actionsheet-cancel{
     margin-top: 5px;
     border-top: 1px solid $light-color;

src/packages/actionsheet/actionsheet.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="nut-actionsheet">
-        <transition :name="isAnimation?'nutFade':''">
+        <transition :name="isAnimation?'nutFade':''" v-if="isShowMask">
             <div class="nut-actionsheet-mask"  
                 @click="clickActionSheetMask" 
                 v-show="isVisible"
@@ -10,24 +10,24 @@
             <div class="nut-actionsheet-panel"  
                 v-show="isVisible"
             >
-                <div class="nut-actionsheet-custom"  v-if="$slots.custom">
-                    <slot name="custom" v-html="custom"></slot>
+                <div class="nut-actionsheet-custom"  slot-scope>
+                    <slot name="custom" ></slot>
                 </div>
                 <dl class="nut-actionsheet-modal" v-if="$slots.title || $slots.subTitle ">
-                    <dt class="nut-actionsheet-title"><slot name="title" v-html="title"></slot></dt>
-                    <dd class="nut-actionsheet-sub-title"><slot name="sub-title" v-html="subTitle"></slot></dd>
+                    <dt class="nut-actionsheet-title"><slot name="title" slot-scope></slot></dt>
+                    <dd class="nut-actionsheet-sub-title"><slot name="sub-title" slot-scope></slot></dd>
                 </dl>
                 <ul class="nut-actionsheet-menu" >
                     <li class="nut-actionsheet-item" 
-                        :class="{'nut-actionsheet-item-active': isHighlight(item)}"
+                        :class="{'nut-actionsheet-item-active': isHighlight(item), 'nut-actionsheet-item-disabled': item.disable}"
                         v-for="(item, index) of menuItems"
                         :key="index"
-                        @click="chooseItem(item)"
+                        @click="chooseItem(item, index)"
                     >{{item[optionTag]}}</li>
                 </ul>
                 <div class="nut-actionsheet-cancel" 
                     v-if="cancelTxt"
-                    @click="closeActionSheet" 
+                    @click="cancelActionSheet" 
                 >{{cancelTxt}}</div>
             </div>
         </transition>
@@ -41,10 +41,22 @@ export default {
             type: Boolean,
             default: true
         },
+        isLockBgScroll: {
+            type: Boolean,
+            default: false
+        },
         isVisible: {
             type: Boolean,
             default: false
         },
+        isShowMask: {
+            type: Boolean,
+            default: true
+        },
+        isClickChooseClose: {
+            type: Boolean,
+            default: true
+        },
         isClickCloseMask: {
             type: Boolean,
             default: true
@@ -72,23 +84,40 @@ export default {
     watch: {
         isVisible (value) {
             !!value && this.$emit('open');
+            if (this.isLockBgScroll) {
+                if (value) {
+                    document.body.classList.add('nut-overflow-hidden');
+                } else {
+                    document.body.classList.remove('nut-overflow-hidden');
+                }
+            }
         }
     },
     methods: {
         isHighlight(item) {
             return (this.chooseTagValue && this.chooseTagValue == item[this.optionTag]) || this.chooseTagValue === 0;
         },
+
         closeActionSheet() {
             this.$emit('close');
         },
 
+        cancelActionSheet() {
+            this.closeActionSheet();
+            this.$emit('cancel');
+        },
+
         clickActionSheetMask() {
-            !!this.isClickCloseMask && this.closeActionSheet();
+            this.isClickCloseMask && this.closeActionSheet();
         },
 
-        chooseItem(item) {
-            this.closeActionSheet();
-            this.$emit('choose', item);
+        chooseItem(item, index) {
+            if (!item.disable) {
+                if (this.isClickChooseClose) {
+                    this.closeActionSheet();
+                }
+                this.$emit('choose', item, index);
+            }
         }
     }
 }

src/packages/actionsheet/demo.vue

@@ -7,19 +7,19 @@
                 <div slot="desc" class="selected-option">{{sex}}</div>
             </nut-cell>
             <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible1')">
-                <span slot="title"><label>年龄</label></span>
+                <span slot="title"><label>性别</label></span>
                 <span slot="sub-title">带取消按钮~~~~</span>
-                <div slot="desc" class="selected-option">{{agespec}}</div>
+                <div slot="desc" class="selected-option">{{sex1}}</div>
             </nut-cell>
             <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible2')">
-                <span slot="title"><label>年龄</label></span>
+                <span slot="title"><label>性别</label></span>
                 <span slot="sub-title">高亮选中项~~~~</span>
-                <div slot="desc" class="selected-option">{{age}}</div>
+                <div slot="desc" class="selected-option">{{sex2}}</div>
             </nut-cell>
             <nut-cell :showIcon="true" :isLink="true" @click.native="switchActionSheet('isVisible3')">
-                <span slot="title"><label>星座</label></span>
-                <span slot="sub-title">设置列表项展示使用参数~~~~</span>
-                <div slot="desc" class="selected-option">{{constellation}}</div>
+                <span slot="title"><label>性别</label></span>
+                <span slot="sub-title">设置禁用状态~~~~</span>
+                <div slot="desc" class="selected-option">{{sex3}}</div>
             </nut-cell>
         </div>
         <h4>提示类</h4>
@@ -53,14 +53,13 @@
         <!-- demo(高亮选中）-->
         <nut-actionsheet :is-visible="isVisible2" 
             :menu-items="menuItems2"
-            :chooseTagValue="age"
+            :chooseTagValue="sex2"
             @close="switchActionSheet('isVisible2')"
             @choose="chooseItemAge"
         ></nut-actionsheet>
-        <!-- demo(设置列表项展示使用参数）-->
+        <!-- demo(设置禁用状态)-->
         <nut-actionsheet :is-visible="isVisible3" 
             :menu-items="menuItems3"
-            :optionTag="`title`"
             @close="switchActionSheet('isVisible3')"
             @choose="chooseItemConstellation"
         ></nut-actionsheet>
@@ -80,6 +79,7 @@
         >
             <div slot="custom" class="custom-wrap"><span>自定义</span></div>
         </nut-actionsheet>
+        <div style="height: 400px"></div>
     </div>
 </template>
 
@@ -88,9 +88,7 @@ export default {
     data() {
         return {
             sex: '请选择',
-            agespec: '请选择',
             isVisible: false,
-            isVisible1: false,
             menuItems: [
                 {
                     'name': '男',
@@ -101,44 +99,32 @@ export default {
                     'value': 1
                 }
             ],
-            age: '请选择',
+            sex1: '请选择',
+            isVisible1: false,
+            sex2: '请选择',
             isVisible2: false,
             menuItems2: [
                 {
-                    'name': '20岁以下',
+                    'name': '男',
                     'value': 0
                 },
                 {
-                    'name': '20~40岁',
+                    'name': '女',
                     'value': 1
-                },
-                {
-                    'name': '40~60岁',
-                    'value': 2
-                },
-                {
-                    'name': '60以上',
-                    'value': 3
                 }
             ],
-            constellation: '请选择',
+            sex3: '请选择',
             isVisible3: false,
             menuItems3: [
                 {
-                    'title': '天蝎座',
-                    'value': 0
-                },
-                {
-                    'title': '巨蟹座',
-                    'value': 1
-                },
-                {
-                    'title': '双鱼座',
-                    'value': 2
+                    'name': '男',
+                    'value': 0,
+                    'disable': false
                 },
                 {
-                    'title': '水瓶座',
-                    'value': 3
+                    'name': '女',
+                    'value': 1,
+                    'disable': true
                 }
             ],
             isVisible4: false,
@@ -160,15 +146,15 @@ export default {
         },
 
         chooseItemAgeSpec(itemParams) {
-            this.agespec = itemParams.name;
+            this.sex1 = itemParams.name;
         },
 
         chooseItemAge(itemParams) {
-            this.age = itemParams.name;
+            this.sex2 = itemParams.name;
         },
 
         chooseItemConstellation(itemParams) {
-            this.constellation = itemParams.title;
+            this.sex3 = itemParams.title;
         }
     }
 };

src/packages/actionsheet/doc.md

@@ -2,74 +2,26 @@
 
 从底部弹出的动作菜单面板。
 
-## 基本用法
+## 基本用法(选择类)
+
+默认
 ```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
 <nut-actionsheet :is-visible="isVisible" 
-    @close="switchActionSheet('isVisible')"
+    @close="switchActionSheet"
     :menu-items="menuItems"
     @choose="chooseItem"
 ></nut-actionsheet>
 ```
-## 带取消按钮
-```html
-<nut-actionsheet :is-visible="isVisible1" 
-    @close="switchActionSheet('isVisible1')"
-    cancelTxt="取消"
-    :menu-items="menuItems2"
-    @choose="chooseItemAgeSpec"
-></nut-actionsheet>
-```
-## 高亮已选项
-```html
-<nut-actionsheet :is-visible="isVisible2" 
-    :menu-items="menuItems2"
-    :chooseTagValue="age"
-    @close="switchActionSheet('isVisible2')"
-    @choose="chooseItemAge"
-></nut-actionsheet>
-```
-## 设置列表项展示使用参数
-```html
-<nut-actionsheet :is-visible="isVisible3" 
-    :menu-items="menuItems3"
-    :optionTag="`title`"
-    @close="switchActionSheet('isVisible3')"
-    @choose="chooseItemConstellation"
-></nut-actionsheet>
-```
-## 提示
-```html
-<nut-actionsheet :is-visible="isVisible4" 
-    :menu-items="menuItems4" 
-    chooseTagValue="确定"
-    cancelTxt="取消"
-    @close="switchActionSheet('isVisible4')"
->
-    <span slot="title"><label>确定删除吗？</label></span>
-    <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
-</nut-actionsheet>
-```
-## 自定义内容
-```html
-<nut-actionsheet :is-visible="isVisible5" 
-    @close="switchActionSheet('isVisible5')"
->
-    <div slot="custom" class="custom-wrap"><span>自定义</span></div>
-</nut-actionsheet>
-```
 ```javascript
-import nutactionsheet from "./actionsheet.vue";
-import "./actionsheet.scss";
 export default {
-    components: {
-        [nutactionsheet.name]: nutactionsheet
-    },
     data() {
         return {
             sex: '请选择',
-            agespec: '请选择',
             isVisible: false,
-            isVisible1: false,
             menuItems: [
                 {
                     'name': '男',
@@ -79,75 +31,218 @@ export default {
                     'name': '女',
                     'value': 1
                 }
-            ],
-            age: '请选择',
-            isVisible2: false,
-            menuItems2: [
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
+        },
+
+        chooseItem(itemParams) {
+            this.sex = itemParams.name;
+        }
+    }
+};
+```
+
+带取消按钮
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
+ <nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+    :menu-items="menuItems"
+    @choose="chooseItem"
+    cancelTxt="取消"
+></nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
                 {
-                    'name': '20岁以下',
+                    'name': '男',
                     'value': 0
                 },
                 {
-                    'name': '20~40岁',
+                    'name': '女',
                     'value': 1
-                },
-                {
-                    'name': '40~60岁',
-                    'value': 2
-                },
-                {
-                    'name': '60以上',
-                    'value': 3
                 }
-            ],
-            constellation: '请选择',
-            isVisible3: false,
-            menuItems3: [
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
+        },
+
+        chooseItem(itemParams) {
+            this.sex = itemParams.name;
+        }
+    }
+};
+```
+
+高亮已选项
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+    :menu-items="menuItems"
+    @choose="chooseItem"
+    :chooseTagValue="sex"
+></nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
                 {
-                    'title': '天蝎座',
+                    'name': '男',
                     'value': 0
                 },
                 {
-                    'title': '巨蟹座',
+                    'name': '女',
                     'value': 1
-                },
+                }
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
+        },
+
+        chooseItem(itemParams) {
+            this.sex = itemParams.name;
+        }
+    }
+};
+```
+
+设置禁用状态
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>性别</label></span>
+    <span class="selected-option">{{sex}}</span>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    @close="switchActionSheet"
+    :menu-items="menuItems"
+    @choose="chooseItem"
+    :chooseTagValue="sex"
+></nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
                 {
-                    'title': '双鱼座',
-                    'value': 2
+                    'name': '男',
+                    'value': 0,
+                    'disable': false
                 },
                 {
-                    'title': '水瓶座',
-                    'value': 3
+                    'name': '女',
+                    'value': 1,
+                    'disable': true
                 }
-            ],
-            isVisible4: false,
-            menuItems4: [
-                {
-                    'name': '确定'
-                } 
-            ],
-            isVisible5: false,
+            ]
         };
     },
     methods: {
-        switchActionSheet(param) {
-            this[`${param}`] = !this[`${param}`];
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
         },
 
         chooseItem(itemParams) {
             this.sex = itemParams.name;
-        },
+        }
+    }
+};
+```
 
-        chooseItemAgeSpec(itemParams) {
-            this.agespec = itemParams.name;
+## 提示
+```html
+<div @click.native="switchActionSheet">
+    <span class="title"><label>我就列表测试数据</label></span>
+    <span class="sub-title">我是描述~~~~</span>
+    <div class="selected-option">删除本条</div>
+</div>
+<nut-actionsheet :is-visible="isVisible" 
+    :menu-items="menuItems4" 
+    chooseTagValue="确定"
+    cancelTxt="取消"
+    @close="switchActionSheet"
+    @choos="choose"
+>
+    <span slot="title"><label>确定删除吗？</label></span>
+    <span slot="sub-title">删除之后不能，描述信息，删除之后不能，描述信息</span>
+</nut-actionsheet>
+```
+```javascript
+export default {
+    data() {
+        return {
+            sex: '请选择',
+            isVisible: false,
+            menuItems: [
+                {
+                     'name': '确定'
+                }
+            ]
+        };
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
         },
 
-        chooseItemAge(itemParams) {
-            this.age = itemParams.name;
-        },
+        choose(itemParams) {
+            
+        }
+    }
+};
+```
+
+## 自定义内容
+```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
 
-        chooseItemConstellation(itemParams) {
-            this.constellation = itemParams.title;
+export default {
+    data() {
+        return {
+            isVisible: false
+        }   
+    },
+    methods: {
+        switchActionSheet() {
+            this.isVisible = !this.isVisible;
         }
     }
 };
@@ -157,16 +252,29 @@ export default {
 
 | 字段 | 说明 | 类型 | 默认值
 |----- | ----- | ----- | ----- 
-| isVisible | 是否可见 | Boolean | false
-| isClickCloseMask | 是否点击mask蒙层关闭 | Boolean | true
-| cancelTxt | 取消文案 | String | 取消
-| chooseTagValue | 已选值，如果填写，高亮显示 | String | 空
-| menuItems | 列表项 | Array | []
-| optionTag | 设置列表项展示使用参数 | String | name
+| is-animation | 是否开启动画 | Boolean | true
+| is-lock-bg-scroll | 是否锁定背景滚动 | Boolean | false
+| is-visible | 是否可见 | Boolean | false
+| is-show-mask | 是否显示背景遮罩 | Boolean | true
+| is-click-choose-close | 是否点击列表项后立即关闭 | Boolean | true
+| is-click-close-mask | 是否点击mask蒙层关闭 | Boolean | true
+| cancel-txt | 取消文案 | String | 取消
+| choose-tag-value | 已选值，如果填写，高亮显示 | String | 空
+| menu-items | 列表项 | Array | []
+| option-tag | 设置列表项展示使用参数 | String | name
+
+## Slot
+
+| 名称 | 说明 
+|----- | ----- 
+| custom | 自定义内容
+| title | 自定义标题
+| subTitle | 自定义副标题  
 
 ## Event
 
 | 字段 | 说明 | 回调参数 
 |----- | ----- | ----- 
 | choose | 选择之后触发 | 选中列表项 
-| close | 关闭时触发 | 无 
+| close | 关闭时触发 | 无 
+| cancel | 点击取消文案时触发 | 无