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>