🐛: layer 类型
This commit is contained in:
parent
a939c48b79
commit
04dd4ab102
@ -45,13 +45,17 @@ const emit = defineEmits<InputEmits>();
|
||||
|
||||
const { t } = useI18n();
|
||||
const slots = useSlots();
|
||||
const currentValue = ref<string>(String(props.modelValue == null ? '' : props.modelValue));
|
||||
const currentValue = ref<string>(
|
||||
String(props.modelValue == null ? "" : props.modelValue)
|
||||
);
|
||||
const hasContent = computed(() => (props.modelValue as string)?.length > 0);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
currentValue.value = String(props.modelValue == null ? '' : props.modelValue);
|
||||
currentValue.value = String(
|
||||
props.modelValue == null ? "" : props.modelValue
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
|
@ -17,7 +17,7 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, ref } from "vue";
|
||||
import { nextTick, onMounted, ref, shallowRef } from "vue";
|
||||
import CloseBtnVue from "./CloseBtn.vue";
|
||||
|
||||
export interface LayNotifyProps {
|
||||
@ -35,7 +35,7 @@ const emit = defineEmits(["close"]);
|
||||
const close = () => {
|
||||
emit("close");
|
||||
};
|
||||
function addClass(obj: { className: any }, cls: string) {
|
||||
function addClass(obj: HTMLElement, cls: string) {
|
||||
//获取 class 内容.
|
||||
let obj_class = obj.className,
|
||||
//判断获取到的 class 是否为空, 如果不为空在前面加个'空格'.
|
||||
@ -44,19 +44,17 @@ function addClass(obj: { className: any }, cls: string) {
|
||||
obj.className = added; //替换原来的 class.
|
||||
}
|
||||
|
||||
const notifyRef = ref<HTMLElement | null>(null);
|
||||
const notifyRef = shallowRef<HTMLElement | null>(null);
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
if (notifyRef.value) {
|
||||
setTimeout(() => {
|
||||
//此处延迟加载class,以免影响弹出效果
|
||||
// @ts-ignore
|
||||
addClass(
|
||||
notifyRef.value.parentElement?.parentElement,
|
||||
"layui-layer-notify"
|
||||
);
|
||||
}, 300);
|
||||
}
|
||||
setTimeout(() => {
|
||||
//此处延迟加载class,以免影响弹出效果
|
||||
if (!notifyRef.value?.parentElement?.parentElement) return;
|
||||
addClass(
|
||||
notifyRef.value?.parentElement?.parentElement,
|
||||
"layui-layer-notify"
|
||||
);
|
||||
}, 300);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
@ -177,7 +177,6 @@ const firstOpenDelayCalculation = function () {
|
||||
area.value = calculateDrawerArea(props.offset, props.area);
|
||||
}
|
||||
if (type == 5) {
|
||||
// @ts-ignore
|
||||
area.value = await calculatePhotosArea(
|
||||
props.imgList[props.startIndex].src,
|
||||
props
|
||||
@ -395,13 +394,14 @@ const boxClasses = computed(() => {
|
||||
const supportMove = function () {
|
||||
if (props.move && type != 4) {
|
||||
nextTick(() => {
|
||||
// @ts-ignore 拖拽
|
||||
useMove(layero.value, (left, top) => {
|
||||
// 拖拽
|
||||
if (!layero.value) return;
|
||||
useMove(layero.value, (left: string, top: string) => {
|
||||
l.value = left;
|
||||
t.value = top;
|
||||
});
|
||||
// @ts-ignore 拉伸
|
||||
useResize(layero.value, (width, height) => {
|
||||
// 拉伸
|
||||
useResize(layero.value, (width: string, height: string) => {
|
||||
h.value = height;
|
||||
w.value = width;
|
||||
});
|
||||
@ -524,7 +524,7 @@ const leaveActiveClass = computed(() => {
|
||||
});
|
||||
|
||||
/**
|
||||
* 打卡弹层
|
||||
* 打开弹层
|
||||
* <p>
|
||||
*/
|
||||
const open = () => {
|
||||
@ -576,7 +576,6 @@ const showTitle = computed(() => {
|
||||
*/
|
||||
const resetCalculationPohtosArea = function (index: number) {
|
||||
nextTick(async () => {
|
||||
// @ts-ignore
|
||||
area.value = await calculatePhotosArea(props.imgList[index].src, props);
|
||||
offset.value = calculateOffset(props.offset, area.value, props.type);
|
||||
w.value = area.value[0];
|
||||
|
@ -264,7 +264,10 @@ export function getDrawerAnimationClass(offset: any, isClose: boolean = false) {
|
||||
}
|
||||
|
||||
//计算图片大小 并缩放
|
||||
export async function calculatePhotosArea(url: string, options: object) {
|
||||
export async function calculatePhotosArea(
|
||||
url: string,
|
||||
options: object
|
||||
): Promise<Array<string>> {
|
||||
let img = new Image();
|
||||
img.src = url;
|
||||
return new Promise((resolve, reject) => {
|
||||
|
Loading…
Reference in New Issue
Block a user