vue v-html新增点击图片放大预览功能组件

蔚落 2023-01-13 01:44 275阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]

## 封装组件 PicturePreview ##

<template>
        <div v-if="visible" class="preview-container" @click.stop="previewClick($event)">
            <span class="preview-close" @click.stop="closeClick"></span>
            <img class="preview-img" :src="src" />
        </div>
    </template>
    
    <script lang="ts"> import { Component, Prop, Watch, Vue } from 'vue-property-decorator'; @Component({ name: 'PicturePreview'}) export default class extends Vue { @Prop({ default: '' }) private src!: string; //地址 @Prop({ default: false }) private visible!: boolean; //显示状态 @Prop({ default: false }) private closeOnClickModal!: boolean; //是否可以通过点击背景关闭 //按钮点击 private closeClick() { this.closeView(); } //视窗点击 private previewClick(e: any) { if (this.closeOnClickModal) { //如果点击的元素是preview-container if (Array.prototype.includes.call(e.target.classList, 'preview-container')) { this.closeView(); } } } //关闭图片查看 private closeView() { this.$emit('update:visible', false); } } </script>
    
    <style lang="scss" scoped> .preview-container { display: flex; align-items: center; justify-content: center; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 999; overflow: hidden; background-color: rgba(#000, 0.5); .preview-img { max-width: 100%; max-height: 100%; } .preview-close { position: absolute; right: 0; top: 0; width: 32px; height: 32px; background-color: rgba(#000, 0.5); &:hover { background-color: rgba(#000, 0.8); cursor: pointer; } &::before, &::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0; height: 60%; border-right: 1px solid #fff; font-size: 0; } &::before { transform: translate(-50%, -50%) rotate(-45deg); } &::after { transform: translate(-50%, -50%) rotate(45deg); } } } </style>

## 组件应用 ##

<template>
        <div class="document-detail">
            <div class="document-content" v-html="content" @click="previewPicture($event)"></div>
            <picture-preview :visible.sync="picturePreview.visible" :src="picturePreview.src" />
        </div>
    </template>
    
    <script lang="ts"> import { Component, Watch, Prop, Vue } from 'vue-property-decorator'; import PicturePreview from '@/components/picture-preview.vue'; @Component({ name: 'DocumentDetail', components: { PicturePreview, }, }) export default class extends Vue { //文档内容 private content:string = ` <div> <p>欣赏美丽的风景</p> <img src="https://hellorfimg.zcool.cn/provider_image/large/2239402436.jpg" /> <br /> <img src="https://hellorfimg.zcool.cn/provider_image/large/2239386213.jpg" /> </div>`; //图片预览配置 private picturePreview: any = { visible: false, src: '', }; //预览图片 private previewPicture(e: any) { if (e.target.tagName == 'IMG') { this.picturePreview.src = e.target.src; this.picturePreview.visible = true; } } } </script>
    
    <style lang="scss" scoped> .document-content { img { max-width: 100%; cursor: zoom-in; } } </style>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpaGVmZWlfY29kZXI_size_16_color_FFFFFF_t_70]: /images/20221022/1f2ef9f696e34f89b10c0890c2f85404.png