Drawer_gz页面侧边抽屉组件

页面侧边抽屉组件

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @require https://update.greasyfork.org/scripts/516282/1483127/Drawer_gz%E9%A1%B5%E9%9D%A2%E4%BE%A7%E8%BE%B9%E6%8A%BD%E5%B1%89%E7%BB%84%E4%BB%B6.js

作者
hgztask
版本
0.4
建立日期
2024-11-07
更新日期
2024-11-13
授權條款
Apache-2.0

Drawer_gz 页面侧边抽屉组件

介绍

Drawer_gz 页面侧边抽屉组件,可设置左边、右边、顶部、底部四个方向的抽屉,支持自定义抽屉内容;

使用


//创建组件并传入配置项
const drawerGz = new Drawer_gz({
    //创建之后是否显示
    show: true,
    //从左边滑出
    direction: "left",
    //抽屉背景色
    backgroundColor: "#ffffff",
    //面板的层级,默认1500,越高层级越在顶层
    zIndex: 2000,
});

//具体其他配置项可看函数文档注释或自行查看源码

drawerGz.show(true); //显示抽屉,传入true则显示,传入false则隐藏

drawerGz.showDrawer();//显示或隐藏抽屉,当不显示时,则显示,当显示时,则隐藏抽屉
const tempIsShow = drawerGz.isShow();
console.log(tempIsShow); //获取当前抽屉是否显示

drawerGz.titleShow(true);//显示标题,传入true则显示,传入false则隐藏

drawerGz.headerShow(true); //显示或隐藏顶栏

drawerGz.setTitle(`抽屉标题`);//设置抽屉标题,传入字符串

drawerGz.setHeaderHrShow(true);//顶栏分割线显示隐藏

drawerGz.setBodyHtml(`<div>抽屉内容</div>`);//设置抽屉内容,传入html字符串

//设置抽屉层级
drawerGz.setZIndex(3000);

drawerGz.externalButtonShow(true);//外部按钮显示或隐藏

drawerGz.setExternalButtonOffset("10%");//设置外部开关按钮偏移

drawerGz.setExternalButtonDirection("bottom");//设置外部开关方向,会影响偏移的位置


//
/**
 * 插入html到面板指定位置,默认插入到抽屉div元素的最后一个子节点之后
 *
 * 该方法第一个参数为要插入的html字符串,第二个参数为插入位置,可选参数如下:
 'beforebegin':在元素自身之前。
 'afterbegin':在元素的第一个子节点之前。
 'beforeend':在元素的最后一个子节点之后。
 'afterend':在元素自身之后。
 */
drawerGz.insertAdjacentHTML(`<div>insertAdjacentHTML插入内容</div>`);