bottom-panel

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

底部弹窗用于规则和说明的展示

属性

属性	类型	默认值	必填	说明
show	boolean	false	否	是否展示「底部面板」
title	string	""	否	标题
content	string	""	否	内容
btns	Btn[]	[]	否	底部操作按钮
closeable	boolean	true	否	是否展示右上角关闭图标
bindclickmask	() => void		否	点击「蒙层」事件
bindclickclose	() => void		否	点击「关闭」按钮
bindclickbtn	(e: { detail: { index: number } }) => void		否	点击「底部按钮」事件

Btn

属性

属性	类型	必填	说明
content	string	是	按钮内容
type	'primary' | 'plain'	是	按钮主题

使用方式

在 json 文件中引入组件

{
    "usingComponents": {
      "k-bottom-panel" : "kma-ui/bottom-panel/index"
    }
}

用法

基础用法

<k-bottom-panel title="{{ title }}" content="{{ content }}" btns="{{ btns }}" show="{{ show }}"
bind:click-mask="tapMask" bind:click-close="tapClose" bind:click-btn="tapBtn" />

Page({
    data: {
       title: "标题",
       content:
           "欢迎您使用快手APP！我们非常重视您的个人信息和隐私保护，我们将通过《隐私权保护政策》帮助您了解我们收集、使用、存储、共享和保护个人信息的情况，以及您所享有的相关权利。1. 为了保障您正常使用我们的产品，帮助您实现个性化浏览推荐，我们会收集、使用、存储、共享和保护个人信息的情况，以及您所享有的相关权利。2. 相关保障问题请的文本内容可以在这里补充，文案部分请参考，我们会收集、使用、存储、共享和保护个人信息的情况，以及您享有的相关权利。文案部分请参考，我们会收集、使用、存储。",
       btns: [
           { content: "返回", type: "plain" },
           { content: "确认", type: "primary" },
       ],
       show: false,
    },
    tap() {
        this.setData({
            "show": !this.data.show,
        });
    },
    tapMask() {
        this.close();
    },
    tapClose() {
        this.close();
    },
    close() {
        this.setData({
            "show": false,
        });
    },
    tapBtn(ev) {
        const index = ev.detail.index;
        switch (index) {
            case 0:
                this.close();
                break;
            case 1:
                ks.showModal({
                    title: this.data.btns[index].content,
                });
                break;
        }
    },
});

自定义内容

<k-bottom-panel title="{{title}}" content="{{content}}" btns="{{btns}}" show="{{show}}"
    bind:click-mask="tapMask" bind:click-close="tapClose" bind:click-btn="tapBtn" >
    <view class="readmore">阅读完整版<text class="link" bindtap="goDetail">《直播间卖货考核政策》</text></view>
</k-bottom-panel>