select-dropdown.vue 1.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
  1. <template>
  2. <div
  3. class="el-select-dropdown el-popper"
  4. :class="[{ 'is-multiple': $parent.multiple }, popperClass]"
  5. :style="{ minWidth: minWidth }">
  6. <slot></slot>
  7. </div>
  8. </template>
  9. <script type="text/babel">
  10. import Popper from 'element-ui/src/utils/vue-popper';
  11. export default {
  12. name: 'ElSelectDropdown',
  13. componentName: 'ElSelectDropdown',
  14. mixins: [Popper],
  15. props: {
  16. placement: {
  17. default: 'bottom-start'
  18. },
  19. boundariesPadding: {
  20. default: 0
  21. },
  22. popperOptions: {
  23. default() {
  24. return {
  25. gpuAcceleration: false
  26. };
  27. }
  28. },
  29. visibleArrow: {
  30. default: true
  31. },
  32. appendToBody: {
  33. type: Boolean,
  34. default: true
  35. }
  36. },
  37. data() {
  38. return {
  39. minWidth: ''
  40. };
  41. },
  42. computed: {
  43. popperClass() {
  44. return this.$parent.popperClass;
  45. }
  46. },
  47. watch: {
  48. '$parent.inputWidth'() {
  49. this.minWidth = this.$parent.$el.getBoundingClientRect().width + 'px';
  50. }
  51. },
  52. mounted() {
  53. this.referenceElm = this.$parent.$refs.reference.$el;
  54. this.$parent.popperElm = this.popperElm = this.$el;
  55. this.$on('updatePopper', () => {
  56. if (this.$parent.visible) this.updatePopper();
  57. });
  58. this.$on('destroyPopper', this.destroyPopper);
  59. }
  60. };
  61. </script>