|
|
|
@ -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> |
|
|
|
|