12_v-html实现图片放大

1. 安装依赖

npm install v-viewer -S

2. 全局引入

// main.js
import Viewer from 'v-viewer';
import 'viewerjs/dist/viewer.css';
Vue.use(Viewer)
Viewer.setDefaults({
  Options: {
    'inline': false,
    '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': 'src'
  }
})

3. 使用

<template>
  <Modal class="view-modal" v-model="previewPop.isShown" width="900" footer-hide>
    <p slot="header">{{ previewPop.title }}</p>
    <div class="view-modal-content" ref="viewer" v-viewer v-html="previewPop.content"></div>
  </Modal>
</template>
<script>
export default {
  data: {
    return {
      previewPop: {}
    }
  },
  methods: {
    handleRuleView(rowData) {
      const { previewPop } = this;
      previewPop.title = rowData.title;
            
      const content = this.setContent(rowData);
            
      previewPop.content = content;
      setTimeout(() => {   //设置延迟执行
         let viewer = this.$refs.viewer
         viewer.$viewer.update();
      }, 0)

      previewPop.isShown = true;
    },
  }
}
</script>