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层级属性的配置设置