1.png
2.PNG
element ui el-autocomplete组件自定义样式
vue框架交互
@keyup.native="isTrans = true"
添加一个class
<el-autocomplete ref="search" v-model="state" :fetch-suggestions="querySearch" placeholder="" :trigger-on-focus="false" class="input-button" :class="{ trans: isTrans }" :popper-append-to-body="false" @select="handleSelect" @keyup.native="isTrans = true">
<template slot="append">
<el-button type="primary"><span style="margin-right: 10px">搜</span>索</el-button>
</template>
</el-autocomplete>
css样式 主要属性
transition: all 30ms linear;
transform: translate(-525px, -128px)
/deep/.el-input__inner {
width: 495px;
height: 44px;
line-height: 44px;
border-radius: 8px 0 0 8px;
}
.el-input-group__append,
.el-input-group__prepend {
border: 1px solid #2c5be8;
padding: 10px 30px;
border-radius: 0 8px 8px 0;
font-size: 16px;
}
.el-autocomplete {
position: absolute; //移动后不会占用原有位置
top: 210px;
left: 295px;
transition: all 30ms linear;
}
.el-autocomplete.trans {
transform: translate(-145px, -190px);
}
.bszs {
position: absolute;
top: 150px;
left: 540px;
transition: all 30ms linear;
&.trans {
transform: translate(-525px, -128px);
}
}
