| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132 | // Utilsimport { createNamespace, isDef } from '../utils';import { getScroller } from '../utils/dom/scroll'; // Mixinsimport { ParentMixin } from '../mixins/relation';import { ClickOutsideMixin } from '../mixins/click-outside';var _createNamespace = createNamespace('dropdown-menu'),    createComponent = _createNamespace[0],    bem = _createNamespace[1];export default createComponent({  mixins: [ParentMixin('vanDropdownMenu'), ClickOutsideMixin({    event: 'click',    method: 'onClickOutside'  })],  props: {    zIndex: [Number, String],    activeColor: String,    overlay: {      type: Boolean,      default: true    },    duration: {      type: [Number, String],      default: 0.2    },    direction: {      type: String,      default: 'down'    },    closeOnClickOverlay: {      type: Boolean,      default: true    }  },  data: function data() {    return {      offset: 0    };  },  computed: {    scroller: function scroller() {      return getScroller(this.$el);    },    opened: function opened() {      return this.children.some(function (item) {        return item.showWrapper;      });    },    barStyle: function barStyle() {      if (this.opened && isDef(this.zIndex)) {        return {          zIndex: 1 + this.zIndex        };      }    }  },  methods: {    updateOffset: function updateOffset() {      if (!this.$refs.bar) {        return;      }      var rect = this.$refs.bar.getBoundingClientRect();      if (this.direction === 'down') {        this.offset = rect.bottom;      } else {        this.offset = window.innerHeight - rect.top;      }    },    toggleItem: function toggleItem(active) {      this.children.forEach(function (item, index) {        if (index === active) {          item.toggle();        } else if (item.showPopup) {          item.toggle(false, {            immediate: true          });        }      });    },    onClickOutside: function onClickOutside() {      this.children.forEach(function (item) {        item.toggle(false);      });    }  },  render: function render() {    var _this = this;    var h = arguments[0];    var Titles = this.children.map(function (item, index) {      return h("div", {        "attrs": {          "role": "button",          "tabindex": item.disabled ? -1 : 0        },        "class": bem('item', {          disabled: item.disabled        }),        "on": {          "click": function click() {            if (!item.disabled) {              _this.toggleItem(index);            }          }        }      }, [h("span", {        "class": [bem('title', {          active: item.showPopup,          down: item.showPopup === (_this.direction === 'down')        }), item.titleClass],        "style": {          color: item.showPopup ? _this.activeColor : ''        }      }, [h("div", {        "class": "van-ellipsis"      }, [item.slots('title') || item.displayTitle])])]);    });    return h("div", {      "class": bem()    }, [h("div", {      "ref": "bar",      "style": this.barStyle,      "class": bem('bar', {        opened: this.opened      })    }, [Titles]), this.slots('default')]);  }});
 |