這是移動(dòng)端使用vue框架與mint-ui實(shí)現(xiàn)的父用子之間的通信實(shí)現(xiàn)的圖片預(yù)覽的功能，在父組件中每一張圖片都可以實(shí)現(xiàn)圖片放大查看。
成都創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：成都網(wǎng)站建設(shè)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的東莞網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！
子組件
父組件
在全局樣式global.css里面設(shè)置圖片預(yù)覽居中
/*圖片點(diǎn)擊放大組件中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;
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目：vue實(shí)現(xiàn)圖片預(yù)覽組件封裝與使用
當(dāng)前URL：
http://weahome.cn/article/podejp.html
重慶分公司
重慶分公司
