JS 确认组件 Yh5confirm

Posted on   |   In   |  

本文主要介绍一个款适用于 h5 页面的 confirm 组建
yh5confirm

使用 Yh5confirm

1、引入Yh5confirm

1
<script src="/static/common/slider/slider-1.0.js"></script> <!--引入 slider-->

2、调用Yh5confirm

1
2
3
4
5
6
7
8
9
10
11
12
Yh5Confirm({
    confirmText: 'confirm to delete ?',
    confirmTextColor: '#323232',
    confirmTextSize: '12px',
    }, (choose) => {  //choose == true or false
       if(choose) {
        console.log('click right button')
       } else { 
        console.log('click left button')
       }
    }
})

3、参数说明

confirmText: 确认提示内容， string, default: 确定此操作？
confirmTextColor: 提示内容字体颜色， string, default: #323232
confirmTextSize: 提示内容字体大小， string(‘XXpx’), default: 14px
leftButtonText: 左侧按钮内容， string, default: 取消
leftButtonTextColor： 左侧按钮字体颜色, string, default: ‘#323232’
leftButtonTextSize: 左侧按钮字体大小， string(‘XXpx’), default: 14px
rightButtonText: 右侧按钮内容， string, default: 确定
rightButtonTextColor： 右侧按钮字体颜色, string, default: ‘#30b2fb’
rightButtonTextSize: 右侧按钮字体大小， string(‘XXpx’), default: 14px

Yh5confirm 源码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
/**
 * author: feifeiyu
 * version: 2.0
 * Yh5confirm is a simple comfirm alert component for h5
 * @param confirmText //confirm text to show
 * @param confirmTextColor  // confirm text color
 * @param confirmTextSize // confirm text font size
 * @param leftButtonText, leftButtonTextSize, leftButtonTextColor, //left button param
 * @param rightButtonText, rightButtonTextColor, rightButtonTextSize //right button param
 * yh5confirm blog: https://feifeiyum.github.io/2016/10/30/front-yh5confirm/
 */

