Greasy Fork is available in English.
一个常用的组件库
此脚本不应直接安装，它是一个供其他脚本使用的外部库。如果您需要使用该库，请在脚本元属性加入：// @require https://update.greasyfork.org/scripts/524094/1522518/gz-component.js
// 创建实例
const sheetDialog = new gz.SheetDialog({
title: '标题',
//是否点击遮罩关闭对话框
closeOnOverlayClick: false,
//选项组
options: [
//直接指定选项内容
'选项1',
//也可以通过对象的形式指定
{
//使用label作为选项内容
label: '选项2',
//使用其他自定义key作为选项的属性
value1: 'value1',
value2: 'value2',
value3: 'value3'
},
{
//同上
label: '选项3',
value: '选项3的值',
/**
* 该属性指定点击事件
* @param event 事件对象
* @param attrs {[{name:string,value:string}]} 该选项的属性
* @param This {SheetDialog} 当前组件实例
* @returns {boolean} 如果返回true则阻止全局选项的点击事件，否则继续执行全局选项的点击事件
*/
event: (event, attrs, This) => {
const label = event.target.textContent.trim();
console.log(label, attrs);
console.log(This.getAllOptionAttrs());
//是否阻止全局选项的点击事件
return true
}
}
],
/**
* 该实例的全局选项点击事件
* @param event 事件对象
* @param attrs {[{name:string,value:string}]} 当前选项的属性
* @param This {SheetDialog} 当前组件实例
* @returns {boolean} 如果返回true则阻止全局选项的点击事件，否则继续执行全局选项的点击事件
*
*/
optionEvent: (event, attrs, This) => {
const targetButEl = event.target;
const label = targetButEl.textContent;
console.log(This);
console.log(`点击了${label}`, attrs, targetButEl);
return true;
}
});
//添加到网页body中
sheetDialog.addBody()
//获取实例所有选项的属性
const allOptionAttrs = sheetDialog.getAllOptionAttrs();
//设置实例的全局选项点击事件
sheetDialog.setOptionEvent(回调事件);
//销毁实例并在页面中移除内容
sheetDialog.destroy();