Greasy Fork

Drawer_gz 页面侧边抽屉组件

介绍

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

脚本中引用

// @require     https://update.greasyfork.org/scripts/516282/1483103/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

使用

//创建组件并传入配置项
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");//设置外部开关方向，会影响偏移的位置

//设置背景色
drawerGz.setBackgroundColor("red");

//设置宽度
drawerGz.setWidth("500px");
//设置高度
drawerGz.setHeight("500px");


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

新增setExternalButtonWidth内置方法和对应的配置

配置config中的border调整为drawerBorder
新增headerHrShow、externalButtonText、externalButtonColor、externalButtonBorder、externalButtonShow、externalButtonOffset、externalButtonDirection、externalButtonTextColor字段配置
新增内置方法：setHeaderHrShow、externalButtonShow、setExternalButtonOffset、setExternalButtonDirection

补充zIndex层级属性的配置设置