Vue 多选框所选数量动态变换Box的高度

<div id="app">
  <input type="checkbox" v-for="(option, index) in options" :key="index" v-model="selectedOptions" :value="option.value">
  <label>{{ option.label }}</label>
  <br>
  <div ref="box" :style="{ height: `${boxHeight}px` }"></div>
</div>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      options: [
        { value: 1, label: 'Option 1' },
        { value: 2, label: 'Option 2' },
        { value: 3, label: 'Option 3' }
      ],
      selectedOptions: [],
      boxHeight: 100 // 初始高度
    };
  },
  watch: {
    selectedOptions(newVal) {
      this.boxHeight = newVal.length * 50; // 每个选项增加50px高度
    }
  }
});
</script>

<style>
.fade-transition {
  transition: height 0.5s ease;
}
</style>
<script>
new Vue({
  ...
  computed: {
    transitionClass() {
      return ['fade-transition'];
    }
  }
});
<div ref="box" :class="transitionClass" :style="{ height: `${boxHeight}px` }"></div>

computed: {
  boxHeightStyle() {
    return { height: `${this.selectedOptions.length * 50}px` };
  }
}
<div ref="box" :style="boxHeightStyle"></div>

mounted() {
  this.boxHeight = this.selectedOptions.length * 50;
}

mounted() {
  window.addEventListener('resize', this.handleResize);
  this.handleResize();
},
beforeDestroy() {
  window.removeEventListener('resize', this.handleResize);
},
methods: {
  handleResize() {
    // 在这里可以添加逻辑来根据窗口大小调整boxHeight
  }
}