🐛(component): 修复layer title闪烁抖动问题,待商榷

This commit is contained in:
0o张不歪o0 2022-06-26 01:07:05 +08:00
parent 7d8798be8e
commit 33ad94f2b7
3 changed files with 12 additions and 20 deletions

View File

@ -18,6 +18,7 @@
class="layui-layer-imgbar"
style="display: block"
v-if="imgList.length > 1 || imgList[index].alt"
:style="{opacity:showLayerImgBar?1:0}"
>
<span class="layui-layer-imgtit">
<span v-if="imgList[index].alt">{{ imgList[index].alt }}</span>
@ -35,7 +36,7 @@ export default {
};
</script>
<script lang="ts" setup>
import { watch, ref } from "vue";
import { watch, ref, onMounted, nextTick } from "vue";
export interface LayPhotoProps {
imgList: { src: string; alt: string }[];
@ -62,4 +63,11 @@ const changeIndex = (step: number) => {
}
index.value = next;
};
const showLayerImgBar=ref(false)
onMounted(()=>{
nextTick(()=>{
showLayerImgBar.value=true
})
})
</script>

View File

@ -1148,7 +1148,9 @@ html #layuicss-layer {
background-color: rgba(2, 0, 0, .35);
color: #fff;
overflow: hidden;
font-size: 0
font-size: 0;
opacity: 0;
transition: all 1s ease-in-out;
}
.layui-layer-imgtit * {

View File

@ -238,27 +238,9 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) {
return isClose ? `${prefix}-${suffix}-close` : `${prefix}-${suffix}`;
}
//图片预加载
export function loadImage(url: string, callback: Function, error: any) {
let img = new Image();
img.src = url;
if (img.complete) {
return callback(img);
}
img.onload = function () {
img.onload = null;
callback(img);
};
img.onerror = function (e) {
img.onerror = null;
error(e);
};
}
export async function calculatePhotosArea(url: string, options: object) {
let img = new Image();
img.src = url;
return new Promise((resolve, reject) => {
if (img.complete) {
resolve(area(img));