当前位置：首页 > news >正文

外贸网站建设与推广装修公司网站设计

news 2025/9/17 11:43:26

外贸网站建设与推广,装修公司网站设计,怎么做百度网盘链接网站,建设电子商务网站期末考试业务场景假设现在有一个可能在全局任何地方调用的vue组件你会怎么办？非常简单，在app.vue下的router-view同级写上这个组件，在全局中加一个变量v-if判断这个变量就解决了！ tempalte中 <div><router-view /><You…

业务场景

假设现在有一个可能在全局任何地方调用的vue组件你会怎么办？非常简单，在app.vue下的router-view同级写上这个组件，在全局中加一个变量v-if判断这个变量就解决了！

tempalte中

<div><router-view /><YourComponent v-if="xxxStore.yourComponentVisible" />
</div>

js中

export const showComponent = () => {xxxStore.yourComponentVisible = true;
};
export const hideComponent = () => {xxxStore.yourComponentVisible = false;
};

某页面中

const handleSubmitForm = async() = >{showComponent()await reqGetUserInfo()hideComponent()
}

完美！！本文结束！！

一点也不好笑，我们进入正题。先看看需要了解到的方法，再来实现这个功能。

主要方法

h函数(更准确的名字应该叫createVnode)

从字面意思上来看，简单来说这个东西就是创建虚拟dom用的，在本文里面，它可以将你写的组件，转成vnode，也就是虚拟Dom。这里不做详细赘述。可以看下面文档链接。
api详细用法及信息

render函数

白话说就是把你的虚拟dom通过该方法挂载到某一个节点上面。这里不做详细赘述。可以看下面文档链接

api详细用法及信息

实现思路

看过了上面两个方法，先把组件转成虚拟dom，再将虚拟dom挂载到某节点上。那么知道了这些，实现这个功能就很简单了。这里用一个全局loading组件做示例。

简单版实现代码

import UploadLoading from '@/components/UploadLoading/index.vue'
import { render, h, ref, RendererNode, RendererElement, VNode, } from 'vue';
interface ILoadingRef {vnode: VNode<RendererNode, RendererElement, {[key: string]: any;}>;div: HTMLDivElement;
}
/*** 任何页面中调用该组件进行展示* @returns */
export const useUploadLoading = () => {const loadingRef = ref<ILoadingRef | null>(null);const showLoading = () => {// 避免重复挂载组件if (loadingRef.value) return// 在body上挂载一个divconst div = document.createElement('div');document.body.appendChild(div);// 把组件转成虚拟domconst vnode = h(UploadLoading);// 把这个组件挂载到上面创建的div里面render(vnode, div);loadingRef.value = { vnode, div };};const hideLoading = () => {if (!loadingRef.value) return// 在vue中卸载（unMounted）这个元素render(null, loadingRef.value.div);// Vue 卸载了这个元素，它仍然存在于 DOM 中，需要手动移除document.body.removeChild(loadingRef.value.div);loadingRef.value = null;};return { showLoading, hideLoading };
};

那么问题来了，为什么要走下面两个方法呢？这不是一个意思吗？

render(null, loadingRef.value.div);
document.body.removeChild(loadingRef.value.div);

其实这里看似一样其实另有玄机，render函数让这个组件执行所有的组件卸载生命周期，但元素还在dom上。比如说你的组件中的unMounted中有移除某些事件监听器的方法。要先走这一步让组件按正常流程卸载。

document.body.removeChild才是实际移除这个组件的操作

组件拓展

上面只是说简单实现。那么，现在这个loading组件中，有一个进度条，我需要实时更新这个进度条的进度，怎么办？

那就需要用到h函数的第二个参数了，我们把这个进度条的值传到组件里面。

组件中的props:

const props = defineProps({progress: {type: Number,default: 0}
});

核心两行代码：

   const vnode = h(UploadLoading, { progress: progress.value });loadingRef.value.vnode.component.props.progress = newProgress;

完整代码:

import UploadLoading from '@/components/UploadLoading/index.vue'
import { render, h, ref, RendererNode, RendererElement, VNode } from 'vue';
interface ILoadingRef {vnode: VNode<RendererNode, RendererElement, {[key: string]: any;}>;div: HTMLDivElement;
}
/*** 任何页面中调用该组件进行展示* @returns */
export const useUploadLoading = () => {const loadingRef = ref<ILoadingRef | null>(null);const progress = ref(0);const showLoading = () => {if (!loadingRef.value) {const div = document.createElement('div');document.body.appendChild(div);// 这里第二个参数传组件的props参数const vnode = h(UploadLoading, { progress: progress.value });render(vnode, div);loadingRef.value = { vnode, div };}};const hideLoading = () => {if (loadingRef.value) {render(null, loadingRef.value.div);document.body.removeChild(loadingRef.value.div);loadingRef.value = null;// 重置进度条progress.value = 0}};const updateProgress = (newProgress: number) => {progress.value = newProgress;if (loadingRef.value && loadingRef.value.vnode.component) {// 修改组件中的进度条值loadingRef.value.vnode.component.props.progress = newProgress;}};return { showLoading, hideLoading, updateProgress };
};

最后直接引入使用就行，我这里用oss文件分片上传做示例：

  /*** 分片上传文件*/async uploadFileByChunk(options: IChunkUploadOptions): Promise<string> {const { showLoading, hideLoading, updateProgress } = useUploadLoading();const yourOptions = {// 获取分片上传进度、断点和返回值。progress: (p: number) => {updateProgress(Math.floor(p * 100))}...省略其他代码}showLoading()try {await ossUpload(yourOptions)...省略其他代码} finally {hideLoading()}}