index.vue 4.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <uni-shadow-root class="vant-dropdown-item-index"><view v-if="showWrapper" :class="utils.bem('dropdown-item', direction)" :style="wrapperStyle">
  3. <van-popup :show="showPopup" :custom-style="'position: absolute;'+(popupStyle)" overlay-style="position: absolute;" :overlay="overlay" :position="direction === 'down' ? 'top' : 'bottom'" :duration="transition ? duration : 0" :close-on-click-overlay="closeOnClickOverlay" @enter="onOpen" @leave="onClose" @close="toggle" @after-enter="onOpened" @after-leave="onClosed">
  4. <van-cell v-for="(item,index) in (options)" :key="item.value" :data-option="item" :class="utils.bem('dropdown-item__option', { active: item.value === value } )" clickable :icon="item.icon" @click.native="onOptionTap">
  5. <view slot="title" class="van-dropdown-item__title" :style="item.value === value ? 'color:' + activeColor : ''">
  6. {{ item.text }}
  7. </view>
  8. <van-icon v-if="item.value === value" name="success" class="van-dropdown-item__icon" :color="activeColor"></van-icon>
  9. </van-cell>
  10. <slot></slot>
  11. </van-popup>
  12. </view></uni-shadow-root>
  13. </template>
  14. <wxs src="../wxs/utils.wxs" module="utils"></wxs>
  15. <script>
  16. import VanPopup from '../popup/index.vue'
  17. import VanCell from '../cell/index.vue'
  18. import VanIcon from '../icon/index.vue'
  19. global['__wxVueOptions'] = {components:{'van-popup': VanPopup,'van-cell': VanCell,'van-icon': VanIcon}}
  20. global['__wxRoute'] = 'vant/dropdown-item/index'
  21. import { useParent } from '../common/relation';
  22. import { VantComponent } from '../common/component';
  23. VantComponent({
  24. field: true,
  25. relation: useParent('dropdown-menu', function () {
  26. this.updateDataFromParent();
  27. }),
  28. props: {
  29. value: {
  30. type: null,
  31. observer: 'rerender',
  32. },
  33. title: {
  34. type: String,
  35. observer: 'rerender',
  36. },
  37. disabled: Boolean,
  38. titleClass: {
  39. type: String,
  40. observer: 'rerender',
  41. },
  42. options: {
  43. type: Array,
  44. value: [],
  45. observer: 'rerender',
  46. },
  47. popupStyle: String,
  48. },
  49. data: {
  50. transition: true,
  51. showPopup: false,
  52. showWrapper: false,
  53. displayTitle: '',
  54. },
  55. methods: {
  56. rerender() {
  57. wx.nextTick(() => {
  58. var _a;
  59. (_a = this.parent) === null || _a === void 0 ? void 0 : _a.updateItemListData();
  60. });
  61. },
  62. updateDataFromParent() {
  63. if (this.parent) {
  64. const { overlay, duration, activeColor, closeOnClickOverlay, direction, } = this.parent.data;
  65. this.setData({
  66. overlay,
  67. duration,
  68. activeColor,
  69. closeOnClickOverlay,
  70. direction,
  71. });
  72. }
  73. },
  74. onOpen() {
  75. this.$emit('open');
  76. },
  77. onOpened() {
  78. this.$emit('opened');
  79. },
  80. onClose() {
  81. this.$emit('close');
  82. },
  83. onClosed() {
  84. this.$emit('closed');
  85. this.setData({ showWrapper: false });
  86. },
  87. onOptionTap(event) {
  88. const { option } = event.currentTarget.dataset;
  89. const { value } = option;
  90. const shouldEmitChange = this.data.value !== value;
  91. this.setData({ showPopup: false, value });
  92. this.$emit('close');
  93. this.rerender();
  94. if (shouldEmitChange) {
  95. this.$emit('change', value);
  96. }
  97. },
  98. toggle(show, options = {}) {
  99. var _a;
  100. const { showPopup } = this.data;
  101. if (typeof show !== 'boolean') {
  102. show = !showPopup;
  103. }
  104. if (show === showPopup) {
  105. return;
  106. }
  107. this.setData({
  108. transition: !options.immediate,
  109. showPopup: show,
  110. });
  111. if (show) {
  112. (_a = this.parent) === null || _a === void 0 ? void 0 : _a.getChildWrapperStyle().then((wrapperStyle) => {
  113. this.setData({ wrapperStyle, showWrapper: true });
  114. this.rerender();
  115. });
  116. }
  117. else {
  118. this.rerender();
  119. }
  120. },
  121. },
  122. });
  123. export default global['__wxComponents']['vant/dropdown-item/index']
  124. </script>
  125. <style platform="mp-weixin">
  126. @import '../common/index.css';.van-dropdown-item{left:0;overflow:hidden;position:fixed;right:0}.van-dropdown-item__option{text-align:left}.van-dropdown-item__option--active .van-dropdown-item__icon,.van-dropdown-item__option--active .van-dropdown-item__title{color:var(--dropdown-menu-option-active-color,#ee0a24)}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__icon{display:block;line-height:inherit}
  127. </style>