下拉菜单(bui-dropdown)

下拉菜单 (bui-dropdown)
- 用法
- 属性
- 方法

下拉菜单(bui-dropdown) - 图1 下拉菜单(bui-dropdown) - 图2

用法

下拉框的位置是根据触发元素的 event对象的 position 计算而来的。设置ref是为了在组件内部做动画效果。

<div class="center" style="padding: 10px">
    <bui-button type="warning" value="打开下拉菜单" @click="open"></bui-button>
</div>
<bui-dropdown v-model="showDropdown" ref="dropdown" :center=true :up=true>
    <bui-cell title="娱乐新闻"></bui-cell>
    <bui-cell title="体育新闻"></bui-cell>
    <bui-cell title="社交媒体"></bui-cell>
</bui-dropdown>

data: function () {
    return {
        showDropdown: false
    }
},
methods: {
    open(event) {
        this.showDropdown = true;
        this.$refs.dropdown.show(event);
    },
    centerClick(e){
        this.showDropdown = true;
        this.$refs.dropdown.show(e);
    }
}

Example: bui-dropdown

属性

Prop	Type	Required	Default	Description
`value`	`boolean`	`N`		可以使用v-model进行双向绑定
`bgColor`	`string`	`N`	`#ffffff`	背景颜色
`center`	`boolean`	`N`	`false`	箭头显示位置,false表示在左边，true在中间
`autoWidth`	`boolean`	`N`	`true`	自动适配触发控件宽度，false时候固定260px
`up`	`boolean`	`N`	`false`	气泡向上动画，默认是向下

方法

show 打开组件，需要把event对象传入：

methods: {
    open(event) {
        this.showDropdown = true;
        this.$refs.dropdown.show(event);//dropdown是组件的ref
    },
    centerClick(e){
        this.showDropdown = true;
        this.$refs.dropdown.show(e);
    }
}

hide 关闭组件

cellClick(){
    this.$refs.dropdown.hide();
},

下拉菜单 (bui-dropdown)

用法

属性

方法