下拉菜单 (bui-dropdown)

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

用法

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

2. 3.
4. 5. 6. 7. 8. 

  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(){
      1. this.$refs.dropdown.hide();
      2. },