el-image图片不要预览,点击按钮直接展示
时间: 2023-07-06 10:25:48 浏览: 121
要实现这个功能,你可以使用 `el-button` 和 `el-dialog` 组件。首先,在 `el-button` 上绑定一个点击事件,然后在点击事件中打开一个 `el-dialog` 弹窗,将图片放在弹窗中展示。具体实现代码如下:
```html
<template>
<div>
<el-button type="primary" @click="showImage">点击展示图片</el-button>
<el-dialog :visible.sync="dialogVisible">
<img src="your-image-url" alt="your-image-description">
</el-dialog>
</div>
</template>
<script>
export default {
data() {
return {
dialogVisible: false
}
},
methods: {
showImage() {
this.dialogVisible = true
}
}
}
</script>
```
在上面的代码中,我们使用 `el-button` 组件创建了一个按钮,然后在点击事件中设置 `dialogVisible` 为 `true`,弹出 `el-dialog` 弹窗。在弹窗中我们展示了一张图片,你可以将 `src` 属性设置为你想要展示的图片的 URL,将 `alt` 属性设置为你想要展示的图片的描述文字。
阅读全文