vue 放大圖片檢視,縮放等v-viewer
阿新 • • 發佈:2021-10-28
第一步下載
npm install v-viewer --save
第二步,在頁面中引入(我這裡是直接將下載下來的檔案從node_modules提取出來了,在assets)
import Viewer from "@/assets/js/viewer.min.js";
import '@/assets/css/viewer.min.css';
第三步就是使用了,關於使用的方法有很多,這裡說一下我遇見的問題。這個檢視只能用在img標籤上,其他標籤不顯示圖片
這裡先放一下參考的網址:https://www.cnblogs.com/javalisong/p/13390300.html
這裡有引數使用說明也
我的使用
<template> <div> 測試頁面 <img :id ="url" :data-original='url' src="@/assets/404_images/404.png" @click="aaa(url)" > <img :id ="url2" :data-original='url2' src="@/assets/404_images/404.png" @click="aaa(url2)" > </div> </template> <script> import Viewer from "@/assets/js/viewer.min.js"; import '@/assets/css/viewer.min.css'; export default { name: "marquee-up", data() { return { url:'https://static01.imgkr.com/temp/c4bc308d285a4058ac2b5c3ce15a39e5.png', url2:'http://192.168.0.16:8000/media/photo/df_%E5%9B%BE%E7%89%87%E6%B5%8B1%E8%AF%95.jpg', } }, mounted() { }, methods: { aaa(item) { var viewer = new Viewer(document.getElementById(item), { url: 'data-original', navbar:false, show: function (){ viewer.update(); }, hide:function(){ //在圖片消失的時候銷燬viewer viewer.destroy() } }); viewer.show() } }, components:{ }, destroyed() { } }; </script> <style lang="scss" scoped> $TItemHeight:58px; .itemTableBox{ width: 1474px; height: 330px; background: #ff0; margin: 20px auto; padding-top: 1px; overflow: hidden; .TItem{ width: 100%; height: $TItemHeight; background: rgba(255, 0, 0, 0.2); margin-top: 8px; .TI_default{ height: $TItemHeight; float: left; font-size: 24px; font-weight: 400; line-height: $TItemHeight; text-align: center; color: #fff; } .TI_Dwidth{ width: 200px; @extend .TI_default; } .TI_info{ width: 374px; @extend .TI_default; } .TI_UPTime{ width: 300px; @extend .TI_default; } } .animate-up { transition: all 0.5s ease-in-out; transform: translateY(-66px); } } .box{ width: 100px; line-height: 100px; font-size: 30px; color: #f00; background: #ff0; } </style>