美文网首页
vue v-html 图片 放大 预览【3秒解决,直接跟我复制】

vue v-html 图片 放大 预览【3秒解决,直接跟我复制】

作者: 顺小星 | 来源:发表于2022-07-11 15:03 被阅读0次

    1、安装v-viewer
    npm install v-viewer --save
    2、main.js中引入并注册

    import 'viewerjs/dist/viewer.css'
    import Viewer from 'v-viewer'
    Vue.use(Viewer)
    Viewer.setDefaults({
      Options: {
        'inline': true,
        'button': true,
        'navbar': true,
        'title': true,
        'toolbar': true,
        'tooltip': true,
        'movable': true,
        'zoomable': true,
        'rotatable': true,
        'scalable': true,
        'transition': true,
        'fullscreen': true,
        'keyboard': true,
        'url': 'data-source'
      }
    })
    

    3、在v-html绑定的dom上,加上v-viewer

    image.png
    效果图:
    image.png
    祝各位工作顺利~

    相关文章

      网友评论

          本文标题:vue v-html 图片 放大 预览【3秒解决,直接跟我复制】

          本文链接:https://www.haomeiwen.com/subject/epsnbrtx.html