vue實現(xiàn)圖片預(yù)覽組件封裝與使用
更新時間:2019年07月13日 09:20:30 作者:qq_41624010
這篇文章主要為大家詳細介紹了vue實現(xiàn)圖片預(yù)覽組件封裝與使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下
這是移動端使用vue框架與mint-ui實現(xiàn)的父用子之間的通信實現(xiàn)的圖片預(yù)覽的功能,在父組件中每一張圖片都可以實現(xiàn)圖片放大查看。
子組件
<!--html部分--> <template> <div id="imgEnlarge" ref="imgEnlarge" class="img-bg" @click="imgBgHide" v-show="isShow"> <mt-swipe :auto="0" :show-indicators="false" :continuous=false :defaultIndex="defaultIndex" @change="handleChange"> <mt-swipe-item v-for="(item,index) in imgSrc" :key="index"> <img v-lazy="item" @click="handleClick"/> </mt-swipe-item> </mt-swipe> </div> </template> <!--js部分--> <script> export default{ data(){ return{ scroll:0 } }, props:{ imgSrc:{ type:Array }, defaultIndex:{ type:Number, default:0 }, isShow:{ type:Boolean, deflault:false } }, methods:{ imgBgHide(){ this.$emit("imgBgHide") //向父組件傳遞事件 } , handleClick(e){ e.stopPropagation()//阻止事件冒泡,避免點擊預(yù)覽的圖片穿透遮罩層 }, handleChange(value){ //向父組件傳遞輪播圖索引,解決加載圖片的問題 this.$emit("handleChange",value) } }, watch:{ isShow:{//判斷遮罩是否顯示,顯示時底層頁面無法滾動,隱藏后滾動條回到顯示時的位置 handler(newVal,oldVal){ if(newVal==true){ this.scrolly = document.body.scrollTop; document.body.style.position = "fixed"; }else{ document.body.style.position = "static"; document.body.scrollTop = this.scrolly; // } } } } } </script> <!--樣式部分--> <style scoped> .img-bg { width:100%; height:100%; position:fixed; left:0; top:0; z-index:9999; background:rgba(0,0,0,1); } .img-bg img{ width:auto; height:auto; max-width:100%; max-height:100%; } </style>
父組件
<!--html部分--> <template> <img-view :isShow="showImg" :imgSrc="imgSrc" @imgBgHide="imgBgHide" :deflaultIndex="defaultIndex" @handleChange="handleChange"></img-view> </template> <!--js部分--> <script> //引入子組件 import imgView from '@/components/common/imgEnlarge.vue'; export default { data(){ return{ showImg:false, imgSrc:[], defaultIndex:0 } }, components:{imgView}, mounted(){ this.collectImgSrc() }, methods:{ imgBgHide(){//點擊遮罩層,遮罩層隱藏 this.showImg = false; }, handleChange(value){ this.defaultIndex = value; }, collectImgSrc(){//點擊圖片放大 var _this = this; var src = document.getElementsByTagName("img"); for(var i=0;i<src.length;i++){ _this.imgSrc.push(src[i].getAttribute("src")); src[i].setAttribute("data-index",i); src[i].onclick = function(e){ _this.showImg = true; _this.defaultIndex = parseInt(e.target.getAttribute("data-index"));//設(shè)置初始顯示的輪播圖的索引 } } } } } </script>
在全局樣式global.css里面設(shè)置圖片預(yù)覽居中
/*圖片點擊放大組件中swipe圖片居中*/ #imgEnlarge .mint-swipe-item-wrap > div { visibility:hidden; display:flex; -moz-box-pack:center; -webkit-box-pack:center; justify-content:center; -moz-box-align:center; -webkit-box-align:center; align-items:center; -webkit-align-items:center; } #imgEnlarge .mint-swipe-item-wrap > div.is-active { visibility:visible; display:flex; -moz-box-pack:center; -webkit-box-pack:center; justify-content:center; -moz-box-align:center; -webkit-box-align:center; align-items:center; -webkit-align-items:center; }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
解決vue+webpack項目接口跨域出現(xiàn)的問題
這篇文章主要介紹了解決vue+webpack項目接口跨域出現(xiàn)的問題,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08vue中props賦值給data出現(xiàn)的問題及解決
這篇文章主要介紹了vue中props賦值給data出現(xiàn)的問題及解決,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10VUE Error: getaddrinfo ENOTFOUND localhost
這篇文章主要介紹了VUE Error: getaddrinfo ENOTFOUND localhost,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05