8
8
aria-atomic =" true"
9
9
>
10
10
<CButtonClose
11
- v-if =" dismissible && dismissible !== 'customButton' "
11
+ v-if =" dismissible"
12
12
@click =" dismiss()"
13
- :iconHtml =" iconHtml"
14
- :disabled =" this.dismissible === 'disabled'"
15
13
/>
16
- <slot :dismiss =" dismiss" >
17
-
18
- </slot >
14
+ <slot :dismiss =" dismiss" ></slot >
19
15
</div >
20
16
</transition >
21
17
</template >
22
18
23
19
<script >
24
20
import CButtonClose from ' ../Button/CButtonClose'
25
-
26
21
export default {
27
22
name: ' CAlert' ,
28
23
components: { CButtonClose },
@@ -31,16 +26,12 @@ export default {
31
26
type: String ,
32
27
default: ' info'
33
28
},
34
- dismissible: {
35
- type: [Boolean , String ],
36
- validator : val => [false , true , ' disabled' , ' customButton' ].includes (val)
37
- },
29
+ dismissible: Boolean ,
38
30
show: {
39
31
type: [Boolean , Number ],
40
32
default: true
41
33
},
42
34
fade: Boolean ,
43
- iconHtml: String
44
35
},
45
36
data () {
46
37
return {
@@ -60,24 +51,19 @@ export default {
60
51
}
61
52
},
62
53
watch: {
63
- show (val , oldVal ) {
64
- if (val == oldVal) return
65
- this .clearCounter ()
54
+ show (val ) {
66
55
this .state = val
67
56
},
68
57
state: {
69
58
immediate: true ,
70
59
handler (val , oldVal ) {
71
- if (val == oldVal) return
72
-
60
+ this .clearCounter ()
73
61
if (! val && oldVal) {
74
- this .clearCounter ()
75
62
this .$emit (' dismissed' )
76
63
} else if (typeof val === ' number' && val) {
77
64
this .countdownTimeout = setTimeout (() => {
78
- this .$listeners [' update:show' ] ?
79
- this .$emit (' update:show' , this .state - 1 ) :
80
- this .state --
65
+ const isWatched = this .$listeners [' update:show' ]
66
+ isWatched ? this .$emit (' update:show' , this .state - 1 ) : this .state --
81
67
}, 1000 )
82
68
}
83
69
}
@@ -88,7 +74,7 @@ export default {
88
74
},
89
75
methods: {
90
76
dismiss () {
91
- this .$emit (' update:show' , false )
77
+ this .$emit (' update:show' , 0 )
92
78
this .state = false
93
79
},
94
80
clearCounter () {
@@ -100,8 +86,8 @@ export default {
100
86
}
101
87
}
102
88
</script >
103
- <style >
104
89
90
+ <style >
105
91
.fade-enter-active , .fade-leave-active {
106
92
transition : opacity .3s ;
107
93
}
0 commit comments