vue如何让一个div占满全屏_一个基于vue的图片查看器组件

推荐一个适用于后台管理系统、网站等的图片查看器。

demo在线链接: duo-image-viewer

支持以下功能：

1.缩放：

2.旋转

3.拖拽

4.全屏

技术栈：vue

如何使用：

1.安装依赖

npm i duo-image-viewer --save  // cnpm i duo-image-viewer --save

2.引入并注册组件

找到vue项目中的main.js 文件并加入如下代码：

import duoImageViewer from 'duo-image-viewer' // 引入组件
 
Vue.use(duoImageViewer) // 注册组件

3.在页面中使用

<template>
  <div>
    <button @click="handleOpen">打开查看器</button>
    <duo-image-viewer 
      :src="src" 
      :srcList="srcList" 
      @close="handleClose" 
      :showViewer="showViewer"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      src: {
        name: '',
        url: "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg"
      },
      srcList: [
        "https://baidu.com/pictures/2020-09-08/1599535213868-GDJJZizFVtepBxlXpq.jpg",
        "https://baidu.com/pictures/2020-09-08/1599535221238-tQfrTrrwOLSdhtiVBY.jpg",
      ],
      showViewer: false,
    };
  },
  methods: {
    handleOpen() {
      this.showViewer = !this.showViewer
    },
    handleClose() {
      this.showViewer = false
    }
  }
};
</script>

其中showViewer控制显示隐藏，src表示当前展示的图片，srcList表示要展示图片列表

GitHub地址：duofuni/duo-image-viewer

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/weixin_30219613/article/details/112205281
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2021-05-28 22:31:03
阅读 ( 608 )
分类：前端

vue如何让一个div占满全屏_一个基于vue的图片查看器组件

1.安装依赖

2.引入并注册组件

3.在页面中使用

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看