WARNING

请在手机模拟器模式查看该功能

dropDownMenu props

属性	描述	类型	默认值
activeColor	开启状态下，被选中选项字体颜色	string	rgb(19, 187, 134)
direction	弹出层的弹出方向，有up和down可选	_ string _	down
overlay	弹出层是否显示遮罩层	boolean	true
overlayClosable	是否可点击遮罩层关闭弹窗	boolean	true
outsideClosable	是否点击外部区域关闭弹窗	boolean	true
zIndex	层级样式	number	10

dropDownMenu-item props

属性	描述	类型	默认值
value	选中的value值，可以通过v-model双向绑定	number｜ string	-
title	菜单标题	string	-
options	选项列表	array	[]
valueKey	options列表选项的value的key值	string	value
labelKey	options列表选项的label的key值	string	label
disabled	是否禁用改选项	boolean	false

dropDownMenu-item slot

名称	描述
default	弹出层内容区域的替换

dropDownMenu-item events

名称	描述	参数
close	关闭时触发	-
open	打开时触发	-
change	点击选项导致 value 变化时触发	value

例子代码

<template>
  <div>
    <div class="items">
      <p class="item_title">点击外部和点击遮罩层不关闭</p>
      <vill-dropdown-menu activeColor="orange" :overlayClosable="false" :outsideClosable="false">
        <vill-dropdown-menu-item v-model="value4" :options="option4"></vill-dropdown-menu-item>
        <vill-dropdown-menu-item disabled v-model="value5" :options="option2" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
      </vill-dropdown-menu>
      <p class="item_change">{{value4}} - {{value5}}</p>
    </div>
    <div class="items">
      <p class="item_title">默认</p>
      <vill-dropdown-menu>
        <vill-dropdown-menu-item v-model="value6" :options="option1" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
        <vill-dropdown-menu-item v-model="value7" :options="option2" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
        <vill-dropdown-menu-item v-model="value8" :options="option3" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
      </vill-dropdown-menu>
      <p class="item_change">{{value6}} - {{value7}} - {{value8}}</p>
    </div>
    <div class="items">
      <p class="item_title">自定义的内容</p>
      <vill-dropdown-menu>
        <vill-dropdown-menu-item v-model="value9" :options="option1" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
        <vill-dropdown-menu-item title="自定义的内容">
          <span class="content">自定义的内容</span>
        </vill-dropdown-menu-item>
      </vill-dropdown-menu>
      <p class="item_change">{{value9}}</p>
    </div>
    <div class="items">
      <p class="item_title">向上展开</p>
      <vill-dropdown-menu direction='up'>
        <vill-dropdown-menu-item v-model="value1" :options="option1" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
        <vill-dropdown-menu-item v-model="value2" :options="option4"></vill-dropdown-menu-item>
        <vill-dropdown-menu-item v-model="value3" :options="option3" valueKey="value" labelKey="text"></vill-dropdown-menu-item>
      </vill-dropdown-menu>
      <p class="item_change">{{value1}} - {{value2}} - {{value3}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      value1: 0,
      value2: 'c',
      value3: 'b',
      value4: 'a',
      value5: 'b',
      value6: 0,
      value7: 'b',
      value8: 'a',
      value9: 1,
      option1: [
        { text: '苹果', value: 0 },
        { text: '栗子', value: 1 },
        { text: '草莓', value: 2 },
      ],
      option2: [
        { text: '牛肉', value: 'a' },
        { text: '腌肉', value: 'b' },
        { text: '猪肉', value: 'c' },
      ],
      option3: [
        { text: '茶', value: 'a' },
        { text: '可乐', value: 'b' },
        { text: '美年达', value: 'c' },
      ],
      option4: [
        { label: '茶1', value: 'a' },
        { label: '可乐1', value: 'b' },
        { label: '美年达1', value: 'c' },
        { label: '茶1', value: 'd' },
        { label: '可乐1', value: 'e' },
        { label: '美年达1', value: 'f' },
        { label: '茶1', value: 'g' },
        { label: '可乐1', value: 'h' },
        { label: '美年达1', value: 'i' },
        { label: '茶1', value: 'j' },
        { label: '可乐1', value: 'k' },
        { label: '美年达1', value: 'l' },
        { label: '茶1', value: 'm' },
        { label: '可乐1', value: 'n' },
        { label: '美年达1', value: 'o' },
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.v_w{
  width: 100px;
  height: 500px;
  border-right: 1px solid #eeeeee;
}
.content{
  height: 60px;
  line-height: 60px;
  text-align: center;
  width: 100%;
  display: block;
}
</style>