vant

utils/dist/dropdown-item/index.d.ts

@@ -0,0 +1 @@
+export {};

utils/dist/dropdown-item/index.js

@@ -0,0 +1,104 @@
+import { VantComponent } from '../common/component';
+VantComponent({
+    field: true,
+    relation: {
+        name: 'dropdown-menu',
+        type: 'ancestor',
+        linked(target) {
+            this.parent = target;
+            this.updateDataFromParent();
+        },
+        unlinked() {
+            this.parent = null;
+        }
+    },
+    props: {
+        value: {
+            type: null,
+            observer: 'rerender'
+        },
+        title: {
+            type: String,
+            observer: 'rerender'
+        },
+        disabled: Boolean,
+        titleClass: {
+            type: String,
+            observer: 'rerender'
+        },
+        options: {
+            type: Array,
+            value: [],
+            observer: 'rerender'
+        }
+    },
+    data: {
+        transition: true,
+        showPopup: false,
+        showWrapper: false,
+        displayTitle: ''
+    },
+    methods: {
+        rerender() {
+            wx.nextTick(() => {
+                this.parent && this.parent.updateItemListData();
+            });
+        },
+        updateDataFromParent() {
+            if (this.parent) {
+                const { overlay, duration, activeColor, closeOnClickOverlay, direction } = this.parent.data;
+                this.setData({
+                    overlay,
+                    duration,
+                    activeColor,
+                    closeOnClickOverlay,
+                    direction
+                });
+            }
+        },
+        onClickOverlay() {
+            this.toggle();
+            this.$emit('close');
+        },
+        onOptionTap(event) {
+            const { option } = event.currentTarget.dataset;
+            const { value } = option;
+            const shouldEmitChange = this.data.value !== value;
+            this.setData({ showPopup: false, value });
+            setTimeout(() => {
+                this.setData({ showWrapper: false });
+            }, this.data.duration || 0);
+            this.rerender();
+            if (shouldEmitChange) {
+                this.$emit('change', value);
+            }
+        },
+        toggle(show, options = {}) {
+            const { showPopup, duration } = this.data;
+            if (show == null) {
+                show = !showPopup;
+            }
+            if (show === showPopup) {
+                return;
+            }
+            if (!show) {
+                const time = options.immediate ? 0 : duration;
+                this.setData({ transition: !options.immediate, showPopup: show });
+                setTimeout(() => {
+                    this.setData({ showWrapper: false });
+                }, time);
+                this.rerender();
+                return;
+            }
+            this.parent.getChildWrapperStyle().then((wrapperStyle = '') => {
+                this.setData({
+                    transition: !options.immediate,
+                    showPopup: show,
+                    wrapperStyle,
+                    showWrapper: true
+                });
+                this.rerender();
+            });
+        }
+    }
+});

utils/dist/dropdown-item/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-popup": "../popup/index",
+    "van-cell": "../cell/index",
+    "van-icon": "../icon/index"
+  }
+}

utils/dist/dropdown-item/index.wxml

@@ -0,0 +1,44 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ showWrapper }}"
+  class="{{ utils.bem('dropdown-item', direction) }}"
+  style="{{ wrapperStyle }}"
+>
+  <van-popup
+    show="{{ showPopup }}"
+    custom-style="position: absolute;"
+    overlay-style="position: absolute;"
+    overlay="{{ overlay }}"
+    position="{{ direction === 'down' ? 'top' : 'bottom' }}"
+    duration="{{ transition ? duration : 0 }}"
+    close-on-click-overlay="{{ closeOnClickOverlay }}"
+    bind:close="onClickOverlay"
+  >
+    <van-cell
+      wx:for="{{ options }}"
+      wx:key="{{ item.value }}"
+      data-option="{{ item }}"
+      class="{{ utils.bem('dropdown-item__option', { active: item.value === value } ) }}"
+      clickable
+      icon="{{ item.icon }}"
+      bind:tap="onOptionTap"
+    >
+      <view
+        slot="title"
+        class="van-dropdown-item__title"
+        style="{{ item.value === value  ? 'color:' + activeColor : '' }}"
+      >
+        {{ item.text }}
+      </view>
+      <van-icon
+        wx:if="{{ item.value === value }}"
+        name="success"
+        class="van-dropdown-item__icon"
+        color="{{ activeColor }}"
+      />
+    </van-cell>
+
+    <slot />
+  </van-popup>
+</view>

utils/dist/dropdown-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.van-dropdown-item{position:fixed;right:0;left:0;overflow:hidden}.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:#1989fa;color:var(--dropdown-menu-option-active-color,#1989fa)}.van-dropdown-item--up{top:0}.van-dropdown-item--down{bottom:0}.van-dropdown-item__icon{display:block;line-height:inherit}