vue 手写类似提示框

首先，我想说，，，，以下内容都很赶时间，只为记录！！！

设计图是这样子的：

没有找到相关插件，所以自己写插件。

<template>
	<div class="hello">
		<div v-for="(item,index) of list" :class='["classify",(index + 1)%3 != 0?"demo":"demo_"]'
			v-if="(index + 1)%3 != 0 || item.isok" :key='index'>
			<div :class='[index == present?"demo_content":"demo_contents"]' v-if="(index + 1)%3 != 0"
				@click="changes(index)">
				<!-- 箭头 -->
				<div class="arrows" v-if="index == present">
					<span class="arrows_left"></span>
					<span class="arrows_right"></span>
					<span class="arrows_bottom"></span>
				</div>
				安全策划(4)
			</div>
			<div class="contents" v-if="item.isok">
				1234
			</div>

		</div>
		<!-- <div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo">
			安全策划(4)
		</div>
		<div class="demo_"></div> -->
	</div>

</template>

<script>
	export default {
		name: 'HelloWorld',
		data() {
			return {
				list: [{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					},
					{
						'name': '安全策划',
						'number': 4
					}
				],
				present: 'null', //判断当前点击那个按钮
			}
		},
		methods: {
			changes(e) {
				var num = 0;
				if ((e + 2) % 3 != 0) {
					num = e + 2;
				} else {
					num = e + 1;
				}
				this.present = e;
				this.list.forEach(e => {
					e.isok = false
				});
				this.list[num].isok = true;
				console.log(this.list)
			}
		},
		created() {
			var id = 0;
			// 给数据添加空对象,实现循环效果
			for (var i = 0; i < this.list.length; i++) {
				if ((i + 1) % 3 == 0) {
					id = id+1;
					let obj = {
						'id':id
					};
					this.list.splice(i, 0, obj);
				}
			};
			this.list.push({});
			this.list.forEach(e => {
				e.isok = false
			});
			console.log(this.list)
		}
	}
</script>

<style scoped>
	.hello {
		width: 98%;
		margin: auto;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.demo {
		width: 47%;
		height: 1.5rem;
		/* background-color: #1FA0FC;
		color: #fff;
		border-radius: 5px;
		margin-bottom:.4rem ;
		display: flex;
		justify-content: center;
		align-items: center; */
	}

	.demo_content {
		width: 100%;
		height: 1.5rem;
		background-color: #1FA0FC;
		color: #fff;
		border-radius: 5px;
		margin-bottom: .4rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.demo_contents {
		width: 100%;
		height: 1.5rem;
		background-color: #fff;
		color: ##5C5C5C;
		border-radius: 5px;
		margin-bottom: .4rem;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

	.arrows {
		width: .4rem;
		height: .4rem;
		display: flex;
		position: absolute;
		left: 50%;
		bottom: -.58rem;
	}

	.arrows span {
		display: block;
		width: 1px;
		height: .4rem;


	}

	.arrows_left {
		background-color: #9BCBE1;
		transform: rotate(45deg) translateX(-.165rem);
	}

	.arrows_right {
		background-color: #9BCBE1;
		transform: rotate(-45deg) translateX(.165rem);
	}

	.arrows_bottom {
		background-color: #fff;
		height: .5rem !important;
		width: 2px !important;
		transform: rotate(90deg) translateY(.05rem);
	}

	.demo_ {
		width: 100%;
		height: 7rem;
		/* 	background-color: #fff;
		border-radius: 5px;
		border-top: 1px solid #9BCBE1; */
	}

	.contents {
		width: 100%;
		height: 7rem;
		background-color: #fff;
		border-radius: 5px;
		border-top: 1px solid #9BCBE1;
	}

	.classify {
		margin-bottom: .4rem;
	}
</style>

这是赶工程敲出来的，没有代码优化，凑合看吧。

结果如图：

样式没做，但点击逻辑都动态处理了，所以凑合看吧。