エレメントの二次梱包 コラプスパネルのコラプスコンポーネント

I. Collapseコンポーネントのラッピング

新しい折りたたみ.vueファイルをvueプロジェクトのcomponentsフォルダに置く。

<template>
 <div class="collapse-container">
 <el-collapse accordion v-model="activeNames" @change="handleCollapseChange">
 <el-collapse-item name="collapsePanel">
 <template slot="title">
 <i class="search el-icon-fa-search"></i>
 <span class="search"> </span>
 </template>
 <slot />
 </el-collapse-item>
 </el-collapse>
 </div>
</template>
<script>
export default {
 computed: {
 activeNames: {
 // collapsearsのルートのデフォルトの状態は、拡張されているかどうかである。
 get() {
 const arrs = ["/default", "/attr"];
 if (arrs.includes(this.$route.path)) {
 return "collapsePanel";
 } else {
 return "";
 }
 },
 set() {}
 }
 },
 methods: {
 handleCollapseChange(val) {
 this.$emit("handleCollapseChange", val);
 }
 }
};
</script>
<style lang="scss">
.collapse-container {
 .search {
 color: $icon_color;
 font-size: 15px;
 font-weight: 600;
 margin-left: 10px;
 }
 .el-collapse-item__header {
 height: 35px;
 line-height: 35px;
 }
 .el-collapse-item__content {
 padding-bottom: 0;
 }
}
</style>

II. カプセル化されたコンポーネントの使用

<template>
 // 3. コンポーネントを使う
 <div>
 <comn-collapse @handleCollapseChange="handleCollapseChange">
 <div> ここでは、さまざまな状況に応じて、さまざまな状況のフォームを配置した</div>
 </comn-collapse>
 </div>
 </template>
 <script>
 import comnCollapse from "@/components/Collapse.vue"; // 1. コンポーネントをローカルに導入し、状況に応じてグローバルに導入するかどうかを決める。
 export default {
	components:{
		comnCollapse // 2. コンポーネントを登録する
	},
	data(){
	return {
		collapsePanel:"", // この値は、折りたたまれたパネルがこの時点で展開されていることを意味する。
	}
	},
 methods: {
	 handleCollapseChange(val) {
 this.collapsePanel = val;
 	 }
	}
 }
</script>

募集要項は以下の通り：