- 安装依赖
npm install v-viewer -S
- 全局引入
// 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'
}
})
- 使用
<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>