<template>
	<div>
		<el-collapse v-model="activeNames" @change="handleChange">
			<el-collapse-item v-for="(item, index) in list" :key="index" :name="index">
				<template #title>
					<span class="collapse-title flex" slot="title"
						>{{ item.name }}
						<div class="collapse-title-right flex">
							<span @click.stop="toEdit">编辑</span>
						</div>
					</span>
				</template>
				<template #right-icon>
					<el-icon><ele-CaretBottom /></el-icon>
				</template>
				<div>{{ item.content }}</div>
			</el-collapse-item>
		</el-collapse>
	</div>
</template>

<script setup>
const list = [
	{
		name: '名称1',
		id: 12,
		content: '1Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.',
	},
	{
		name: '名称2',
		id: 23,
		content: '2Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.',
	},
];
// 展开
const activeNames = ref([0, 1]);
const handleChange = (val) => {
	console.log(val);
};

const toEdit = () => {
	console.log(111);
};
</script>
<style lang="scss">
.el-collapse-item__arrow {
	margin-right: 5px;
	font-size: 8px;
	color: #0164fe;
	&:before {
		// 要替换的icon
		content: '\e620';
		font-family: 'iconfont';
		font-size: 8px;
		font-style: normal;
		color: #0164fe;
		margin-right: 10px;
	}
}
.el-collapse-item__arrow.is-active {
	transform: rotate(90deg);
	margin-top: 14px;
	margin-left: -6px;
	margin-right: 10px;
}
.collapse-title {
	height: 44px !important;
	line-height: 44px;
	flex: 1 0 90%;
	order: 1;
	justify-content: space-between;
}
.el-collapse-item__header {
	height: 44px !important;
	flex: 1 0 auto;
	order: -1;
	background: #e7efff;
	padding: 0 20px;
	border-bottom: 1px solid #ffffff;
}
.collapse-title-right {
	span {
		color: #0e64f1;
		cursor: pointer;
		&:hover {
			text-decoration: underline;
		}
	}
}
.el-collapse-item__content {
	padding: 20px;
}
.el-collapse-item__wrap {
	border: none;
}
</style>