下拉菜单 (bui-dropdown)

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

用法

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

  1. <div class="center" style="padding: 10px">
  2.     <bui-button type="warning" value="打开下拉菜单" @click="open"></bui-button>
  3. </div>
  4. <bui-dropdown v-model="showDropdown" ref="dropdown" :center=true :up=true>
  5.     <bui-cell title="娱乐新闻"></bui-cell>
  6.     <bui-cell title="体育新闻"></bui-cell>
  7.     <bui-cell title="社交媒体"></bui-cell>
  8. </bui-dropdown>
  1. data: function () {
  2.     return {
  3.         showDropdown: false
  4.     }
  5. },
  6. methods: {
  7.     open(event) {
  8.         this.showDropdown = true;
  9.         this.$refs.dropdown.show(event);
  10.     },
  11.     centerClick(e){
  12.         this.showDropdown = true;
  13.         this.$refs.dropdown.show(e);
  14.     }
  15. }

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对象传入：
  1. methods: {
  2.     open(event) {
  3.         this.showDropdown = true;
  4.         this.$refs.dropdown.show(event);//dropdown是组件的ref
  5.     },
  6.     centerClick(e){
  7.         this.showDropdown = true;
  8.         this.$refs.dropdown.show(e);
  9.     }
  10. }
  • hide 关闭组件
  1. cellClick(){
  2.     this.$refs.dropdown.hide();
  3. },