DropMenu 下拉菜单 - 《Mand Mobile v2.x 组件文档》

引入
代码演示
- 基础下拉菜单
- 禁用下拉菜单
- 初始下拉菜单
- 自定义菜单项
API
- DropMenu Props
- DropMenu Methods
  - getSelectedValue(index): listItem
  - getSelectedValues(): listItems
- DropMenu Events
  - @change(barItem, listItem)
  - @show()
  - @hide()

DropMenu 下拉菜单

Scan me!

下拉菜单可用于列表筛选

引入

import { DropMenu } from 'mand-mobile'
Vue.component(DropMenu.name, DropMenu)

代码演示

基础下拉菜单

DropMenu 下拉菜单 - 图2

        <template>
  <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-0">
    <md-drop-menu :data="data" />
    <div class="content">正文区域</div>
  </div>
</template>
<script>
import {DropMenu} from 'mand-mobile'
export default {
  name: 'drop-menu-demo',
  components: {
    [DropMenu.name]: DropMenu,
  },
  data() {
    return {
      data: [
        {
          text: '一级选项1',
          options: [
            {
              value: '0',
              text: '二级选项1',
            },
            {
              value: '1',
              text: '二级选项2',
            },
          ],
        },
      ],
    }
  },
}
</script>

禁用下拉菜单

DropMenu 下拉菜单 - 图3

        <template>
  <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-2">
    <md-drop-menu :data="data" :default-value="['1', '8']" />
    <div class="content">正文区域</div>
  </div>
</template>

<script>
import {DropMenu} from 'mand-mobile'

export default {
  name: 'drop-menu-demo',
  components: {
    [DropMenu.name]: DropMenu,
  },
  data() {
    return {
      isContentShow: false,
      data: [
        {
          text: '排量',
          options: [
            {
              value: '0',
              text: '1.6L',
            },
            {
              value: '1',
              text: '1.8L',
            },
            {
              value: '2',
              text: '2.0L',
              disabled: true,
            },
            {
              value: '3',
              text: '1.2T',
            },
            {
              value: '4',
              text: '1.4T',
            },
            {
              value: '5',
              text: '1.6T',
            },
          ],
        },
        {
          text: '变速箱',
          disabled: true,
          options: [
            {
              value: '7',
              text: '手动挡',
            },
            {
              value: '8',
              text: '自动挡',
            },
            {
              value: '9',
              text: '手自一体',
            },
          ],
        },
      ],
    }
  },
}

</script>

初始下拉菜单

DropMenu 下拉菜单 - 图4

        <template>
  <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-1">
    <md-drop-menu :data="data" :default-value="['1', '8']" />
    <div class="content">正文区域</div>
  </div>
</template>

<script>
import {DropMenu} from 'mand-mobile'

export default {
  name: 'drop-menu-demo',
  components: {
    [DropMenu.name]: DropMenu,
  },
  data() {
    return {
      isContentShow: false,
      data: [
        {
          text: '排量',
          options: [
            {
              value: '0',
              text: '1.6L',
            },
            {
              value: '1',
              text: '1.8L',
            },
            {
              value: '2',
              text: '2.0L',
            },
            {
              value: '3',
              text: '1.2T',
            },
            {
              value: '4',
              text: '1.4T',
            },
            {
              value: '5',
              text: '1.6T',
            },
          ],
        },
        {
          text: '变速箱',
          options: [
            {
              value: '7',
              text: '手动挡',
            },
            {
              value: '8',
              text: '自动挡',
            },
            {
              value: '9',
              text: '手自一体',
            },
          ],
        },
      ],
    }
  },
}

</script>

自定义菜单项

DropMenu 下拉菜单 - 图5

        <template>
  <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-3">
    <md-drop-menu :data="data">
      <template slot-scope="{ option }">
        <div class="md-drop-menu-custom-title" v-text="option.text"></div>
        <div class="md-drop-menu-custom-brief">{{ option.text }}【可使用slot-scope进行自定义描述】</div>
      </template>
    </md-drop-menu>
    <div class="content">正文区域</div>
  </div>
</template>

<script>
import {DropMenu} from 'mand-mobile'

export default {
  name: 'drop-menu-demo',
  components: {
    [DropMenu.name]: DropMenu,
  },
  data() {
    return {
      isContentShow: false,
      data: [
        {
          text: '一级选项1',
          options: [
            {
              value: '0',
              text: '二级选项1',
            },
            {
              value: '1',
              text: '二级选项2',
            },
          ],
        },
      ],
    }
  },
}

</script>

<style lang="stylus">
.md-example-child-drop-menu-3
  .md-drop-menu-custom-title
    font-size 28px
    text-align center
  .md-drop-menu-custom-brief
    font-size 20px
    color #999
    text-align center
</style>

API

DropMenu Props

属性	说明	类型	默认值	备注
data	数据源	Array<{text, disabled, options, …}>	`[]`	`disabled`为是否禁用，`options`类型为`Array<{text, disabled, …}>`
default-value	初始值	Array	`[]`	-
option-render	返回各选项渲染内容	Function({text, disabled, …}):String	-	`vue 2.1.0+`可使用`slot-scope`，参考`Radio`

DropMenu Methods

getSelectedValue(index): listItem

获取某菜单项选中值

参数	说明	类型	默认值
index	菜单项索引值	Number	-

属性	说明	类型
listItem	选项数据	Object: {text, disabled, options, …}

getSelectedValues(): listItems

获取所有菜单项选中值

属性	说明	类型
listItems	选项数据	Array<{text, disabled, options, …}>

DropMenu Events

@change(barItem, listItem)

选中某项事件

属性	说明	类型
barItem	菜单项数据	Object: {text, disabled, options, …}
listItem	选项数据	Object: {text, disabled, …}

@show()

下拉菜单展示事件

@hide()

下拉菜单隐藏事件