66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<template>
|
||
<BasicModal
|
||
v-bind="$attrs"
|
||
destroyOnClose
|
||
@register="register"
|
||
title="Modal Title"
|
||
:helpMessage="['提示1', '提示2']"
|
||
@visible-change="handleShow"
|
||
>
|
||
<template #insertFooter>
|
||
<a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
|
||
</template>
|
||
<template v-if="loading">
|
||
<div class="empty-tips"> 加载中，稍等3秒…… </div>
|
||
</template>
|
||
<template v-if="!loading">
|
||
<ul>
|
||
<li v-for="index in lines" :key="index">加载完成{{ index }}！</li>
|
||
</ul>
|
||
</template>
|
||
</BasicModal>
|
||
</template>
|
||
<script lang="ts">
|
||
import { defineComponent, ref, watch } from 'vue';
|
||
import { BasicModal, useModalInner } from '/@/components/Modal';
|
||
export default defineComponent({
|
||
components: { BasicModal },
|
||
setup() {
|
||
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, confirmLoading: true });
|
||
setTimeout(() => {
|
||
lines.value = Math.round(Math.random() * 30 + 5);
|
||
loading.value = false;
|
||
setModalProps({ loading: false, confirmLoading: false });
|
||
}, 3000);
|
||
}
|
||
}
|
||
|
||
function setLines() {
|
||
lines.value = Math.round(Math.random() * 20 + 10);
|
||
}
|
||
return { register, loading, handleShow, lines, setLines };
|
||
},
|
||
});
|
||
</script>
|
||
<style scoped>
|
||
.empty-tips {
|
||
height: 100px;
|
||
line-height: 100px;
|
||
text-align: center;
|
||
}
|
||
</style>
|