前端 vue.js实现下拉框

vue.js下拉框的实现

要求：1.下拉框基础功能 2.清除键 3.下拉框动画效果

实现：

1.基础功能

div写出基本框架，循环创建无序列表，充当下拉框内容，通过点击div触发功能函数

2.下拉框动画效果

#selectImg {

position: absolute;

top: 1px;

right: 0px;

cursor: pointer;

transform: rotate(0deg);

transition: all 0.3s ease;

}

#selectImg1 {

position: absolute;

top: 1px;

right: 0px;

cursor: pointer;

transform: rotate(180deg);

transition: all 0.3s ease;

}

给下拉框图标写两个css样式，用Transition实现两css样式切换过渡时的动画效果，两样式不同的地方就在于用rotate改变了旋转角度，这配合transition的切换时过渡效果可实现旋转动画

3.清除键

clear() {

this.value=null;

this.judgeIcon = false;

},

点击清除图标后调用清除函数，函数把写在下拉框中的value改为空，把清除图标的展示改为false，以此实现清除效果。

完整代码

占地面积比较大的

参考阅读