基于vue 图片拖拽放大缩小查看组件

A Vue component to picture view

通过npm install vue-picviewer -save 安装到相应的项目下或者yarn add vue-picviewer

import Picview from 'vue-picviewer'; import Css from 'vue-picviewer/dist/vue-picviewer.min.css' export default { name: 'app', components:{ Picview }, } Demo

<template> <div id="app"> <div class="a"> <Picview :imgdata="imgdata1" width="100px;" /> </div> <div class="a"> <Picview :imgdata="imgdata2" :props="{thumbnail:'src',original:'src'}" width="200px;" /> </div> </div> </template> import Picview from "vue-picviewer"; import Css from "vue-picviewer/dist/vue-picviewer.min.css"; export default { name: "App", components: { Picview }, data() { return { imgdata1: [ "https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437", "https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437" ], imgdata2: [ { src: "https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437" }, { src: "https://www.gravatar.com/avatar/40206d98ff6e85da457c341e4a4ea437" } ] }; } }; </script> <style> #app { font-family: "Avenir", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style> Attributes