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