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>`);