22 vue3之全局函数和变量&插件编写

globalProperties

由于Vue3 没有Prototype 属性 使用 app.config.globalProperties 代替 然后去定义变量和函数

Vue2与 Vue 3的区别

// 之前 (Vue 2.x)

Vue.prototype.$http = () => {}
const app = createApp({})

app.config.globalProperties.$http = () => {}

main.ts定义全局变量

复制代码
app.config.globalProperties.$env = "env";

main.ts定义全局过滤器函数

在Vue3 移除了filter函数 我们可以使用全局函数代替

复制代码
// 全局函数使用案例
type Filter = {
  format: <T extends any>(str: T) => T;
};
// 声明要扩充@vue/runtime-core包的声明.
// 这里扩充"ComponentCustomProperties"接口, 因为他是vue3中实例的属性的类型.
declare module "@vue/runtime-core" {
  export interface ComponentCustomProperties {
    $filters: Filter;
  }
}
app.config.globalProperties.$filters = {
  format<T extends any>(str: T): string {
    return `coookie-${str}`;
  },
};

组件中使用

二种不同的方式获取值,推荐使用第二种

复制代码
<template>
  <div class="">{{ $env }}</div>
  <div class="">{{ $filters.format("nihao") }}</div>
</template>

<script setup lang="ts">
import { log } from "console";
import {
  getCurrentInstance,
  ComponentInternalInstance,
} from "vue";
// 第一种方式
const { appContext } = <ComponentInternalInstance>(
  getCurrentInstance()
);
console.log(appContext.config.globalProperties.$env);
// 第二种方式
const app = getCurrentInstance();
console.log(app?.proxy?.$filters.format("js"));
</script>

<style lang="less" scoped></style>

编写全局插件

插件知识

插件有二种形式 一是导出对象形式 二是函数

导出对象形式必须包含install方法

插件是自包含的代码,通常向 Vue 添加全局级功能。你如果是一个对象需要有install方法Vue会帮你自动注入到install 方法(意思是vue.use(loading)后会自动调用loading插件的install方法) 你如果是function 就直接当install 方法去使用

loading.vue

需defineExpose对外暴露 当前组件的属性和方法

javascript 复制代码
<template>
  <div v-if="isShow" class="loading">
    <div class="loading-content">Loading...</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
const isShow = ref(false); //定位loading 的开关

const show = () => {
  isShow.value = true;
};
const hide = () => {
  isShow.value = false;
};
//defineExpose对外暴露 当前组件的属性和方法
defineExpose({
  isShow,
  show,
  hide,
});
</script>

<style scoped lang="less">
.loading {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  &-content {
    font-size: 30px;
    color: #fff;
  }
}
</style>

index.ts

createVNode vue提供的底层方法 可以给我们组件创建一个虚拟DOM 也就是Vnode

render 把我们的Vnode 生成真实DOM 并且挂载到指定节点 这里是挂载到body上

javascript 复制代码
import { App, VNode, createVNode, render } from "vue";
import Loading from "./loading.vue";

// 插件有二种形式 一是导出对象形式  二是函数
// 导出对象形式必须包含install方法
export default {
  // Vue.use(Loading) 会自动调用install方法
  install(app: App) {
    //app 是全局的
    console.log("loading插件被注册了", Loading); // 现在获取到的Loading无法正常使用 需要createVNode通过转成Vnode,再用render函数挂载到全局
    let vnode: VNode = createVNode(Loading); //createVNode vue提供的底层方法 可以给我们组件创建一个虚拟DOM 也就是Vnode
    console.log(vnode); // 此时就是个vnode 但是component上是没有值的,故需要用render函数挂载
    render(vnode, document.body); // //render 把我们的Vnode 生成真实DOM 并且挂载到指定节点 这里是挂载到body上
    /*   let el: any = document.querySelector("#app");
    render(vnode, el);
    console.log("el", el); */ // 此时setupState中就有我们index.vue组件挂载的值

    // console.log(vnode.component?.setupState); //  不建议使用这种方式
    // vnode.component?.setupState?.show();

    // console.log(vnode.component?.exposed);  //建议使用这种方式,但index.vue需要抛出对应的defineExpose
    // Vue 提供的全局配置 可以自定义
    app.config.globalProperties.$loading = {
      // 需要注册为全局其他组件才能使用
      show: () => vnode.component?.exposed?.show(),
      hide: () => vnode.component?.exposed?.hide(),
    };
    // app.config.globalProperties.$loading.show(); //测试loading
  },
};

main.ts

javascript 复制代码
import Loading from "./index.ts"; //引入插件

app.use(Loading); // 加载插件
type Lod = {
  show: () => void;
  hide: () => void;
};
//编写ts loading 声明文件放置报错 和 智能提示
declare module "@vue/runtime-core" {
  export interface ComponentCustomProperties {
    $loading: Lod;
  }
}
declare module "vue" {
  export interface ComponentCustomProperties {
    $loading: Lod;
  }
}

使用插件

javascript 复制代码
<template>
  <div></div>
</template>

<script setup lang="ts">
import { ref, reactive, getCurrentInstance } from "vue";
const instance = getCurrentInstance();
instance?.proxy?.$loading.show();
setTimeout(() => {
  instance?.proxy?.$loading.hide();
}, 5000);

console.log(instance);
</script>
<style>
* {
  padding: 0;
  margin: 0;
}
</style>
相关推荐
白白李媛媛7 小时前
上传Vue3+vite+Ts组件到npm官方库保姆级教程
前端·arcgis·npm
zm-v-1593043398610 小时前
ArcGIS 水文分析升级:基于深度学习的流域洪水演进过程模拟
人工智能·深度学习·arcgis
whale fall18 小时前
npm install安装的node_modules是什么
前端·npm·node.js
新中地GIS开发老师19 小时前
新发布:26考研院校和专业大纲
学习·考研·arcgis·大学生·遥感·gis开发·地理信息科学
做梦都在学习前端1 天前
发布一个monaco-editor 汉化包
前端·npm·vite
Cacciatore->1 天前
React 基本介绍与项目创建
前端·react.js·arcgis
墨菲安全3 天前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
杨超越luckly3 天前
ArcGISPro应用指南:ArcGISPro制图全流程详解
arcgis·信息可视化·gis·制图·arcgispro
聪聪的学习笔记3 天前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
~央千澈~4 天前
UniApp完全支持快应用QUICKAPP-以及如何采用 Uni 模式开发发行快应用优雅草卓伊凡
arcgis