HLJ 发布于
2021-12-10 10:04:41

点击按钮调用element image-viewer组件实现放大图片功能的vue代码

我们在用 element UI 做项目时,当想点击文字或按钮来实现图片放大预览时可以通过以下代码实现

组件里引入 elementimage-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;
    }
  }
};
当前文章内容为原创转载请注明出处:http://www.good1230.com/detail/2021-12-10/570.html
最后生成于 2022-10-07 22:27:52