feature(action-sheet & selector):add max-height limit prop #86

didi · May 18, 2018 · 218d67d · 218d67d
1 parent 2320f56
commit 218d67d
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 6 deletions.
diff --git a/components/action-sheet/README.md b/components/action-sheet/README.md
@@ -27,6 +27,7 @@ Vue.component(ActionSheet.name, ActionSheet)
 |default-index|默认选中项| Boolean| `0`|
 |invalid-index|禁用选择项索引 |Number|`-1`|
 |cancel-text|取消按钮文案 |String |-|
+|max-height|面板最高高度, 超出后可滚动|Number|400|单位`px`|
 
 #### ActionSheet Events
 

diff --git a/components/action-sheet/index.vue b/components/action-sheet/index.vue
@@ -4,10 +4,11 @@
       v-model="isActionSheetShow"
       position="bottom"
       prevent-scroll
+      :prevent-scroll-exclude="scroller"
       @show="$_onShow"
       @hide="$_onHide"
     >
-      <div class="md-action-sheet-content">
+      <div class="md-action-sheet-content" :style="{maxHeight: `${maxHeight}px`}">
         <header v-if="title">{{ title }}</header>
         <ul>
           <template v-for="(item, index) in options">
@@ -66,12 +67,17 @@ export default {
       type: String,
       default: '取消',
     },
+    maxHeight: {
+      type: Number,
+      default: 400,
+    },
   },
 
   data() {
     return {
       isActionSheetShow: this.value,
       clickIndex: -1,
+      scroller: '',
     }
   },
 
@@ -86,8 +92,17 @@ export default {
   },
 
   methods: {
+    $_setScroller() {
+      const boxer = this.$el ? this.$el.querySelector('.md-action-sheet-content') : null
+      if (boxer && boxer.clientHeight >= this.maxHeight) {
+        this.scroller = '.md-action-sheet-content'
+      } else {
+        this.scroller = ''
+      }
+    },
     // MARK: events handler, 如 $_onButtonClick
     $_onShow() {
+      this.$_setScroller()
       this.$emit('show')
     },
     $_onHide() {
@@ -115,12 +130,12 @@ export default {
   color color-text-base
   -webkit-font-smoothing antialiased
   .md-action-sheet-content
-    overflow hidden
     position relative
     width 100%
     font-size action-sheet-font-size
     background color-bg-base
     text-align center
+    overflow auto
     header
       vertical-height(action-sheet-height)
       padding 0 30px

diff --git a/components/selector/README.md b/components/selector/README.md
@@ -32,6 +32,7 @@ Vue.component(Selector.name, Selector)
 |mask-closable|点击蒙层是否可关闭弹出层|Boolean|`true`|-|
 |is-check|是否有`check`图标|Boolean|`false`|仅`确认模式`|
 |option-render|返回各选项渲染内容|Function({value, text ,...}):String|-|`vue 2.1.0+`可使用`slot-scope`，参考`Radio`|
+|max-height|选择器内容区域最高高度, 超出后可滚动|Number|400|单位`px`|
 
 
 #### Selector Events

diff --git a/components/selector/index.vue b/components/selector/index.vue
@@ -10,9 +10,10 @@
       v-model="isSelectorShow"
       position="bottom"
       :mask-closable="maskClosable"
-      :prevent-scroll="true"
-      @show="$emit('show')"
-      @hide="$emit('hide')"
+      prevent-scroll
+      :prevent-scroll-exclude="scroller"
+      @show="$_onSelectorShow"
+      @hide="$_onSelectorHide"
       @maskClick="$_onSelectorCancel"
     >
       <md-popup-title-bar
@@ -22,7 +23,7 @@
         @confirm="$_onSelectorConfirm"
         @cancel="$_onSelectorCancel"
       ></md-popup-title-bar>
-      <div class="md-selector-container">
+      <div class="md-selector-container" :style="{maxHeight: `${maxHeight}px`}">
         <div class="md-selector-list">
           <md-radio
             ref="radio"
@@ -106,6 +107,10 @@ export default {
       type: Function,
       default: noop,
     },
+    maxHeight: {
+      type: Number,
+      default: 400,
+    },
   },
 
   data() {
@@ -114,6 +119,7 @@ export default {
       radioKey: Date.now(),
       activeIndex: -1,
       tmpActiveIndex: -1,
+      scroller: '',
     }
   },
 
@@ -159,6 +165,14 @@ export default {
       const invalidIndex = this.invalidIndex
       return Array.isArray(invalidIndex) ? !!~invalidIndex.indexOf(index) : index === invalidIndex
     },
+    $_setScroller() {
+      const boxer = this.$el ? this.$el.querySelector('.md-selector-list') : null
+      if (boxer && boxer.clientHeight >= this.maxHeight) {
+        this.scroller = '.md-selector-container'
+      } else {
+        this.scroller = ''
+      }
+    },
 
     // MARK: events handler
     $_onSelectorConfirm() {
@@ -190,6 +204,15 @@ export default {
 
       this.$emit('choose', item)
     },
+    $_onSelectorShow() {
+      /* istanbul ignore next  */
+      this.$_setScroller()
+      this.$emit('show')
+    },
+    $_onSelectorHide() {
+      /* istanbul ignore next  */
+      this.$emit('hide')
+    },
   },
 }
 </script>
@@ -202,6 +225,7 @@ export default {
       background-color color-bg-base
     .md-selector-container
       background color-bg-base
+      overflow auto
       .md-selector-item
         position relative
         height selector-height