|
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