Skip to content

Commit d7775d5

Browse files
committed
feat: add CCollapse manipulation option: passing id of toggler element
1 parent 569ebb8 commit d7775d5

File tree

1 file changed

+37
-21
lines changed

1 file changed

+37
-21
lines changed
Lines changed: 37 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
1+
<template>
2+
<div :class="{ 'navbar-collapse': this.navbar }">
3+
<slot></slot>
4+
</div>
5+
</template>
6+
7+
<script>
18
const props = {
2-
tag: {
3-
type: String,
4-
default: 'div'
5-
},
69
duration: {
710
type: Number,
811
default: 400
@@ -12,7 +15,8 @@ const props = {
1215
default: 'ease-in-out'
1316
},
1417
show: Boolean,
15-
navbar: Boolean
18+
navbar: Boolean,
19+
toggler: String
1620
}
1721
1822
export default {
@@ -22,18 +26,38 @@ export default {
2226
return {
2327
collapsing: false,
2428
heightWatcher: null,
29+
visible: this.show,
30+
el: null
2531
}
2632
},
2733
watch: {
28-
show (val) {
29-
this.collapse(val)
34+
show (val, oldVal) {
35+
if(val === oldVal) return
36+
this.visible = val
3037
},
38+
visible (val, oldVal) {
39+
if (val !== oldVal)
40+
this.collapseController(val)
41+
}
3142
},
3243
mounted () {
33-
this.$el.style.display = this.show ? '' : 'none'
44+
this.$el.style.display = this.visible ? '' : 'none'
45+
this.$nextTick(() => {
46+
this.el = document.getElementById(this.toggler)
47+
if(this.el)
48+
this.el.addEventListener('click', this.collapse)
49+
})
50+
},
51+
beforeDestroy () {
52+
if(this.el)
53+
this.el.removeEventListener('click', this.collapse)
3454
},
3555
methods: {
36-
collapse (val) {
56+
collapse () {
57+
this.visible = !this.visible
58+
},
59+
collapseController (val) {
60+
this.visible = val
3761
if (this.collapsing) {
3862
this.turn()
3963
const height = Number(this.collapsing.slice(0,-2))
@@ -46,7 +70,7 @@ export default {
4670
}
4771
},
4872
turn () {
49-
if(this.show)
73+
if(this.visible)
5074
this.$el.style.height = this.collapsing
5175
else
5276
this.$el.style.height = 0
@@ -65,21 +89,13 @@ export default {
6589
const self = this
6690
this.heightWatcher = setTimeout(() => {
6791
self.collapsing = false
68-
self.$el.style.display = self.show ? '' : 'none'
92+
self.$el.style.display = self.visible ? '' : 'none'
6993
self.$el.style.height = ''
7094
self.$el.style.overflow = ''
7195
self.$el.style.transition = ''
72-
this.$emit('finish', self.show)
96+
this.$emit('finish', self.visible)
7397
}, duration)
7498
}
75-
},
76-
render (h) {
77-
return h(
78-
this.tag,
79-
{
80-
class: { 'navbar-collapse': this.navbar }
81-
},
82-
[ this.$slots.default ]
83-
)
8499
}
85100
}
101+
</script>

0 commit comments

Comments
 (0)