阅读:4379回复:1
vue 图片放大和缩小的方式一、使用viewerjs 文档:https://github.com/faimaklg/vue-viewerjs 1、安装命令: npm install v-viewer --save 【可能装不上】 2、全局引入 import Viewer from 'v-viewer' import 'viewerjs/dist/viewer.css' Vue.use(Viewer) Viewer.setDefaults({ Options: { 'inline': true, // 启用 inline 模式 'button': true, // 显示右上角关闭按钮 'navbar': true, // 显示缩略图导航 'title': true, // 显示当前图片的标题 'toolbar': true, // 显示工具栏 'tooltip': true, // 显示缩放百分比 'movable': true, // 图片是否可移动 'zoomable': true, // 图片是否可缩放 'rotatable': true, // 图片是否可旋转 'scalable': true, // 图片是否可翻转 'transition': true, // 使用 CSS3 过度 'fullscreen': true, // 播放时是否全屏 'keyboard': true, // 是否支持键盘 'url': 'data-source' // 设置大图片的 url } }) 3、页面中使用 <viewer> <img :src="record.PreviewFileUrl" style="width:80px;height:45px;" alt="" title="点击放大" /> </viewer> |
|
沙发#
发布于:2021-11-03 15:58
第二种:vue-photo-preview使用介绍 1、先安装依赖 npm install vue-photo-preview --save 2、main.js内引用并注册调用 //main.js import preview from 'vue-photo-preview' import 'vue-photo-preview/dist/skin.css' Vue.use(preview) 3、代码中使用xxx.vue <template> <div class="content"> <section> <h1>preview图片预览插件</h1> <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"> </section> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '图片1', preview: '1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '图片2', preview: '1' } ] } }, } </script> 3、代码中使用xxx.vue <template> <div class="content"> <section> <h1>preview图片预览插件</h1> <img v-for="src in imgs" :src="src.url" :key="src.title" :preview="src.preview" :preview-text="src.title"> </section> </div> </template> <script> export default { data () { return { imgs: [ { url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=85690711,3884201894&fm=27&gp=0.jpg', title: '图片1', preview: '1' }, { url: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3564877025,796183547&fm=27&gp=0.jpg', title: '图片2', preview: '1' } ] } }, } </script> option配置请查看 http://photoswipe.com/documentation/options.html |
|