fix(modal): redoModalHeight not work as expected
修复redoModalHeight根据内容重设高度时,只会增大而不能减少Modal高度的问题
This commit is contained in:
parent
f732b56904
commit
5d554f184f
|
|
@ -60,15 +60,13 @@
|
||||||
redoModalHeight: setModalHeight,
|
redoModalHeight: setModalHeight,
|
||||||
});
|
});
|
||||||
|
|
||||||
const spinStyle = computed(
|
const spinStyle = computed((): CSSProperties => {
|
||||||
(): CSSProperties => {
|
return {
|
||||||
return {
|
minHeight: `${props.minHeight}px`,
|
||||||
minHeight: `${props.minHeight}px`,
|
// padding 28
|
||||||
// padding 28
|
maxHeight: `${unref(realHeightRef)}px`,
|
||||||
height: `${unref(realHeightRef)}px`,
|
};
|
||||||
};
|
});
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
props.useWrapper && setModalHeight();
|
props.useWrapper && setModalHeight();
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,9 @@
|
||||||
:helpMessage="['提示1', '提示2']"
|
:helpMessage="['提示1', '提示2']"
|
||||||
@visible-change="handleShow"
|
@visible-change="handleShow"
|
||||||
>
|
>
|
||||||
|
<template #insertFooter>
|
||||||
|
<a-button type="danger" @click="setLines" :disabled="loading">点我更新内容</a-button>
|
||||||
|
</template>
|
||||||
<template v-if="loading">
|
<template v-if="loading">
|
||||||
<div class="empty-tips"> 加载中,稍等3秒…… </div>
|
<div class="empty-tips"> 加载中,稍等3秒…… </div>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -18,7 +21,7 @@
|
||||||
</BasicModal>
|
</BasicModal>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent, ref } from 'vue';
|
import { defineComponent, ref, watch } from 'vue';
|
||||||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||||||
export default defineComponent({
|
export default defineComponent({
|
||||||
components: { BasicModal },
|
components: { BasicModal },
|
||||||
|
|
@ -26,19 +29,30 @@
|
||||||
const loading = ref(true);
|
const loading = ref(true);
|
||||||
const lines = ref(10);
|
const lines = ref(10);
|
||||||
const [register, { setModalProps, redoModalHeight }] = useModalInner();
|
const [register, { setModalProps, redoModalHeight }] = useModalInner();
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => lines.value,
|
||||||
|
() => {
|
||||||
|
redoModalHeight();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
function handleShow(visible: boolean) {
|
function handleShow(visible: boolean) {
|
||||||
if (visible) {
|
if (visible) {
|
||||||
loading.value = true;
|
loading.value = true;
|
||||||
setModalProps({ loading: true });
|
setModalProps({ loading: true, confirmLoading: true });
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
lines.value = Math.round(Math.random() * 20 + 10);
|
lines.value = Math.round(Math.random() * 30 + 5);
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
setModalProps({ loading: false });
|
setModalProps({ loading: false, confirmLoading: false });
|
||||||
redoModalHeight();
|
|
||||||
}, 3000);
|
}, 3000);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return { register, loading, handleShow, lines };
|
|
||||||
|
function setLines() {
|
||||||
|
lines.value = Math.round(Math.random() * 20 + 10);
|
||||||
|
}
|
||||||
|
return { register, loading, handleShow, lines, setLines };
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue