vuejs写一个折叠面板

刚开始我的思路是获取折叠div的初始高度，判断他的高度，给一个稍微低于他高度的范围。

然后在设置style.height = 370 + ‘px’。代码如下：

ruleEvent() {
                let height = this.$refs.rule.offsetHeight
                console.log(height);
                
                if(height >= 1540) {
                    this.$refs.rule.style.height = 370 +'px';
                    this.ruleIndex = 1;
                    $(".close_btn").text("点击展开");
                }else {
                    this.ruleIndex = 0;
                    this.$refs.rule.style.height = 1480 + 'px';   //除去了他的padding和margin
                    $(".close_btn").text("点击收起");
                }
            },

可是这样的问题不能适配所有设备。

只需要再次设置高度时改成auto就可以了。