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

最新推荐文章于 2024-06-07 13:51:40 发布

原创最新推荐文章于 2024-06-07 13:51:40 发布 · 1.3k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #v-html #图片 #放大 #sync

vue 专栏收录该内容

53 篇文章

订阅专栏

本文介绍了如何使用Vue编写的PicturePreview组件，展示图片并允许用户通过点击关闭。组件接受src和可见状态作为props，并提供了自定义的点击事件处理。

在这里插入图片描述

封装组件 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>