vue2.x实现视频遮罩层镂空，不影响视频播放

1.页面效果

前端实现视频框选，背景带遮罩层，中间镂空，采用自定义组件方式。页面效果如下：

无遮罩层的时候：

有遮罩层的时候

2.解决思路

我的解决思路简单但不是最佳

我的解决思路是先选择外框作为父元素，里面的1-4作为阴影子元素，使用absolute定位阴影

3.主要代码

1.组件代码

<template><div v-show="show" ref="parent" class="shadow-box"><div v-for="n in 4" :ref="`shadow${n}`" :key="n" :class="`shadow${n}`" /></div>
</template><script>
export default {name: 'Shadow',props: {parentWidth: { // 父组件宽度type: Number,default: 768},parentHeight: { // 父组件高度type: Number,default: 432},childrenWidth: { // 子组件宽度type: Number,default: 0},childrenHeight: { // 子组件高度type: Number,default: 0},childrenX: { // 子组件X坐标type: Number,default: 0},childrenY: { // 子组件Y坐标type: Number,default: 0},borderWidth: { // 子组件边界宽度type: Number,default: 2},show: { // 是否显示type: Boolean,default: false}},watch: {'parentWidth': {handler(newName, oldName) {this.$nextTick(() => {this.$refs.parent.style.setProperty('--parentWidth', newName + 'px')})},immediate: true},'parentHeight': {handler(newName, oldName) {this.$nextTick(() => {this.$refs.parent.style.setProperty('--parentHeight', newName + 'px')})},immediate: true},'childrenWidth': {handler(newName, oldName) {this.setParams()},immediate: true},'childrenHeight': {handler(newName, oldName) {this.setParams()},immediate: true},'childrenX': {handler(newName, oldName) {this.setParams()},immediate: true},'childrenY': {handler(newName, oldName) {this.setParams()},immediate: true}},methods: {// 设置参数setParams() {this.$nextTick(() => {this.$refs[`shadow${1}`][0].style.setProperty('--shadow1Width', this.childrenX + 'px')this.$refs[`shadow${2}`][0].style.setProperty('--shadow2X', this.childrenX + 'px')this.$refs[`shadow${2}`][0].style.setProperty('--shadow2Width', (this.childrenWidth + this.borderWidth * 2) + 'px')this.$refs[`shadow${2}`][0].style.setProperty('--shadow2Height', this.childrenY + 'px')this.$refs[`shadow${3}`][0].style.setProperty('--shadow3X', (this.childrenX + this.childrenWidth + this.borderWidth * 2) + 'px')this.$refs[`shadow${3}`][0].style.setProperty('--shadow3Width', (this.parentWidth - (this.childrenX + this.childrenWidth + this.borderWidth * 2)) + 'px')this.$refs[`shadow${4}`][0].style.setProperty('--shadow4X', this.childrenX + 'px')this.$refs[`shadow${4}`][0].style.setProperty('--shadow4Y', (this.childrenY + this.childrenHeight + this.borderWidth * 2) + 'px')this.$refs[`shadow${4}`][0].style.setProperty('--shadow4Width', (this.childrenWidth + this.borderWidth * 2) + 'px')this.$refs[`shadow${4}`][0].style.setProperty('--shadow4Height', (this.parentHeight - (this.childrenY + this.childrenHeight + this.borderWidth * 2)) + 'px')})}}
}
</script><style lang="scss" scoped>
.shadow-box {position: absolute;--parentWidth: 768px;--parentHeight: 432px;--shadow1Width: 0px;--shadow2X: 0px;--shadow2Width: 0px;--shadow2Height: 0px;--shadow3X: 0px;--shadow3Width: 768px;--shadow4X: 0px;--shadow4Y: 0px;--shadow4Width: 0px;--shadow4Height: 432px;--shadowColor: rgba(221, 221, 221, 0.6);width: var(--parentWidth);height: var(--parentHeight);z-index: 100;.shadow1 {position: absolute;left: 0;top: 0;width: var(--shadow1Width);height: var(--parentHeight);background-color: var(--shadowColor);}.shadow2 {position: absolute;left: var(--shadow2X);top: 0;width: var(--shadow2Width);height: var(--shadow2Height);background-color: var(--shadowColor);}.shadow3 {position: absolute;left: var(--shadow3X);top: 0;width: var(--shadow3Width);height: var(--parentHeight);background-color: var(--shadowColor);}.shadow4 {position: absolute;left: var(--shadow4X);top: var(--shadow4Y);width: var(--shadow4Width);height: var(--shadow4Height);background-color: var(--shadowColor);}
}
</style>

2.引用组件

<Shadowv-for="(item, index) in areaList"v-show="currentPaintIndex === index && isStartPainting":key="`shadow${index}`":parent-width="768":parent-height="432":border-width="2":children-x="item.X":children-y="item.Y":children-width="item.W":children-height="item.H"/>

有什么疑问评论区或者私信讨论交流，我也是前端新手。

vue2.x实现视频遮罩层镂空，不影响视频播放相关推荐

浏览器中遮罩层镂空效果的多种实现方法
前端开发中我们有时候会做到页面遮罩层镂空的效果,那什么是页面遮罩层镂空效果,我们先来看一看下图的这个效果.下图是我昨天在实际工作中完成的页面效果: 做这个效果的时候有以下注意的地方: 1.兼容IE7及 ...
css中间镂空,css3如何实现遮罩层镂空效果 css3遮罩层镂空效果的多种实现方法
css3如何实现遮罩层镂空效果?本篇文章小编给大家分享一下css3遮罩层镂空效果的多种实现方法,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 先看看效果 [ 方法一:截图模 ...
html 将图片镂空,遮罩层镂空效果的多种实现方法
先看看效果 [ 方法一:截图模拟实现 ] 原理:先截一张相同位置的图片,创建一个遮罩层,然后把图片定位在相应的位置上. 优点:原理简单:兼容性好,可以兼容到IE6.IE7:可以同时实现镂空多个. 缺点 ...
jquery点击弹出播放视频并显示遮罩层
最近在做视频播放的时候,发现用jquery的播放视频可以很好的实现我所需要的效果.在之前请把插件引用进来,废话不多说,代码如下: <!DOCTYPE html> <html>& ...
Android 镂空效果的遮罩层实现
要实现的效果是在当前页面上,显示半透明的遮罩层,在任意位置实现镂空的圆形,镂空的位置能看到下面的页面,镂空的位置跟随一张提示文字的图片,效果如下: 实现步骤: 绘制半透明的背景: 绘制圆形绘制文字图 ...
前端遮罩层实现_cocos creator--游戏开奖功能组件《刮刮卡》特效实现
一. 需求分析 [1]实现手指触摸刮开效果:[2]优化:判断刮开与否(能否正常看到奖项). 二. 游戏场景可视化编辑三. 手指触摸刮刮卡动态刮开效果的实现 Mask为反向遮罩节点,必须确保大小和位置 ...
地图选择区域遮罩层自定义控件实现
项目中用到了地图遮罩层,显示被用户选中的区域.在网上发现了不错的自定义控件,记录下来以备后用.来源:http://blog.csdn.net/desireyaoo/article/details/53 ...
天地图添加遮罩层效果
天地图引入就不写了,这里写引入最基本的地图后,怎样变成遮罩效果 1,思路:外部是蓝色遮罩层,中间镂空为新乡市地图.通过天地图demo修改为自己想要的效果. 2,阿里云下载新乡市四周边界坐标对数据进 ...
css3全屏遮罩层,css3 引导遮罩层
https://blog.csdn.net/tangtang5963/article/details/51276560 要实现遮罩层和部分区域高亮显示,这里的思路是应用了元素的border属性,将元素 ...

vue2.x实现视频遮罩层镂空，不影响视频播放

1.页面效果

2.解决思路

3.主要代码

vue2.x实现视频遮罩层镂空，不影响视频播放相关推荐

最新文章

热门文章