🐛(component): 修复layer title闪烁抖动问题,待商榷
This commit is contained in:
parent
7d8798be8e
commit
33ad94f2b7
@ -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>
|
||||
|
@ -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 * {
|
||||
|
@ -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));
|
||||
|
Loading…
Reference in New Issue
Block a user