美文网首页Vuevue
Vue图片预览

Vue图片预览

作者: 24KBING | 来源:发表于2019-11-05 10:54 被阅读0次
    picture

    v-viewer

    用于图片浏览的 Vue 组件,支持旋转、缩放、翻转等操作,基于 viewer.js

    演示示例

    安装

    npm install v-viewer
    

    手动引入样式文件

    import 'viewerjs/dist/viewer.css'
    

    使用

    引入 v-viewer 及必需的 css 样式,并使用 Vue.use() 注册插件,之后即可使用。

    <template>
      <div id="app">
        <!-- directive -->
        <div class="images" v-viewer>
          <img src="1.jpg">
          <img src="2.jpg">
          ...
        </div>
        <!-- component -->
        <viewer :images="images">
          <img v-for="src in images" :src="src" :key="src">
        </viewer>
      </div>
    </template>
    <script>
      import 'viewerjs/dist/viewer.css'
      import Viewer from 'v-viewer'
      import Vue from 'vue'
      Vue.use(Viewer)
      export default {
        data() {
          images: ['1.jpg', '2.jpg']
        }
      }
    </script>
    

    以指令形式使用

    只需要将 v-viewer 指令添加到任意元素即可,该元素下的所有 img 元素都会被 viewer 自动处理。

    你可以像这样传入配置项: v-viewer="{inline: true}"

    如果有必要,可以先用选择器查找到目标元素,然后可以用 el.\$viewer 来获取 viewer 实例。

    <template>
      <div id="app">
        <div class="images" v-viewer="{movable: false}">
          <img v-for="src in images" :src="src" :key="src">
        </div>
        <button type="button" @click="show">Show</button>
      </div>
    </template>
    <script>
      import 'viewerjs/dist/viewer.css'
      import Viewer from 'v-viewer'
      import Vue from 'vue'
      Vue.use(Viewer)
      export default {
        data() {
          images: ['1.jpg', '2.jpg']
        },
        methods: {
          show () {
            const viewer = this.$el.querySelector('.images').$viewer
            viewer.show()
          }
        }
      }
    </script>
    

    指令修饰器

    添加修饰器后,viewer 的创建只会在元素绑定指令时执行一次。
    如果你确定元素内的图片不会再发生变化,使用它可以避免不必要的重建动作。

    <div class="images" v-viewer.static="{inline: true}">
      <img v-for="src in images" :src="src" :key="src">
    </div>
    

    以组件形式使用

    你也可以单独引入全屏组件并局部注册它。

    使用作用域插槽来定制你的图片展示方式。

    监听 inited 事件来获取 viewer 实例,或者也可以用 this.refs.xxx.\$viewer 这种方法。

    <template>
      <div id="app">
        <viewer :options="options" :images="images"
                @inited="inited"
                class="viewer" ref="viewer"
        >
          <template scope="scope">
            <img v-for="src in scope.images" :src="src" :key="src">
            {{scope.options}}
          </template>
        </viewer>
        <button type="button" @click="show">Show</button>
      </div>
    </template>
    <script>
      import 'viewerjs/dist/viewer.css'
      import Viewer from "v-viewer/src/component.vue"
      export default {
        components: {
          Viewer
        },
        data() {
          images: ['1.jpg', '2.jpg']
        },
        methods: {
          inited (viewer) {
            this.$viewer = viewer
          },
          show () {
            this.$viewer.show()
          }
        }
      }
    </script>
    

    配置项 & 方法

    请参考viewer.js.

    插件配置项

    ** name**

    • Type: String
    • Default: viewer

    如果你需要避免重名冲突,可以像这样引入:

    <template>
      <div id="app">
        <div class="images" v-vuer="{movable: false}">
          <img v-for="src in images" :src="src" :key="src">
        </div>
        <button type="button" @click="show">Show</button>
      </div>
    </template>
    <script>
      import 'viewerjs/dist/viewer.css'
      import Vuer from 'v-viewer'
      import Vue from 'vue'
      Vue.use(Vuer, {name: 'vuer'})
      export default {
        data() {
          images: ['1.jpg', '2.jpg']
        },
        methods: {
          show () {
            const vuer = this.$el.querySelector('.images').$vuer
            vuer.show()
          }
        }
      }
    </script>
    

    默认配置项

    • Type: Object
    • Default: undefined
      如果你需要修改 viewer.js 的全局默认配置项,可以像这样引入:
    import Viewer from 'v-viewer'
    import Vue from 'vue'
    Vue.use(Viewer, {
      defaultOptions: {
        zIndex: 9999
      }
    })
    

    你还可以在任何时候像这样修改全局默认配置项:

    import Viewer from 'v-viewer'
    import Vue from 'vue'
    Vue.use(Viewer)
    Viewer.setDefaults({
      zIndexInline: 2017
    })
    

    相关文章

      网友评论

        本文标题:Vue图片预览

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