Merge pull request #362 from QingWei-Li/fix/dropdown-menu

DropdownMenu: fix popper, fixed #342, #194

CHANGELOG.md

@@ -5,6 +5,10 @@
 *2016-XX-XX*
 
 - Upload 新增 Data 属性支持额外数据的传输
+- DatePicker 修复 `$t` 报错
+- Popper 重构 vue-popper
+- Pagination 修复输入后再点击切换，输入框的值不更新
+- Step: 修复自定义 icon 的样式
 
 ### 1.0.0-rc.6
 

packages/dropdown/src/dropdown-menu.vue

@@ -1,39 +1,35 @@
 <template>
-  <ul class="el-dropdown__menu">
+  <transition name="md-fade-bottom" @after-leave="doDestroy">
+  <ul class="el-dropdown__menu" v-show="showPopper">
     <slot></slot>
   </ul>
+  </transition>
 </template>
 <script>
-  import Popper from 'main/utils/popper';
+  import Popper from 'main/utils/vue-popper';
 
   export default {
     name: 'ElDropdownMenu',
 
-    props: {
-      visible: Boolean
-    },
-    data() {
-      return {
-        popper: null
-      };
-    },
-    computed: {
-      menuAlign() {
-        return this.$parent.menuAlign;
-      }
-    },
-    mounted() {
-      document.body.appendChild(this.$el);
+    componentName: 'ElDropdownMenu',
 
-      this.$nextTick(() => {
-        this.popper = new Popper(this.$parent.$el, this.$el, { gpuAcceleration: false, placement: `bottom-${this.menuAlign}` });
+    mixins: [Popper],
+
+    created() {
+      this.$on('visible', val => {
+        this.showPopper = val;
       });
     },
 
-    destroyed() {
-      setTimeout(() => {
-        this.popper.destroy();
-      }, 300);
+    mounted() {
+      this.popperElm = this.$el;
+      this.referenceElm = this.$parent.$el;
+    },
+
+    computed: {
+      placement() {
+        return `bottom-${this.$parent.menuAlign}`;
+      }
     }
   };
 </script>

packages/dropdown/src/dropdown.vue

@@ -1,9 +1,12 @@
 <script>
   import Clickoutside from 'main/utils/clickoutside';
+  import emitter from 'main/mixins/emitter';
 
   export default {
     name: 'ElDropdown',
 
+    mixins: [emitter],
+
     directives: { Clickoutside },
 
     props: {
@@ -32,6 +35,12 @@
       this.initEvent();
     },
 
+    watch: {
+      visible(val) {
+        this.broadcast('ElDropdownMenu', 'visible', val);
+      }
+    },
+
     methods: {
       show() {
         clearTimeout(this.timeout);
@@ -74,8 +83,7 @@
     },
 
     render(h) {
-      let { hide, splitButton, visible, type } = this;
-      let dropdownElm = visible ? this.$slots.dropdown : null;
+      let { hide, splitButton, type } = this;
 
       var handleClick = _ => {
         this.$emit('click');
@@ -95,9 +103,7 @@
       return (
         <div class="el-dropdown" v-clickoutside={hide}>
           {triggerElm}
-          <transition name="md-fade-bottom">
-            {dropdownElm}
-          </transition>
+          {this.$slots.dropdown}
         </div>
       );
     }

packages/popover/src/main.vue

@@ -46,13 +46,6 @@ export default {
     transition: {
       type: String,
       default: 'fade-in-linear'
-    },
-    options: {
-      default() {
-        return {
-          gpuAcceleration: false
-        };
-      }
     }
   },
 

packages/theme-default/src/index.css

@@ -9,6 +9,7 @@
 @import "./radio.css";
 @import "./switch.css";
 @import "./dropdown.css";
+@import "./dropdown-menu.css";
 @import "./loading.css";
 @import "./dialog.css";
 @import "./table.css";

src/utils/vue-popper.js

@@ -34,7 +34,9 @@ export default {
     options: {
       type: Object,
       default() {
-        return {};
+        return {
+          gpuAcceleration: false
+        };
       }
     }
   },