var Yh5Confirm = (function() {
    //DOM 生成
    var genConfirmDom = function(opt) {
        var confirmWrap = document.createElement('div') 
        confirmWrap.id = 'yconfirm-wrap'
        confirmWrap.style.cssText = 'display:block;'
            + 'position:fixed;'
            + 'width:100%;'
            + 'height:100%;'
            + 'top:0;'
            + 'left:0;'
            + 'background:rgba(0,0,0,0.3);'
            + 'z-index:2001;'

        var confirmBlock = document.createElement('div')
        confirmBlock.style.cssText = 'margin:40% auto 0;'
            + 'width:70%;'
            + 'height:23%;'
            + 'border-radius:6px;'
            + 'background:#fff;'
        
        var confirmTextBlock = document.createElement('div')
        confirmTextBlock.style.cssText = 'display:table;'
            + 'width:100%;'
            + 'height:67%;'
        
        var confirmTextContent = document.createElement('p')
        confirmTextContent.id = 'yconfirm-content'
        confirmTextContent.style.cssText = 'display:table-cell;'
            + 'vertical-align:middle;'
            + 'text-align:center;'
            + 'padding:5px;'
            + 'font-size:' + (opt.confirmTextSize || '14px') + ';'
            + 'color:' + (opt.confirmTextColor || '#323232') + ';'
        confirmTextContent.innerHTML = opt.confirmText || '确定此操作？'

        var confirmBtnWrap = document.createElement('div')
        confirmBtnWrap.style.cssText = 'border-top:1px solid #d9d9d9;'
            + 'height:33%;' 

        var btnStyle = 'float:left;width:50%;height:100%;border:0;'
            + 'background:none;text-align:center;'

        var leftButton = document.createElement('input')
        leftButton.id = 'yconfirm-left-btn'
        leftButton.value = opt.leftButtonText || '取消'
        leftButton.type = 'button'
        leftButton.style.cssText = btnStyle 
            + 'border-right:1px solid #d9d9d9;'
            + 'font-size:' + (opt.leftButtonTextSize || opt.buttonTextSize || '14px') + ';'
            + 'color:' + (opt.leftButtonTextColor || '#323232') + ';'
        
        var rightButton = document.createElement('input')
        rightButton.id = 'yconfirm-right-btn'
        rightButton.type = 'button'
        rightButton.value = opt.rightButtonText || '确定'
        rightButton.style.cssText = btnStyle
            + 'font-size:' + (opt.rightButtonTextSize || opt.buttonTextSize || '14px') + ';'
            + 'color:' + (opt.rightButtonTextColor || '#30b2fb') + ';'
        
        //按钮组装
        confirmBtnWrap.appendChild(leftButton)
        confirmBtnWrap.appendChild(rightButton)
        //提示文字组装
        confirmTextBlock.appendChild(confirmTextContent)
        //确认框可视区域
        confirmBlock.appendChild(confirmTextBlock)
        confirmBlock.appendChild(confirmBtnWrap)
        //整个提示框
        confirmWrap.appendChild(confirmBlock)
        //加入页面
        document.body.appendChild(confirmWrap)

        return {
            confirmWrap: confirmWrap,
            leftButton: leftButton,
            rightButton: rightButton
        }
    }

    //注册一次性事件
    var addEventOnce = function(dom, type, handler) {
        if(dom.addEventListener) {
            dom.addEventListener(type, handler.__wrapper = function(e) {
                return handler.call(dom, e)
            }, false)
            return {
                removeEvent: function() {
                    dom.removeEventListener(type, handler.__wrapper, false)
                }
            }
        } else if(dom.attachEvent) {
            dom.attachEvent('on' + type, handler.__wrapper = function(e) {
                return handler.call(dom, e)
            })
            return {
                removeEvent: function() {
                    context.detachEvent('on' + type, handler.__wrapper);
                }
            }
        }
    }
    //入口函数
    var YC = function(opt, cb) {
        var confirmWrap = document.getElementById('yh5confirm-wrap')
        var rightButton = ''
        var leftButton = ''
        if(!confirmWrap) { //第一次调用，未生成 confirm DOM
            var dom = genConfirmDom(opt)
            confirmWrap = dom.confirmWrap
            rightButton = dom.rightButton
            leftButton = dom.leftButton
        } else { //第一次调用，已生成 confirm DOM
            rightButton = document.getElementById('yconfirm-right-btn')
            leftButton = document.getElementById('yconfirm-left-btn')

            var confirmTextContent = document.getElementById('yconfirm-content')
            opt.confirmText && (confirmTextContent.innerHTML = opt.confirmText)
            opt.confirmTextColor && (confirmTextContent.style.color = opt.confirmTextColor)
            opt.confirmTextSize && (confirmTextContent.style.fontSize = opt.confirmTextSize )
            
            opt.leftButtonText && (leftButton.value = opt.leftButtonText)
            opt.leftButtonTextColor && (leftButton.style.color = opt.leftButtonTextColor)
            opt.leftButtonTextSize && (leftButton.style.fontSize = opt.leftButtonTextSize)
            
            opt.rightButtonText && (rightButton.value = opt.rightButtonText )
            opt.rightButtonTextColor && (rightButton.style.color = opt.rightButtonTextColor)
            opt.rightButtonTextSize && (rightButton.style.fontSize = opt.rightButtonTextSize)
        }
        //右侧按钮事件
        var rightFoo = addEventOnce(rightButton, 'click', function() {
            confirmWrap.style.display = 'none'
            cb(true)
            rightFoo.removeEvent()  //remove rigisted event
            leftFoo.removeEvent()
        })
        //左侧按钮事件
        var leftFoo = addEventOnce(leftButton, 'click', function() {
            confirmWrap.style.display = 'none'
            cb(false)
            leftFoo.removeEvent() //remove rigisted event
            rightFoo.removeEvent()
        })
    }

    return YC
}())

//如果采用模块化打包引入的时候加上这句
//module.exports = Yh5Confirm