vue3 h函数 进阶用法

vue3 h函数 进阶用法

默认我们放到body中就可以了 如果想放在某个div下 把div传过来就好了
props:就相当于父传子的数据

import { render, h } from 'vue';
import showLoading from '../components/showLoading/src/index.vue';

export const showLoading = (props: any,dom) => {
  const handleDestroy = () => {
    // 从 body 上移除组件
    render(null, dom || document.body);
  };
  const vnode = h(showLoading, { ...props, destroy: handleDestroy });
  // 使用 render 函数将 vnode 渲染为真实DOM并挂载到 body 上
  render(vnode, dom || document.body);
};
export const hideLoading = (props: any) => {
  render(null, dom || document.body);
};

使用：

import { showLoading, hideLoading } from './lib/showLoading';
showLoading({
  message: '加载中...',
  color: '#fff',
  size: '30',
})；
//关闭
hideLoading()；

下面是部分的页面代码

<template>
  <div class="xxx-loading-mark" v-if="isVisable">
    <xxx-loading :color="color || '#fff'" :type="type" :size="size" :textSize="textSize" :textColor="textColor" :vertical="vertical">
      {{ message }}
    </xxx-loading>
  </div>
</template>
<script setup lang="ts">
import xxxLoading from '../../xxxLoading';

import { onMounted, defineProps, ref } from 'vue';
const props = defineProps({
  /** 颜色 */
  color: {
    type: String,
    defalut: '#fff',
  },
  /** 	loading文案 */
  message: {
    type: [String, Number],
    defalut: '',
  },
  /** 	是否设置自动关闭时间 */
  duration: {
    type: Number,
    defalut: 3000,
  },
  destroy: {
    type: Function,
  },
});
const isVisable = ref(true);
// 控制显示处理
onMounted(() => {
  if (props.duration) {
    setTimeout(() => {
      isVisable.value = false;
      props.destroy && props.destroy();
    }, props.duration);
  }
});
</script>
<script lang="ts">
export default {
  name: 'ShowLoading',
};
</script>

<style lang="scss" scoped>
.xxx-loading-mark {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
}
</style>

注：由于之前是搭建的组件库 示例代码当作参考 其实组件就跟我们平常写组件一样就可以了