Drawer_gz页面侧边抽屉组件

页面侧边抽屉组件

此脚本不应直接安装。它是供其他脚本使用的外部库,要使用该库请加入元指令 // @require https://update.gf.qytechs.cn/scripts/516282/1504802/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

您需要先安装一个扩展,例如 篡改猴Greasemonkey暴力猴,之后才能安装此脚本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安装一个扩展,例如 篡改猴暴力猴,之后才能安装此脚本。

您需要先安装一个扩展,例如 篡改猴Userscripts ,之后才能安装此脚本。

您需要先安装一款用户脚本管理器扩展,例如 Tampermonkey,才能安装此脚本。

您需要先安装用户脚本管理器扩展后才能安装此脚本。

(我已经安装了用户脚本管理器,让我安装!)

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展,比如 Stylus,才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

您需要先安装一款用户样式管理器扩展后才能安装此样式。

(我已经安装了用户样式管理器,让我安装!)

作者
hgztask
版本
0.5
创建于
2024-11-07
更新于
2024-12-17
大小
14.6 KB
许可证
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>`);