|
80 | 80 | default: '' |
81 | 81 | } |
82 | 82 | }, |
83 | | - inject: ['uCollapse'], |
84 | 83 | data() { |
85 | 84 | return { |
86 | 85 | isShow: false, |
87 | 86 | elId: this.$u.guid(), |
88 | 87 | height: 0, // body内容的高度 |
89 | 88 | headStyle: {}, // 头部样式,对象形式 |
90 | 89 | bodyStyle: {}, // 主体部分样式 |
91 | | - //itemStyle: {}, // 每个item的整体样式 |
| 90 | + itemStyle: {}, // 每个item的整体样式 |
92 | 91 | arrowColor: '', // 箭头的颜色 |
93 | 92 | hoverClass: '', // 头部按下时的效果样式类 |
| 93 | + arrow: true, // 是否显示右侧箭头 |
| 94 | + |
94 | 95 | }; |
95 | 96 | }, |
96 | | - mounted() { |
97 | | - this.init(); |
98 | | - }, |
99 | 97 | watch: { |
100 | 98 | open(val) { |
101 | 99 | this.isShow = val; |
102 | 100 | } |
103 | 101 | }, |
104 | | - computed: { |
105 | | - arrow() { |
106 | | - return this.uCollapse.arrow; |
107 | | - }, |
108 | | - itemStyle() { |
109 | | - return this.uCollapse.itemStyle; |
110 | | - } |
111 | | - }, |
112 | 102 | created() { |
| 103 | + this.parent = false; |
113 | 104 | // 获取u-collapse的信息,放在u-collapse是为了方便,不用每个u-collapse-item写一遍 |
114 | 105 | this.isShow = this.open; |
115 | | - this.nameSync = this.name ? this.name : this.uCollapse.childrens.length; |
116 | | - this.uCollapse.childrens.push(this); |
117 | | - //this.itemStyle = this.uCollapse.itemStyle; |
118 | | - this.headStyle = this.uCollapse.headStyle; |
119 | | - this.bodyStyle = this.uCollapse.bodyStyle; |
120 | | - this.arrowColor = this.uCollapse.arrowColor; |
121 | | - this.hoverClass = this.uCollapse.hoverClass; |
122 | 106 | }, |
123 | 107 | methods: { |
124 | 108 | // 异步获取内容,或者动态修改了内容时,需要重新初始化 |
125 | 109 | init() { |
| 110 | + this.parent = this.$u.$parent.call(this, 'u-collapse'); |
| 111 | + if(this.parent) { |
| 112 | + this.nameSync = this.name ? this.name : this.parent.childrens.length; |
| 113 | + this.parent.childrens.push(this); |
| 114 | + this.headStyle = this.parent.headStyle; |
| 115 | + this.bodyStyle = this.parent.bodyStyle; |
| 116 | + this.arrowColor = this.parent.arrowColor; |
| 117 | + this.hoverClass = this.parent.hoverClass; |
| 118 | + this.arrow = this.parent.arrow; |
| 119 | + this.itemStyle = this.parent.itemStyle; |
| 120 | + } |
126 | 121 | this.$nextTick(() => { |
127 | 122 | this.queryRect(); |
128 | 123 | }); |
129 | 124 | }, |
130 | 125 | // 点击collapsehead头部 |
131 | 126 | headClick() { |
132 | 127 | if (this.disabled) return; |
133 | | - if (this.uCollapse.accordion == true) { |
134 | | - this.uCollapse.childrens.map(val => { |
| 128 | + if (this.parent && this.parent.accordion == true) { |
| 129 | + this.parent.childrens.map(val => { |
135 | 130 | // 自身不设置为false,因为后面有this.isShow = !this.isShow;处理了 |
136 | 131 | if (this != val) { |
137 | 132 | val.isShow = false; |
|
146 | 141 | show: this.isShow |
147 | 142 | }) |
148 | 143 | // 只有在打开时才发出事件 |
149 | | - if (this.isShow) this.uCollapse.onChange(); |
| 144 | + if (this.isShow) this.parent && this.parent.onChange(); |
150 | 145 | this.$forceUpdate(); |
151 | 146 | }, |
152 | 147 | // 查询内容高度 |
|
157 | 152 | this.height = res.height; |
158 | 153 | }) |
159 | 154 | } |
| 155 | + }, |
| 156 | + mounted() { |
| 157 | + this.init(); |
160 | 158 | } |
161 | 159 | }; |
162 | 160 | </script> |
|
0 commit comments