Vue3在使用渲染函数h时候使用v-loading

v-loading 指令在h函数中无法像这样直接使用

const = loading = ref(true) 
const divVNode = () => h('div',{directives: [{name: 'loading',value: loading.value,modifiers: {}}]},[h('p', '这是一个带有 v-loading 的组件'),loading.value ? h(ElLoading, { fullscreen: false }) : null]);

它必须在setup()和render()函数中使用

import { h, resolveDirective, withDirectives } from 'vue'const vLoading = resolveDirective('loading');export default {name: 'MyComponent',data() {return {loading: true};},render() {const vnode = h('div', { class: 'box' }, '加载中内容');return withDirectives(vnode, [[vLoading, this.loading]]);}
}

resolveDirective, withDirectives 这两个指令需要搭配使用

具体用法请看文档https://vuejs.org/api/render-function#withdirectives

当然也可以在render()中改写成上面directives的形式的写法

也可以使用defineComponent比如这样

  const confirmForm = defineComponent({name: "ConfirmForm",setup() {const loading = ref(true);const vLoading = resolveDirective("loading");onMounted(() => {//某个接口请求getWarehouseProjectReceive({projectId: row?.projectId ?? "",isReceive: "1"}).then(r => {loading.value = false;}).catch(() => {loading.value = false;});});return () =>withDirectives(h('div',{},{default:() => "加载中....."}),[[vLoading, loading.value]]);}});