上拉菜单 (bui-actionsheet)

上拉菜单(bui-actionsheet) - 图1   上拉菜单(bui-actionsheet) - 图2

用法

  1. <div class="center" style="padding:10px;">
  2.     <bui-button type="warning" value="上拉菜单" @click="open()"></bui-button>
  3. </div>
  5. <!--自定义上拉菜单-->
  6. <bui-actionsheet
  7.         :items="actionsheetItems"
  8.         v-model="showBar"
  9.         @itemClick="actionsheetItemClick"
  10.         @btnClick="actionsheetBtnClick"
  11. ></bui-actionsheet>
  1. data: function () {
  2.     return {
  3.         showBar: false,
  4.         actionsheetItems: ['复制文字', '收藏动态']
  5.     }
  6. },
  7. methods: {
  8.     open() {
  9.         this.showBar = true;
  10.     },
  11.     actionsheetItemClick(item,index) {
  12.         this.$toast(item)
  13.         this.showBar = false;
  14.     },
  15.     actionsheetBtnClick() {
  16.         this.showBar = false;
  17.     }
  18. }

Example:bui-actionsheet

属性

Prop Type Required Default Description
value boolean N 可以使用v-model进行双向绑定
title string N 请选择 标题文本
items array Y 弹出的菜单选项，数组元素为字符串
button string N 取消 最底部按钮文本

事件

  • @itemClick:点击某项触发的事件，返回文本和索引
  • @btnClick:底部按钮事件（通常为取消）