vlambda博客
学习文章列表

<template> <a-button @click="clickBack" type="primary" plain> {{ text }} </a-button></template>
<script setup>import { useRouter } from "vue-router";const props = defineProps({ text: { type: String, default: "返回" }, backLevel: { type: Number, default: 1, },});
const router = useRouter();const clickBack = () => { router.go(-props.backLevel);};</script>

import BButton from '@/components/import/BButton.vue'<b-button text="最简单的导入组件"></b-button>

<template> <a-button @click="clickBack" type="primary" plain> {{text}} </a-button></template>
<script setup>import { useRouter } from "vue-router";const props = defineProps({ text: { type: String, default: "返回" }, backLevel: { type: Number, default: 1, },});
const router = useRouter();const clickBack = () => { router.go(-props.backLevel);};</script>

//通过vite提供的import.meta.globEager读取common目录下的所有vue组件，并且以 D+文件名 作为组件名。//在使用时使用 d-组件名的形式const componentList = import.meta.globEager('../components/common/**');let componentArray = new Object()Object.keys(componentList).forEach((key) => { let keyArray = key.split('/') let name = 'D' + keyArray[keyArray.length - 1].split('.')[0] componentArray[name] = componentList[key].default})
export default function (app) { Object.keys(componentArray).forEach((key) => { app.component(key, componentArray[key]) })}

import d from "@/config/d";app.use(d)

<d-back-button text="这是全局导入的自定义组件，不需要在页面中单独导入"></d-back-button>

<template> <Modal v-model:visible="pageVisible" title="自定义全局函数组件" @ok="_sure" @cancel="pageVisible = false" :okText="okText" > {{content}} </Modal></template>
<script setup>import { ref, watch } from "vue";//自定义函数组件无法使用全局组件，需要单独引入import { Modal } from "ant-design-vue";const props = defineProps({ visible: { type: Boolean, default: false, }, okText: { type: String, default: "确定", }, handleOk: { type: Function, //成功回调 default: null, }, remove: { type: Function, //传入移除节点方法,这里是createApp中的方法 default: null, }, content:{ type: String, default: "自定义全局函数组件......", }});
const pageVisible = ref(false);pageVisible.value = props.visible;// 监听显示的消失，需要移除domwatch( () => pageVisible.value, (val) => { !val && props.remove(); });
// 确认const _sure = () => { typeof props.handleOk === "function" && props.handleOk("组件参数"); pageVisible.value = false;};</script>

import { createApp } from 'vue';import FunTipsDialog from './tipsDialog.vue'// 使用vue3的createApp,以及mount,unmount方法创建挂载实例
export default function TipsDialog(options) { // 创建一个节点，并将组件挂载上去 const mountNode = document.createElement('div') document.body.appendChild(mountNode) const app = createApp(FunTipsDialog, { ...options, visible: true, remove() { app.unmount(mountNode) //创建完后要进行销毁 document.body.removeChild(mountNode) } }) return app.mount(mountNode)}

//使用import.meta.globEager读取components文件夹的文件，以后缀名ts区分const componentsList = import.meta.globEager("./components/**");
let List = {}; export default function (app) { Object.keys(componentsList).forEach((key) => { // 筛选出ts后缀 if (key.split(".")[2] === "ts") { //赋值函数组件，后面抛出，导入使用 List[`$${componentsList[key].default.name}`] = componentsList[key].default;
 //将函数组件定义到全局变量中，在vue中的script中通过proxy使用 app.config.globalProperties[`$${componentsList[key].default.name}`] = componentsList[key].default; } });}
//抛出函数组件，用于导入使用export const funComponentList = List;

import fc from "@/components/function/index"app.use(fc)

//通过proxy获取全局对象使用<a-button @click="clickOpenFunComponent">这是自定义全局函数组件，点击打开</a-button>
import { getCurrentInstance } from "vue";const { proxy } = getCurrentInstance();const clickOpenFunComponent = () => { proxy.$TipsDialog({ handleOk: (str) => { console.log("点击成功，可以在此处做回调操作。"+str); }, });};
//也可以导入使用import { funComponentList } from "@/components/function/index";funComponentList.$TipsDialog({ content:"在request.ts触发的函数式组件", handleOk: (str) => { console.log("点击成功，可以在此处做回调操作。"+str); }    });

import { funComponentList } from "@/components/function/index";
if (response?.status === 200) { funComponentList.$TipsDialog({ content:"在request.ts触发的函数式组件", handleOk: (str) => { console.log("点击成功，可以在此处做回调操作。"+str); } });}