dropdown-menu.vue 1.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364
  1. <template>
  2. <transition name="el-zoom-in-top" @after-leave="doDestroy">
  3. <ul class="el-dropdown-menu el-popper" :class="[size && `el-dropdown-menu--${size}`]" v-show="showPopper">
  4. <slot></slot>
  5. </ul>
  6. </transition>
  7. </template>
  8. <script>
  9. import Popper from 'element-ui/src/utils/vue-popper';
  10. export default {
  11. name: 'ElDropdownMenu',
  12. componentName: 'ElDropdownMenu',
  13. mixins: [Popper],
  14. props: {
  15. visibleArrow: {
  16. type: Boolean,
  17. default: true
  18. },
  19. arrowOffset: {
  20. type: Number,
  21. default: 0
  22. }
  23. },
  24. data() {
  25. return {
  26. size: this.dropdown.dropdownSize
  27. };
  28. },
  29. inject: ['dropdown'],
  30. created() {
  31. this.$on('updatePopper', () => {
  32. if (this.showPopper) this.updatePopper();
  33. });
  34. this.$on('visible', val => {
  35. this.showPopper = val;
  36. });
  37. },
  38. mounted() {
  39. this.dropdown.popperElm = this.popperElm = this.$el;
  40. this.referenceElm = this.dropdown.$el;
  41. // compatible with 2.6 new v-slot syntax
  42. // issue link https://github.com/ElemeFE/element/issues/14345
  43. this.dropdown.initDomOperation();
  44. },
  45. watch: {
  46. 'dropdown.placement': {
  47. immediate: true,
  48. handler(val) {
  49. this.currentPlacement = val;
  50. }
  51. }
  52. }
  53. };
  54. </script>