CSS——通过CSS实现展示更多选项和收起

前言

效果如下:

最近要开始回忆回忆PS的知识,所以画的丑丑的

内容

<template>
  <div>
    <div class="button-item">
<!--控制选项展示隐藏-->
      <div :class="isShow?'button-height':''">
        <button v-for="(option, index)in item.options" :key="option.optionId">{{ option.optionName }}
          <!--选项内容-->
        </button>
      </div>
<!--更多选项按钮展示 | 控制选项的展示和隐藏-->
      <button v-if="item.options.length>4" @click="btnShow">{{ isShow ? '更多选项' : '收起' }}
<!--控制箭头-->
        <span :class="isShow?'cuIcon-unfold':'cuIcon-fold'"></span>
      </button>
    </div>
</template>
<script>

export default {
  name:"scordBoardButton",
      data() {
        return {
          isShow: true
        }
  },
  methods:{
    
    btnShow() {
      this.isShow = !this.isShow;
    }
  }
}
</script>

<style lang="less" scoped>

  .button-height{
    // 通过高度控制内容的展示
    height:36vmin;
    overflow:hidden;
  }

</style>