使用 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.scss
video {
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;
}
}
本文由 邓尘锋 创作,采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外,均为本站原创或翻译,转载前请务必署名
最后编辑时间为: Jun 7, 2021 at 03:41 pm