Vue.jsはシンプルな折りたたみパネルを実装します

<テンプレート>
  <div id="アプリ">
    <img alt="Vue ロゴ" src="./assets/logo.png">
    <崩壊>
      <collpase-item
        :title="アイテム名"
        :showAnimation="true"
        v-for="(item, i) が chapterList 内にあります"
        :key="i"
      >
        <div class="list" v-for="(it, index) in item.list" :key="index">
          {{it.name}}
        </div>
      </collpase-item>
    </折りたたむ>
  </div>
</テンプレート>

<スクリプト>
'./components/Collpase.vue' から Collpase をインポートします。
'./components/CollpaseItem.vue' から CollpaseItem をインポートします。

エクスポートデフォルト{
  名前: 'アプリ'、
  データ（） {
    戻る {
      章リスト: [
        {
          名前: 'タイトル1'、
          リスト: [
            {
              名前:「はい、はい、はい、はい、はい」
            },
            {
              名前: 「ああああ」
            }
          ]
        },
        {
          名前: 'タイトル2'、
          リスト: [
            {
              名前:「はい、はい、はい、はい、はい」
            },
            {
              名前: 「ああああ」
            },
            {
              名前: 「ああああ」
            }
          ]
        }
      ]
    }
  },
  コンポーネント:
    崩壊、
    折りたたむアイテム、
  }
}
</スクリプト>

<スタイル>
＃アプリ {
  フォントファミリー: Avenir、Helvetica、Arial、sans-serif;
  -webkit-font-smoothing: アンチエイリアス;
  -moz-osx-font-smoothing: グレースケール;
  テキスト配置: 中央;
  色: #2c3e50;
  上マージン: 60px;
}
</スタイル>

<テンプレート>
 <div class="collapse">
  <スロット />
 </div>
</テンプレート>
<スクリプト>
 エクスポートデフォルト{
  名前: 「崩壊」
  小道具: {
   アコーディオン: {
    タイプ: [ブール値、文字列],
    デフォルト: false
   }
  },
  提供する（） {
   戻る {
    崩壊：これ
   }
  },
  作成された() {
   this.childrens = []
  },
  メソッド: {
   オンチェンジ() {
    アクティブアイテムを [] にする
    this.childrens.forEach((vm) => {
     （vm.isOpen）の場合{
      アクティブアイテムをプッシュします(vm.nameSync)
     }
    })
    this.$emit('change', アクティブアイテム)
   }
  }
 }
</スクリプト>
<style lang="css" スコープ>
 。崩壊 {
  幅: 100%;
  ディスプレイ: フレックス;
  フレックス: 1;
  flex-direction: 列;
 }
</スタイル>

<テンプレート>
 <div>
    <div :class="{ 'collapse-disabled': 無効、'collapse-cell--notdisabled': !disabled、'collapse-cell--open': isOpen、'collapse-cell--hide': !isOpen }" class="collapse-cell">
      <div :class="{ 'collapse-disabled': disabled}" class="collapse-cell__title" @click="onClick">
        <span class="collapse-cell__title-text">{{ タイトル }}</span>
        <img :class="{ 'active': isOpen, 'active-animation': showAnimation === true }" class="title-arrow" src="https://static-mumway.oss-cn-zhangjiakou.aliyuncs.com/NetworkFrontEnd/wsj/yslbq/btn_dropdown.png"/>
      </div>
      <div :class="{'collapse-cell__content--hide':!isOpen}" class="collapse-cell__content">
        <div :class="{ 'active-animation': showAnimation === true }" class="collapse-cell__wrapper" :style="{'transform':isOpen?'translateY(0)':'translateY(-50%)','-webkit-transform':isOpen?'translateY(0)':'translateY(-50%)'}">
          <スロット />
        </div>
      </div>
    </div>
  </div>
</テンプレート>

<スクリプト>
 エクスポートデフォルト{
  名前: 'UniCollapseItem',
  小道具: {
   タイトル：
    // リストタイトルタイプ: 文字列、
    デフォルト： ''
   },
   名前： {
    // 一意の識別子タイプ: [数値、文字列],
    デフォルト: 0
   },
   無効：
    // 無効にするかどうか type: Boolean,
    デフォルト: false
   },
   アニメーションを表示:
    // アニメーションを表示するかどうかのタイプ: ブール値、
    デフォルト: false
   },
   開ける：
    // 展開するかどうか type: Boolean,
    デフォルト: false
   },
   親指：
    // サムネイルタイプ: 文字列、
    デフォルト： ''
   }
  },
  データ（） {
   戻る {
    isOpen: 偽
   }
  },
  時計：
   開く(val) {
    this.isOpen = val
   }
  },
  挿入: ['collapse'],
  作成された() {
   this.isOpen = this.open
   this.nameSync = this.name ? this.name : this.collapse.childrens.length
   this.collapse.childrens.push(これ)
   if (String(this.collapse.accordion) === 'true') {
    if (this.isOpen) {
     lastEl = this.collapse.childrens[this.collapse.childrens.length - 2]とします。
     if (lastEl) {
      this.collapse.childrens[this.collapse.childrens.length - 2].isOpen = false
     }
    }
   }
  },
  メソッド: {
   クリック() {
    無効の場合
     戻る
    }
    if (String(this.collapse.accordion) === 'true') {
     this.collapse.childrens.forEach(vm => {
      (vm === this) の場合 {
       戻る
      }
      vm.isOpen = 偽
     })
    }
    this.isOpen = !this.isOpen
    this.collapse.onChange と this.collapse.onChange()
    this.$forceUpdate()
   }
  }
 }
</スクリプト>

<style lang="css" スコープ>
 .collapse-cell {
  flex-direction: 列;
  境界線の色: #f0f0f0;
  境界線の下の幅: 1px;
 }
 .collapse-cell--open {
  背景色: #fff;
 }
 .collapse-disabled {
  カーソル: 許可されていません !important;
 }
 .collapse-cell--hide {
  高さ: 48px;
 }
 .アクティブアニメーション{
  遷移プロパティ: transform;
  遷移期間: 0.3秒;
  遷移タイミング関数: イージー;
 }

 .collapse-cell__title {
  下境界線: 1px 実線 #f0f0f0;
  パディング: 12px 20px;
  位置: 相対的;
  ディスプレイ: フレックス;
  幅: 100%;
  ボックスのサイズ: 境界線ボックス;
  高さ: 44px;
  行の高さ: 44px;
  flex-direction: 行;
  コンテンツの両端揃え: スペースの間;
  アイテムの位置を中央揃えにします。
  カーソル: ポインタ;
 }
 .collapse-cell__title-img {
  右マージン: 10px;
 }
 .title-arrow {
  幅: 22px;
  高さ: 14px;
 }
 。アクティブ {
  変換: 回転(180度);
 }
 .collapse-cell__title-text {
  フレックス: 1;
  フォントサイズ: 16px;
  右マージン: 16px;
  空白: ラップなし;
  色: #333333;
    フォントの太さ: 太字;
  行数: 1;
  オーバーフロー: 非表示;
  テキストオーバーフロー: 省略記号;
 }
 .collapse-cell__content {
  オーバーフロー-x:非表示;
 }
 .collapse-cell__wrapper {
  ディスプレイ: フレックス;
  flex-direction: 列;
 }
 .collapse-cell__content--hide {
  高さ: 0px;
  行の高さ: 0px;
 }
</スタイル>