Drawer_gz页面侧边抽屉组件

页面侧边抽屉组件

此腳本不應該直接安裝,它是一個供其他腳本使用的函式庫。欲使用本函式庫,請在腳本 metadata 寫上: // @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

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 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>`);