import Vue from 'vue';
import { DropdownMenu, DropdownItem } from 'vant';

Vue.use(DropdownMenu).use(DropdownItem);

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

export default {
  data() {
    return {
      value1: 0,
      value2: 'a',
      option1: [
        { text: 'Option1', value: 0 },
        { text: 'Option2', value: 1 },
        { text: 'Option3', value: 2 }
      ],
      option2: [
        { text: 'Option A', value: 'a' },
        { text: 'Option B', value: 'b' },
        { text: 'Option C', value: 'c' },
      ]
    }
  }
};

<van-dropdown-menu>
  <van-dropdown-item v-model="value" :options="option" />
  <van-dropdown-item title="Title" ref="item">
    <van-switch-cell v-model="switch1" title="Title" />
    <van-switch-cell v-model="switch2" title="Title" />
    <van-button block type="info" @click="onConfirm">Confirm</van-button>
  </van-dropdown-item>
</van-dropdown-menu>

export default {
  data() {
    return {
      value: 0,
      switch1: false,
      switch2: false,
      option: [
        { text: 'Option1', value: 0 },
        { text: 'Option2', value: 1 },
        { text: 'Option3', value: 2 }
      ]
    }
  },

  methods: {
    onConfirm() {
      this.$refs.item.toggle();
    }
  }
};

<van-dropdown-menu direction="up">
  <van-dropdown-item v-model="value1" :options="option1" />
  <van-dropdown-item v-model="value2" :options="option2" />
</van-dropdown-menu>

<van-dropdown-menu>
  <van-dropdown-item v-model="value1" disabled :options="option1" />
  <van-dropdown-item v-model="value2" disabled :options="option2" />
</van-dropdown-menu>

| Attribute | Description | Type | Default | |------|------|------|------|------| | active-color | Active color of title and option | string | #1989fa | | z-index | z-index of menu item | number | 10 | | duration | Transition duration, unit second | number | 0.2 | | direction | Expand direction, can be set to up | string | down | | overlay | Whether to show overlay | boolean | true | | close-on-click-overlay | Whether to close when click overlay | boolean | true | | close-on-click-outside | Whether to close when click outside | boolean | true |

| Attribute | Description | Type | Default | |------|------|------|------|------| | value | Value of current option，can use v-model | string | number | - | | title | Item title | string | Text of selected option | | options | Options | Option[] | [] | | disabled | Whether to disable dropdown item | boolean | false | | title-class | Title class | string | - |

Use ref to get DropdownItem instance and call instance methods