开发手册 - 下拉菜单(bui-dropdown)

下拉菜单 (bui-dropdown)

用法

下拉框的位置是根据触发元素的 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

属性

方法

• 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();
},