<template>
  <div class="dynamic-sort">
  	<div :class="['dynamic-sort__item', { 'active': curEleIndex === item.index }]" v-for="(item, index) in layout" :key="index" @click="handleComponentClick(item.point, item.index)">
			{{ item.title }}
		</div>
  </div>
</template>
<script lang="ts" src="./index.ts"></script>
<style lang="less" scoped>
	.dynamic-sort {
		padding: 12px;
		&__item {
			background-color: #fff;
			border-radius: 4px;
			border: 1px solid #f7f7f7;
			color: #333;
			font-size: 13px;
			padding: 8px 12px;
			margin-bottom: 8px;
			&:hover {
				cursor: pointer;
				border-color: #2d8cf0;
			}
			&.active {
				border-color: #2d8cf0;
			}
		}
	}
</style>
