下拉菜单 (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. },