HLJ
发布于
2021-12-10 10:04:41
点击按钮调用element image-viewer组件实现放大图片功能的vue代码
上一篇文章:
原生js 点击获取当前标签的内容
下一篇文章:
js原生代码禁用键盘enter按键实例
我们在用 element UI
做项目时,当想点击文字或按钮来实现图片放大预览时可以通过以下代码实现
组件里引入 element
的 image-viewer
文件
import ElImageViewer from 'element-ui/packages/image/src/image-viewer'
let prevOverflow = '';
export default {
components: { ElImageViewer },
data() {
return {
showViewer:false,
imageUrl:['http://www.good1230.com/dist/server/images/adsense/1613693385.jpg'],
}
},
methods:{
clickHandler() {
// prevent body scroll
prevOverflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
this.showViewer = true;
},
closeViewer() {
document.body.style.overflow = prevOverflow;
this.showViewer = false;
}
}
};
最后生成于 2022-10-07 22:31:09
上一篇文章:
原生js 点击获取当前标签的内容
下一篇文章: