可以通过绑定鼠标移入和移出事件来实现按钮样式的变化,代码如下:

<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>

在上面的代码中,我们通过isCircleisRound两个变量来控制按钮的样式,初始时isCircletrueisRoundfalse,按钮为圆形样式。当鼠标进入按钮时,isCircle变为falseisRound变为true,按钮变成方形样式,同时修改按钮显示的文字为“搜索”;当鼠标离开按钮时,isCircle变回trueisRound变回false,按钮恢复圆形样式,同时修改按钮显示的文字为空格,这样可以保持按钮的大小不变。@click绑定了search方法,用于实现搜索操作

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怎么写

原文地址: https://www.cveoy.top/t/topic/g899 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录