使用less或者scss 定义css变量,点击触发方法 修改css变量
举个例子,如果有个div 本身是left:100px,当你点击按钮后,想把left变成400,这样我们就可以用css变量的方法来实现。
下面是代码
<div class="move" ref="myButton">移动我</div>
<el-button type="primary" icon="el-icon-search" class="search_button" @click="clickMove">点击移动</el-button>
<!-- 使用css变量必须安装less或者scss -->
<style lang='less' scoped>
.move {
--width: 100px;
--hight: 100px;
--left: 100px;
background-color: #000;
width: var(--width);
height: var(--hight);
left: var(--left);
position: relative;
transition: 1s;
}
</style>
clickMove() {
const lety = 400
this.$refs.myButton.style.setProperty('--left', `${lety}px`);
this.$refs.myButton.style.setProperty('--width', `${lety}px`);
}