https://lingyuzhao.top/js/statusButton.js

1/**
2 * 带有状态的按钮，您在这里可以进行状态切换操作
3 */
4class StatusButton {
5
6    static status_className = {
7        "active": "status_button_active",
8        "close": "status_button_close",
9        "warning": "status_button_warning",
10        "pause": "status_button_pause"
11    }
12
13    _status_color = {
14        "active": {color: "rgb(0, 255, 174)"},
15        "close": {color: "rgb(255, 0, 0)"},
16        "warning": {color: "rgb(255, 255, 0)"},
17        "pause": {color: "#777777"}
18    }
19
20    status_fun = [
21        () => this.setStatusNoFun("pause"), () => this.setStatusNoFun("active"), () => this.setStatusNoFun("close"), () => this.setStatusNoFun("warning")
22    ]
23
24    /**
25     * 将一个按钮元素初始化为状态按钮
26     * @param element 元素对象
27     */
28    constructor(element) {
29        this.e = element;
30        for (let string of ['status_button']) {
31            this.e.classList.add(string);
32        }
33    }
34
35    /**
36     * 设置当前按钮的不同状态
37     * @param status {"active"|"close"|"warning"|"pause"} 状态
38     */
39    setStatusNoFun(status) {
40        const statusColorElement = this._status_color[status];
41        for (let statusColorKey in statusColorElement) {
42            this.e.style[statusColorKey] = statusColorElement[statusColorKey];
43        }
44    }
45
46    /**
47     * 设置当前按钮的不同状态下的CSS样式
48     * @param status {"active"|"close"|"warning"|"pause"} 状态
49     * @param color {string:string} 样式属性
50     */
51    setStatusColor(status, color) {
52        this._status_color[status] = color;
53    }
54
55    /**
56     *
57     * @param {function(HTMLElement, function(), function(), function(), function())} fun 这里是一个回调函数，您可以在此函数中实现状态切换，函数中的四个形参代表的就是四个不同的状态
58     * 分别是暂停、激活、关闭、警告
59     */
60    setStatus(fun) {
61        // 先设置为暂停
62        this.setStatusNoFun("pause");
63        // 然后让用户设置状态 最后用户需要在函数中调用更新函数
64        fun(this.e, this.status_fun[0], this.status_fun[1], this.status_fun[2], this.status_fun[3]);
65    }
66
67    /**
68     * 对当前的按钮添加一个事件处理
69     * @param fun 事件处理函数 输入的是事件对象 以及 按钮对象
70     * @param eventName 触发事件的名称
71     * @return {function} 返回的函数是移除事件函数，您如果需要移除的话，可以直接使用此函数来进行移除！
72     */
73    addEvent(fun, eventName = "click") {
74        const newVar = (e) => fun(e, this.e);
75        this.e.addEventListener(eventName, newVar);
76        return newVar;
77    }
78
79    /**
80     * 移除事件
81     * @param fun 需要移除的事件函数
82     * @param eventName 对应的事件名称
83     */
84    removeEvent(fun, eventName = "click") {
85        this.e.removeEventListener(eventName, fun);
86    }
87}