v3-plus el-button点击按钮切换图片
时间: 2024-10-24 17:12:08 浏览: 20
v3-plus的`el-button`是Element Plus库中的按钮组件,它本身并不直接支持切换图片的功能。但是,你可以通过组合使用Element Plus的`el-image`(图片组件)和一些JavaScript处理来实现这个功能。下面是一个简单的示例:
首先,在HTML部分,你可以将两个`<el-image>`元素包裹在一个`<el-button>`里,并给每个图片添加一个`src`属性:
```html
<template>
<div>
<el-button @click="switchImage">
<el-image :src="currentImage" alt=""></el-image>
</el-button>
<el-image :src="otherImage" style="display: none;"></el-image>
</div>
</template>
```
然后,在Vue组件的script部分,设置`currentImage`和`otherImage`作为变量,并定义`switchImage`方法来切换这两个属性的值:
```javascript
<script setup>
import { ref } from 'vue';
const currentImage = ref('path/to/current/image.jpg');
const otherImage = ref('path/to/other/image.jpg');
function switchImage() {
if (currentImage.value === otherImage.value) {
currentImage.value = 'path/to/new/image.jpg';
} else {
currentImage.value = otherImage.value;
}
}
</script>
```
当用户点击`el-button`时,`switchImage`会被触发,图片会切换到另一个预设的路径。
阅读全文