|
@@ -7,6 +7,9 @@
|
|
|
:helpMessage="['提示1', '提示2']"
|
|
|
@visible-change="handleShow"
|
|
|
>
|
|
|
+ <template #insertFooter>
|
|
|
+ <a-button type="danger" @click="setLines" :disabled="loading">点我更新内容</a-button>
|
|
|
+ </template>
|
|
|
<template v-if="loading">
|
|
|
<div class="empty-tips"> 加载中,稍等3秒…… </div>
|
|
|
</template>
|
|
@@ -18,7 +21,7 @@
|
|
|
</BasicModal>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { defineComponent, ref } from 'vue';
|
|
|
+ import { defineComponent, ref, watch } from 'vue';
|
|
|
import { BasicModal, useModalInner } from '/@/components/Modal';
|
|
|
export default defineComponent({
|
|
|
components: { BasicModal },
|
|
@@ -26,19 +29,30 @@
|
|
|
const loading = ref(true);
|
|
|
const lines = ref(10);
|
|
|
const [register, { setModalProps, redoModalHeight }] = useModalInner();
|
|
|
+
|
|
|
+ watch(
|
|
|
+ () => lines.value,
|
|
|
+ () => {
|
|
|
+ redoModalHeight();
|
|
|
+ }
|
|
|
+ );
|
|
|
+
|
|
|
function handleShow(visible: boolean) {
|
|
|
if (visible) {
|
|
|
loading.value = true;
|
|
|
- setModalProps({ loading: true });
|
|
|
+ setModalProps({ loading: true, confirmLoading: true });
|
|
|
setTimeout(() => {
|
|
|
- lines.value = Math.round(Math.random() * 20 + 10);
|
|
|
+ lines.value = Math.round(Math.random() * 30 + 5);
|
|
|
loading.value = false;
|
|
|
- setModalProps({ loading: false });
|
|
|
- redoModalHeight();
|
|
|
+ setModalProps({ loading: false, confirmLoading: false });
|
|
|
}, 3000);
|
|
|
}
|
|
|
}
|
|
|
- return { register, loading, handleShow, lines };
|
|
|
+
|
|
|
+ function setLines() {
|
|
|
+ lines.value = Math.round(Math.random() * 20 + 10);
|
|
|
+ }
|
|
|
+ return { register, loading, handleShow, lines, setLines };
|
|
|
},
|
|
|
});
|
|
|
</script>
|