网站建设方案书模版,会计培训机构排名,南沙建设网站,网站建设的任务规划效果图 如何让图片放大#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
