• 上拉菜单 (bui-actionsheet)
    • 用法
    • 属性
    • 事件

    上拉菜单 (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:底部按钮事件（通常为取消）