js 覆盖层

最新推荐文章于 2021-06-07 14:54:16 发布

nankiao

最新推荐文章于 2021-06-07 14:54:16 发布

阅读量485

点赞数

分类专栏： js，覆盖层

本文链接：https://blog.csdn.net/nankiao/article/details/77989178

版权

js，覆盖层专栏收录该内容

1 篇文章 0 订阅

订阅专栏

if(self.status.indexOf(thisFile.status) != -1){
$("#" + thisFile.id).parent().parent(".oneFile").find(".file-mask").css({"display": "block"});
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show").css({"display": "block"});
if (thisFile.status == -1 ||thisFile.status == 2 || thisFile.status == 3) {
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show p").text("上传中..");
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show img").attr("src", "../../../static/images/uploading.png");
} else if (thisFile.status == 7) {
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show p").text("转码中..");
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show img").attr("src", "../../../static/images/transcoding.png");
} else if (thisFile.status == 0 || thisFile.status == 5 || thisFile.status == 9) {
if(thisFile.status == 0 || thisFile.status == 5){
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show p").text("上传失败");
}else{
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show p").text("转码失败");
}
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show img").attr("src", "../../../static/images/failed.png");
}
}else{
//重绘时清除覆盖
$("#" + thisFile.id).parent().parent(".oneFile").find(".file-mask").css({"display": "none"});
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show").css({"display": "none"});
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show p").text("");
$("#" + thisFile.id).parent().parent(".oneFile").find(".mask-show img").attr("");
}

.res-show .oneFile .file-mask {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
/*background-color: #9c9c9c;*/
z-index: 8;
-moz-opacity: 0.7;
opacity: .70;
border-radius: 3px;;
filter: alpha(opacity=70);
}

.res-show .oneFile .mask-show {
display: none;
position: absolute;
bottom: 50px;
right: 40px;
/*width: 100%;*/
/*background: #CCCCCC;*/
/*height: 49%;*/
/*padding: 8px;*/
z-index: 9;
/*overflow: auto;*/
/*color: #fff;*/
/*text-align: center;*/
}

<div class="oneFile" v-for="fileObj in files">
<div class="file-mask">
<div class="top-operate"><i class="iconfont icon-shanchu" @click="delFiles(fileObj)"></i></div>
</div>
<div class="mask-show">
<img class="mask">
</div>
<div @click="fileDetail(fileObj)" ref="oneFile" :value="fileObj.id">
<resFile :fileObj="fileObj" :id="fileObj.id" @deletes="delFiles" @share="shareFile" ></resFile>
</div>

</div>

<resFile></resFile> 是加载的一个别的组件