vue中calss 动态绑定实现下拉列表

最新推荐文章于 2024-05-28 11:02:01 发布

黑孩er

最新推荐文章于 2024-05-28 11:02:01 发布

阅读量2.2k

点赞数

分类专栏： vue 文章标签： class动态绑定下拉列表

本文链接：https://blog.csdn.net/u012219674/article/details/78690039

版权

在Vue项目中，为了实现班级下拉列表的展开和收起效果，开发者选择手动编写代码而非使用UI库。通过在li标签内添加span元素，并利用伪元素创建箭头，然后通过CSS设置旋转、宽度和高度，结合overflow:hidden实现箭头的动态翻转效果。

摘要由CSDN通过智能技术生成

交代下背景：现在在做一个vue项目，需要实现班级的逻辑是：如下图所示：初始状态下箭头自动向下（收起状态）,点击某个班级时，右侧箭头自动变为向上（展开状态），起初我想通过MUI或者Mint-Ui来引入插件，后发现自己手写会更加快一些，这里箭头用的是伪元素生成的，大体思路是：

1.在当前li标签中添加span标签（父标签），设置当前span的伪元素为正方形，并旋转45°

2.将当前span标签（父标签）的宽度设置为伪元素旋转后的宽度（开跟伪元素原始宽高平方和），高度为伪元素旋转后宽度的一半

3.设置span标签（父标签）overflow:hidden;

，具体代码如下：

	/*点击显示班级明细*/
	.show-btn,.hide-btn{
		float: right;
		position: relative;
		display:inline-block;
		border:1px solid #fff;
		box-sizing: border-box;
		width:14px;
		height:8px;
		top:5px;
		overflow: hidden;
		right:10px;
	}
	.show-btn:before,.hide-btn:before{
		box-sizing: border-box;
		content:"";
		width:10px;
		hei