技術標籤：婉約派

參考文章
1.template中,這裡用的是iview框架的按鈕和icon圖示，根據點選按鈕切換圖示和展開收起動畫

<qf-button
  size="small"
  type="text"
  @click="setContent"
>
  <qf-icon
    :type="isActive ? 'angle-double-up' : 'angle-double-down'"
    size="12"
    color="#999"
 

    class="mr-9"
  />
</qf-button>
<div ref="content">
  <p>詳細資訊</p>
  <p>子元素資訊</p>
</div>

2.data,mounted,methods中

data() {
   return {
   	 isActive: false,
     textheight: 0
   };
 },
mounted() {
    this.$nextTick(el => {
      // 不能通過v-if，v-show來控制元素顯示隱藏，否則動畫不生效,這裡是預設隱藏
 

      this.textheight = this.$refs.content.offsetHeight + "px";
      this.$refs.content.style.height = 0;
      this.$refs.content.style.overflow = 'hidden';
      // -------------兩種情況，如果預設隱藏選上面，預設展示選下面-------------
      // 不能通過v-if，v-show來控制元素顯示隱藏，否則動畫不生效，
      // 預設顯示資料，就要先獲取到子元素的高度。
      this
 
.textheight = `${this.$refs.content.offsetHeight}px`;
      this.$refs.content.style.height = this.textheight;
    });
  },
methods: {
    setContent() {
      this.isActive = !this.isActive;
      if (this.isActive) {
        this.$refs.content.style.height = this.textheight;
        this.$refs.content.style.opacity = 1;
      } else {
        this.$refs.content.style.height = 0;
        this.$refs.content.style.opacity = 0;
        this.$refs.content.style.overflow = 'hidden';
      }
    },
  }, 

參考文章