action-sheet

更新时间：2023-02-01 11:07:54

底部弹出选项卡组件

属性

属性	类型	默认值	必填	说明
show	boolean	false	否	是否展示 action sheet 面板
title	string	""	否	标题
options	Option[]	[]	否	菜单选项
active-index	number	0	否	选中项
cancel-text	string	"取消"	否	取消按钮文案
max-height	number	250	否	面板高度
bindclickmask	() => void		否	点击蒙层
bindselect	(e: { detail: { option: Option, index: number } }) => void		否	点击某个选项
bindcancel	() => void		否	点击取消按钮

option

属性

属性	类型	必填	说明
content	string	是	选项内容
value	string | number	是	选项值
disabled	boolean	是	是否禁止选中

使用方式

在 json 文件中引入组件

{
    "usingComponents": {
      "k-action-sheet" : "kma-ui/action-sheet/index"
    }
}

用法

基础用法

通过 show 属性来控制 action-sheet 组件的展示

 <k-action-sheet show="{{ show }}" title="{{ title }}" options="{{ options }}" active-index="{{ activeIndex }}" />

Page({
    data: {
        title: "这是一段标题内容(蒙层关闭禁用&超过指定高度可以滚动)",
        activeIndex: 2,
        show: false,
        options: [
            {
                content: "选项1（选中）",
                value: 1,
            },
            {
                content: "选项2（禁用）",
                value: 2,
                disabled: true,
            },
            {
                content: "选项3",
                value: 3,
            },
        ],
    },
    tap() {
        this.setData({
            "show": !this.data.show,
        });
    },
});

全部参数

<k-action-sheet title="{{ title }}" options="{{ options }}" active-index="{{ activeIndex }}" cancel-text="{{ cancelText }}" show="{{ show }}" max-height="{{ maxHeight }}" bind:click-mask="tapMask" bind:cancel="tapCancel" bind:select="tapSelect"/>

Page({
    data: {
            title: "这是一段标题内容(蒙层关闭禁用&超过指定高度可以滚动)",
            activeIndex: 0,
            cancelText: "关闭",
            maxHeight: 400,
            show: false,
            options: [
                {
                    content: "选项1（选中）",
                    value: 1,
                },
                {
                    content: "选项2（禁用）",
                    value: 2,
                    disabled: true,
                },
                {
                    content: "选项3",
                    value: 3,
                },
                {
                    content: "选项4",
                    value: 4,
                },
                {
                    content: "选项5",
                    value: 5,
                },
                {
                    content: "选项6",
                    value: 6,
                },
            ],
    },
    tap() {
        this.setData({
            "show": !this.data.show,
        });
    },
    tapMask(){
        this.setData({
            "show": !this.data.show,
        });
    },
    tapCancel(){
        this.setData({
            "show": !this.data.show,
        });
    },
    tapSelect(event) {
        this.setData({
            "activeIndex": event.detail.index,
        });
        console.log(JSON.stringify(event.detail.item));
    },
});