1.在标签行内动态绑定style.class,style可以绑定其中一个样式,class可以更换整个class
//html
<div class="zy-select" @click="chooseSelect" :style="newStyle">
//<div class="zy-select" @click="chooseSelect" :style=" { width:newWidth } ">
//可以通过给绑定style直接定义属性,也可以给style绑定方法,放在监听属性中通过返回'--new-width'这种形式定义.在css中通过var定义--new-width,可以使用props中传入的属性数据.
<div class="box">
<input class="zy-input">
<b :class= "zySelect"><i class="bottom-arrow1"></i><i class="bottom-arrow2"></i></b>
</div>
<div>
//js
props: {
newWidth: {
type: String,
default: '100px'
}
},
data() {
return {
zySelect: 'bottom'
}
},
computed:{
newStyle() {
return {
'--new-width':this.newWidth
}
}
},
methods:{
chooseSelect() {
this.zySelect = 'bottom-up'
}
}
// css
.zy-select {
width: var(--new-width);
}
.box {
height: 30px;
border: 1px solid #39cd81;
border-radius: 5px;
position: relative;
}
.zy-input {
position: absolute;
top: 0;
left: 2%;
width: 60%;
height: 90%;
border: 0;
outline: none;
}
.bottom {
position: absolute;
right: 20px;
top: 39%;
}
.bottom-up {
position: absolute;
right: 20px;
top: 64%;
transform: rotateX(180deg);
}