Merge pull request #10 from wdfe/actionsheet-fix

[fix] replace lib-flexible-rely-on method in actionsheet component
wdfe · Jun 19, 2017 · 583f8da · 583f8da
2 parents d342ab7 + d26001c
commit 583f8da
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 7 deletions.
diff --git a/packages/ActionSheet/src/ActionSheet.vue b/packages/ActionSheet/src/ActionSheet.vue
@@ -2,8 +2,8 @@
   <transition :name="actionsheetTransition" @after-enter="onShow()" @after-leave="onHide()">
     <div :class="{'wd-actionsheet-theme-left': textAlign === 'left','wd-actionsheet-theme-center': textAlign === 'center'}" class="wd-actionsheet" ref="popup" v-if="visible" :style="{'z-index': zIndex}">
       <header v-if="isShowTitle" class="wd-actionsheet-header">{{ title }}</header>
-      <div class="wd-actionsheet-content" :style="`max-height: ${maxDisplay * itemsHeight[dpr]}px;`">
-        <wd-actionsheet-slot @getData="getData" :items="content.items" :type="content.type" :defaultValue="content.defaultValue"></wd-actionsheet-slot>
+      <div class="wd-actionsheet-content" :style="`max-height: ${maxDisplay * itemHeight}px;`">
+        <wd-actionsheet-slot @getItemHeight="setItemHeight" @getData="getData" :items="content.items" :type="content.type" :defaultValue="content.defaultValue"></wd-actionsheet-slot>
       </div>
       <footer class="wd-actionsheet-footer">
         <span @click="onCancel">{{ cancelText }}</span>
@@ -95,8 +95,7 @@
       return {
         visible: false,
         datas: {},
-        itemsHeight: [0, 53, 105, 157],
-        dpr: window.dpr || window.lib.flexible.dpr
+        itemHeight: 0
       }
     },
     computed: {
@@ -119,6 +118,9 @@
       },
       maskClick() {
         this.onMaskClick()
+      },
+      setItemHeight(height) {
+        this.itemHeight = height
       }
     }
   }

diff --git a/packages/ActionSheet/src/ActionSheetSlot.vue b/packages/ActionSheet/src/ActionSheetSlot.vue
@@ -50,7 +50,8 @@ export default {
     return {
       selected: '',
       currentCheck: [],
-      indexList: []
+      indexList: [],
+      itemHeight: 0
     }
   },
   mounted() {
@@ -68,6 +69,7 @@ export default {
         this.$emit('getData', {'_index': list, 'value': this.currentCheck})
       }
     }
+    this.getSize()
   },
   methods: {
     defaultValueValidator() {
@@ -110,6 +112,10 @@ export default {
       }
       this.$emit('getData', {'_index': this.indexList, 'value': this.currentCheck})
     },
+    getSize() {
+      this.itemHeight = this.$el.querySelector('.wd-actionsheet-listitem').offsetHeight
+      this.$emit('getItemHeight', this.itemHeight)
+    },
   }
 }
 </script>

diff --git a/test/unit/ActionSheet.spec.js b/test/unit/ActionSheet.spec.js
@@ -529,10 +529,10 @@ describe('ActionSheet', () => {
       }
     })
     Vue.nextTick(() => {
-      const $listHeight = document.querySelector('.wd-actionsheet-list').offsetHeight
+      const $contentHeight = document.querySelector('.wd-actionsheet-content').offsetHeight
       const $itemHeight = document.querySelector('.wd-actionsheet-listitem').offsetHeight
       expect(vm.maxDisplay).to.equal(5)
-      expect($itemHeight * 5).to.equal($listHeight)
+      expect($itemHeight * 5).to.equal($contentHeight)
       vm.value = false
       setTimeout(() => {
         done()