drawer 抽屉

学习基础

假设你已经对 javascript 有了一定的了解。如不了解，请先去 W3School、菜鸟教程、MDN等平台学习javascript基础知识。

使用

示例

// 定义dom内容
<div class="open-drawer" id="drawer">
    <h1>左侧抽屉</h1>
</div>

// 通过id进行初始化
let drawer = opener.drawer({
    id: '#drawer',
    title: '标题',
    size: '500px', // 宽度或高度，
    type: 'left|top|right|bottom', // 方向
    // 配置按钮文本
    lang: {
        ok: 'ok',
        cancel: 'cancel'
    },
    // 控制按钮和标题显示
    show: {
        ok: true,
        cancel: true,
        title: true
    }, 
    click: (res)=>{
        console.log(res); // close|ok|cancel
    }
})

// 显示
drawer.show();

// 隐藏
drawer.hide()

按钮多语言

默认按钮时确定和取消

// 默认类型
opener.drawer({
     // 自定义按钮文本
    lang: {
        ok: 'ok',
        cancel: 'cancel'
    },
});

控制按钮和标题的显示

默认显示按钮和标题

// 默认类型
opener.drawer({
     // 控制按钮显示
    show: {
        ok: false,
        cancel: false,
        title: false
    },
});

抽屉滑出方向

默认从左侧屏幕滑出

// 默认类型
opener.drawer({
    type: 'left|top|right|bottom'
});