fix(selector):fix click penetration #157

didi · Jul 23, 2018 · 6453a72 · 6453a72
1 parent 2c08a8c
commit 6453a72
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 13 deletions.
diff --git a/components/selector/demo/cases/demo0.vue b/components/selector/demo/cases/demo0.vue
@@ -53,6 +53,24 @@ export default {
           {
             text: '选项四',
           },
+          {
+            text: '选项五',
+          },
+          {
+            text: '选项六',
+          },
+          {
+            text: '选项七',
+          },
+          {
+            text: '选项八',
+          },
+          {
+            text: '选项九',
+          },
+          {
+            text: '选项十',
+          },
         ],
       ],
       selectorValue: '选项二',

diff --git a/components/selector/index.vue b/components/selector/index.vue
@@ -10,8 +10,6 @@
       v-model="isSelectorShow"
       position="bottom"
       :mask-closable="maskClosable"
-      prevent-scroll
-      :prevent-scroll-exclude="scroller"
       @show="$_onSelectorShow"
       @hide="$_onSelectorHide"
       @maskClick="$_onSelectorCancel"
@@ -23,7 +21,12 @@
         @confirm="$_onSelectorConfirm"
         @cancel="$_onSelectorCancel"
       ></md-popup-title-bar>
-      <div class="md-selector-container" :style="{maxHeight: `${maxHeight}px`}">
+      <md-scroll-view
+        ref="scroll"
+        class="md-selector-container"
+        :scrolling-x="false"
+        :style="{maxHeight: `${maxHeight}px`}"
+      >
         <div class="md-selector-list">
           <md-radio
             ref="radio"
@@ -44,14 +47,15 @@
             </template>
           </md-radio>
         </div>
-      </div>
+      </md-scroll-view>
     </md-popup>
   </div>
 </template>
 
 <script>import Popup from '../popup'
 import PopupTitlebar from '../popup/title-bar'
 import Radio from '../radio'
+import ScrollView from '../scroll-view'
 import {noop} from '../_util'
 
 export default {
@@ -61,6 +65,7 @@ export default {
     [Radio.name]: Radio,
     [Popup.name]: Popup,
     [PopupTitlebar.name]: PopupTitlebar,
+    [ScrollView.name]: ScrollView,
   },
 
   props: {
@@ -120,7 +125,6 @@ export default {
       radioKey: Date.now(),
       activeIndex: -1,
       tmpActiveIndex: -1,
-      scroller: '',
     }
   },
 
@@ -167,12 +171,7 @@ export default {
       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 = ''
-      }
+      this.$refs.scroll.reflowScroller()
     },
 
     // MARK: events handler
@@ -188,7 +187,7 @@ export default {
       this.tmpActiveIndex = this.activeIndex
 
       if (this.tmpActiveIndex !== -1) {
-        this.$refs['radio'].selectByIndex(this.tmpActiveIndex)
+        this.$refs.radio.selectByIndex(this.tmpActiveIndex)
       } else {
         // reset radio
         this.radioKey = Date.now()
@@ -226,7 +225,7 @@ export default {
       background-color color-bg-base
     .md-selector-container
       background color-bg-base
-      overflow auto
+      overflow hidden
   .md-field-item.selected
     color selector-active-color !important
   &.is-check