DropMenu 下拉菜单

Scan me!

下拉菜单可用于列表筛选

引入

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

代码演示

基础下拉菜单 getSelectedValue(0)

  1. <template>
  2.   <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-0">
  3.     <md-drop-menu
  4.       ref="dropMenu0"
  5.       :data="data"
  6.     ></md-drop-menu>
  7.     <div class="content">正文区域</div>
  8.   </div>
  9. </template>
  11. <script>
  12. import {DropMenu, Dialog} from 'mand-mobile'
  14. export default {
  15.   name: 'drop-menu-demo',
  16.   components: {
  17.     [DropMenu.name]: DropMenu,
  18.   },
  19.   data() {
  20.     return {
  21.       isContentShow: false,
  22.       data: [
  23.         {
  24.           text: '一级选项1',
  25.           options: [
  26.             {
  27.               text: '二级选项1',
  28.             },
  29.             {
  30.               text: '二级选项2',
  31.             },
  32.           ],
  33.         },
  34.       ],
  35.     }
  36.   },
  37.   mounted() {
  38.     window.DropMenuTrigger = () => {
  39.       this.getSelectedValue('dropMenu0', 0)
  40.     }
  41.   },
  42.   methods: {
  43.     getSelectedValue(selector, index) {
  44.       const value = this.$refs[selector].getSelectedValue(index)
  45.       Dialog.alert({
  46.         content: `<pre>${JSON.stringify(value)}</pre>`,
  47.       })
  48.     },
  49.   },
  50. }
  52. </script>
  53.

禁用下拉菜单

  1. <template>
  2.   <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-2">
  3.     <md-drop-menu
  4.       ref="dropMenu1"
  5.       :data="data"
  6.       :default-value="['1.8L', '自动挡']"
  7.     ></md-drop-menu>
  8.     <div class="content">正文区域</div>
  9.   </div>
  10. </template>
  12. <script>
  13. import {DropMenu} from 'mand-mobile'
  15. export default {
  16.   name: 'drop-menu-demo',
  17.   components: {
  18.     [DropMenu.name]: DropMenu,
  19.   },
  20.   data() {
  21.     return {
  22.       isContentShow: false,
  23.       data: [
  24.         {
  25.           text: '排量',
  26.           options: [
  27.             {
  28.               text: '1.6L',
  29.             },
  30.             {
  31.               text: '1.8L',
  32.             },
  33.             {
  34.               text: '2.0L',
  35.               disabled: true,
  36.             },
  37.             {
  38.               text: '1.2T',
  39.             },
  40.             {
  41.               text: '1.4T',
  42.             },
  43.             {
  44.               text: '1.6T',
  45.             },
  46.           ],
  47.         },
  48.         {
  49.           text: '变速箱',
  50.           disabled: true,
  51.         },
  52.       ],
  53.     }
  54.   },
  55. }
  57. </script>
  58.

初始下拉菜单

  1. <template>
  2.   <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-1">
  3.     <md-drop-menu
  4.       ref="dropMenu1"
  5.       :data="data"
  6.       :default-value="['1.8L', '自动挡']"
  7.     ></md-drop-menu>
  8.     <div class="content">正文区域</div>
  9.   </div>
  10. </template>
  12. <script>
  13. import {DropMenu} from 'mand-mobile'
  15. export default {
  16.   name: 'drop-menu-demo',
  17.   components: {
  18.     [DropMenu.name]: DropMenu,
  19.   },
  20.   data() {
  21.     return {
  22.       isContentShow: false,
  23.       data: [
  24.         {
  25.           text: '排量',
  26.           options: [
  27.             {
  28.               text: '1.6L',
  29.             },
  30.             {
  31.               text: '1.8L',
  32.             },
  33.             {
  34.               text: '2.0L',
  35.             },
  36.             {
  37.               text: '1.2T',
  38.             },
  39.             {
  40.               text: '1.4T',
  41.             },
  42.             {
  43.               text: '1.6T',
  44.             },
  45.           ],
  46.         },
  47.         {
  48.           text: '变速箱',
  49.           options: [
  50.             {
  51.               text: '手动挡',
  52.             },
  53.             {
  54.               text: '自动挡',
  55.             },
  56.             {
  57.               text: '手自一体',
  58.             },
  59.           ],
  60.         },
  61.       ],
  62.     }
  63.   },
  64. }
  66. </script>
  67.

自定义菜单项

  1. <template>
  2.   <div class="md-example-child md-example-child-drop-menu md-example-child-drop-menu-3">
  3.     <md-drop-menu
  4.       ref="dropMenu3"
  5.       :data="data"
  6.     >
  7.       <template slot-scope="{ option }">
  8.         <div class="md-drop-menu-custom-title" v-text="option.text"></div>
  9.         <div class="md-drop-menu-custom-brief">{{ option.text }}【可使用slot-scope进行自定义描述】</div>
  10.       </template>
  11.     </md-drop-menu>
  12.     <div class="content">正文区域</div>
  13.   </div>
  14. </template>
  16. <script>
  17. import {DropMenu, Dialog} from 'mand-mobile'
  19. export default {
  20.   name: 'drop-menu-demo',
  21.   components: {
  22.     [DropMenu.name]: DropMenu,
  23.   },
  24.   data() {
  25.     return {
  26.       isContentShow: false,
  27.       data: [
  28.         {
  29.           text: '一级选项1',
  30.           options: [
  31.             {
  32.               text: '二级选项1',
  33.             },
  34.             {
  35.               text: '二级选项2',
  36.             },
  37.           ],
  38.         },
  39.       ],
  40.     }
  41.   },
  42.   methods: {
  43.     getSelectedValue(selector, index) {
  44.       const value = this.$refs[selector].getSelectedValue(index)
  45.       Dialog.alert({
  46.         content: `<pre>${JSON.stringify(value)}</pre>`,
  47.       })
  48.     },
  49.   },
  50. }
  52. </script>
  54. <style lang="stylus">
  55. .md-example-child-drop-menu-3
  56.   .md-drop-menu-custom-title
  57.     font-size 28px
  58.   .md-drop-menu-custom-brief
  59.     font-size 20px
  60.     color #999
  61. </style>
  62.

API

DropMenu Props

属性说明类型默认值备注
data数据源Array<{text, disabled, options, …}>[]disabled为是否禁用，options类型为Array<{text, disabled, …}>
defaultValue初始值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()

下拉菜单隐藏事件