el-button type=primary click=search icon=el-icon-search circleel-button在鼠标移上去的时候变成el-button type=primary click=search icon=el-icon-search round搜索el-button怎么写
可以通过绑定鼠标移入和移出事件来实现按钮样式的变化,代码如下:
<template>
<el-button type="primary" :circle="isCircle" :round="isRound"
@mouseenter="isCircle = false; isRound = true"
@mouseleave="isCircle = true; isRound = false"
@click="search"
icon="el-icon-search">
{{ buttonText }}
</el-button>
</template>
<script>
export default {
data() {
return {
isCircle: true,
isRound: false,
buttonText: ' '
}
},
methods: {
search() {
// 搜索操作
}
}
}
</script>
在上面的代码中,我们通过isCircle和isRound两个变量来控制按钮的样式,初始时isCircle为true,isRound为false,按钮为圆形样式。当鼠标进入按钮时,isCircle变为false,isRound变为true,按钮变成方形样式,同时修改按钮显示的文字为“搜索”;当鼠标离开按钮时,isCircle变回true,isRound变回false,按钮恢复圆形样式,同时修改按钮显示的文字为空格,这样可以保持按钮的大小不变。@click绑定了search方法,用于实现搜索操作
原文地址: https://www.cveoy.top/t/topic/g899 著作权归作者所有。请勿转载和采集!