应用 ElementUI image 解决富文本中的图片显示

成果


需要剖析

  • 因为富文本有 v-html 加载的,无奈应用 el-image,然而咱们又须要用到 el-image 组件
  • 须要预览视频富文本中的视频

图片解决办法

imageUrl: '',imageUrls: []> el-image 占用<div class="elImage" style="display: none" v-if="imageUrl">    <el-image ref="imageUrl" style="width: 100px; height: 100px;" :src="imageUrl" :preview-src-list="imageUrls"> </el-image></div>bindImagesLayer() {        let that = this;        that.imageUrls = [];        $('.content img').map(function(item) {            that.imageUrls.push($(this).attr('src'));        });        $('body').on('click', '.content img', function() {            let url = $(this).attr('src');            if (!that.imageUrls.includes(url)) {                that.imageUrls.push(url);            }            that.imageUrl = url;            setTimeout(() => {                $('.elImage img').click();            }, 100);        });    }    async created() {    await this.bindImagesLayer();}

.content 为文章内容的 class,获取到其中所有的图片而后再填充到占用的 el-image 中,再手动触发 el-image 的点击事件

视频解决办法

咱们首先创立一个弹框组件,用于解决视频的预览

> 上面的这些变量本人data中注册一下<el-dialog title="" :visible.sync="videoVisible" :append-to-body="true">        <div class="videodDialog" v-if="videoVisible">            <video :src="videoUrl" autoplay controls="controls"></video>        </div></el-dialog>

咱们来解决视频的预览显示,先展现预览图再显示代码

video 的html构造如下

<div class="video">            <video controls="controls" width="600" height="150" data-mce-fragment="1">                <source src="https://trmk-cdn.teachingrecord.com/uploads/20201028/a7c8a18563a1b577537bef7fc25c3de2.mp4" type="video/mp4">            </video>            <div class="video-mask">                <span class="video-icon"></span>            </div>        </div>        

已知html构造,咱们来创立一下css

>video.scssvideo {max-width: 100%;margin: 0px auto;cursor: pointer;

}

.video {    position: relative;    width: 320px;    .video-mask {        position: absolute;        top: 0;        width: 100%;        height: 100%;        cursor: pointer;        .video-icon {            content: '';            position: absolute;            left: 50%;            top: 50%;            display: block;            transform: translate(-50%, -50%) scale(1.5);            opacity: 1;            transition: all 0.2s;            padding: 14px;            border-radius: 50%;            width: 40px;            height: 40px;            display: flex;            align-items: center;            justify-content: center;            color: #fff;            font-size: 20px;            background-image: url(data:image/png;base64,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);            /* 你的图片*/            background-size: 40px;            z-index: 999;            background-repeat: no-repeat;            background-position: center center;            cursor: pointer;        }    }    .video-mask:hover {        .video-icon {            opacity: 1;            transform: translate(-50%, -50%) scale(2.2);        }    }}.layui-layer-content {    video {        width: 100%;        height: 95%;    }}

上述代码中,咱们的icon是base64转码的

再之须要应用动静js来管制,video的展现

export default function videoContro(video, callback) {    let videoContainer = video.parentNode;    console.log(video);    // 设置poster属性:(非本地视频资源会有跨域截图问题)    video.addEventListener('loadeddata', function(e) {        video.removeAttribute('controls');    });    let videoMask = document.createElement('div');    videoMask.setAttribute('class', 'video-mask');    let videoIcon = document.createElement('span');    videoIcon.setAttribute('class', 'video-icon');    videoMask.appendChild(videoIcon);    videoContainer.appendChild(videoMask);    /**     * 设置播放状态     */    function vidplaySate(e) {        let src = $(video)            .children('source')            .attr('src');        callback(src);    }    videoMask.addEventListener('click', vidplaySate, false);}

vue 调用管制形式

async created() {    await this.bindImagesLayer();    setTimeout(() => {        this.initVideo();    }, 1000);}method() {    ...    /**    * 初始化播放器的一些配置    */    initVideo() {        let videos = document.querySelectorAll('.docHtml video');        let callback = this.videoCallback;        videos.forEach(video => {            videoContro(video, callback);        });    },    videoCallback(src) {        this.videoUrl = src;        this.videoVisible = true;    }}