最近遇到一个需求,在页面中有个组件,子组件由el-dialog包裹,希望展示隐藏el-dialog时有加载动画,加载动画用的是v-loading。
javascript
//父组件
<template>
<tabs v-model="tabsVisible"/>
</template>
<script setup>
const tabsVisible = ref(false);
</script>
javascript
//子组件
<template>
<el-dialog
v-model="modalVisible"
title=""
:close-on-click-modal="false"
width="85%"
v-loading="loading"
>
<!--> 这里是展示的内容 <-->
</el-dialog>
</template>
<script setup>
import { ref, computed, watch } from "vue";
const loading = ref(false);
const props = defineProps({
//接收参数
modelValue: false,
});
const emit = defineEmits(["update:modelValue"]);
const modalVisible = computed({
get() {
return props.modelValue;
},
set(value) {
emit("update:modelValue", value);
},
});
</script>
如果直接在el-dialog上面加v-loading那么进入页面会报错,我查了下大概意思是:在具有非元素根节点的组件上使用的运行时指令,这些指令将无法按预期发挥作用(Runtime directive used on component with non-element root node. The directives will not function as intended. )。
这个时候我换了种方式,使用element-plus提供的loading指令。
javascript
//子组件
<template>
<el-dialog
v-model="modalVisible"
title=""
:close-on-click-modal="false"
width="85%"
>
<!--> 这里是展示的内容 <-->
</el-dialog>
</template>
<script setup>
import { ref, computed, watch } from "vue";
const props = defineProps({
//接收参数
modelValue: false,
});
const emit = defineEmits(["update:modelValue"]);
const modalVisible = computed({
get() {
return props.modelValue;
},
set(value) {
emit("update:modelValue", value);
},
});
watch(modalVisible, (newVal, oldVal) => {
if (newVal) {
initData();
} else {
//处理数据
}
});
const initData = async () => {
//获取数据
let loading = null;
try {
setTimeout(() => {
loading = ElLoading.service({ fullscreen: true });
}, 30);
let res = await getInfo();
} catch (e) {
console.error(e);
}
loading.close();
};
</script>
当然如果不是父子组件,直接用v-loading就行了。