珠海高端网站建设报价,网站 劣势,济宁网站建设是什么意思,北京高端网站建设工作效果图 如何让图片放大#xff0c;大多数的UI组件都带有这种功能#xff0c;今天给大家介绍的这个插件除了放大之外#xff0c;还可以旋转、移动、翻转、旋转、二次放大#xff08;全屏#xff09; 实现
npm i v-viewer -Smain.js 中引入
import viewerjs/dist/viewer.c…效果图 如何让图片放大大多数的UI组件都带有这种功能今天给大家介绍的这个插件除了放大之外还可以旋转、移动、翻转、旋转、二次放大全屏 实现
npm i v-viewer -Smain.js 中引入
import viewerjs/dist/viewer.css
import Viewer from v-viewer
Vue.use(Viewer)
//配置项
Viewer.setDefaults({
zIndexInline:9999
})div
div
图片展示
/div
img classimg v-for(src,index) in srclist :src src.src :titlesrc.name :keyindex
/div
/// 预览学法有两种
图片预览1
div v-viewer
img classimg v-for(src,index) in srclist :src src.src altsrc.name :titlesrc.name :keyindex/
/div
图片预览2
viewer :imagessrclist
img classimg v-for(src,index) in srclist :srcindex 1 ? src.src: :keyindex/
/viewer配置参数 完整代码
templatedivel-button sizemini typesuccess clickdrawertrue插件说明/el-buttonbr/divdiv图片展示/divimg classimg v-for(src,index) in srclist :src src.src :titlesrc.name :keyindex/div图片预览1div v-viewerimg classimg v-for(src,index) in srclist :src src.src altsrc.name :titlesrc.name :keyindex/ /div图片预览2viewer :imagessrclistimg classimg v-for(src,index) in srclist :srcindex 1 ? src.src: :keyindex/ /viewerel-drawer titlev-view图片预览说明 :visible.syncdrawer :directiondirection :before-closehandleClosediv stylefont-size: 1.2em;divspannpm i v-viewer -S/span/divdivspanimport viewerjs/dist/viewer.cssimport Viewer from v-viewerVue.use(Viewer)//配置项Viewer.setDefaults({zIndexInline:9999})/span/divdivviewer :imagessrclistimg classdrawerimg v-for(src,index) in srclist :src index 2 ?src.src: :keyindex/ /viewer/div/div/el-drawer/div
/template
script
export default {data () {return {drawer: false,direction: rtl,srclist: [ { src:require(/assets/images/v-view/1703141062647.jpg), name: 1703141062647 },{ src:require(/assets/images/v-view/1703141019383.jpg), name: 1703141019383 },{ src:require(/assets/images/v-view/v2-312ebd744afbca11e33b5fe1de682f2b_b.jpg), name: v2-312ebd744afbca11e33b5fe1de682f2b_b },{ src:require(/assets/images/v-view/v2-c05ddcf1bd2d5c214b9353f523277917_b.jpg), name: v2-c05ddcf1bd2d5c214b9353f523277917_b },{ src:require(/assets/images/v-view/v2-c631a7b4de3f4dceea2dc7708940b377_b.jpg), name: v2-c631a7b4de3f4dceea2dc7708940b377_b },{ src:require(/assets/images/v-view/v2-1573b3d23e54e19d042db7f3ce769770_b.jpg), name: v2-1573b3d23e54e19d042db7f3ce769770_b },],}},methods: {handleClose(done) {this.$confirm(确认关闭).then(_ {done();}).catch(_ {});}}
}
/script
style scoped
.img { width: 300px; height: 200px; margin: 5px; }
.drawerimg { width: 100%; height: 300px; }
/style
