草庐IT

vue3 + TS 自定义插件-全局message提示插件示例

廖若星辰LTY 2024-02-13 原文

本文记录 Vue3 + ts 实现自定义一个全局插件，用于进行 message 消息提示，所谓全局插件即挂载到 vue 实例上，在 App 的任一子组件中均可通过 app 的实例调用该方法。消息提示功能只是示例主要是记录 Vue3 自定义插件功能的写法。

文件结构：

src/components/Toast/index.vue 文件用于搭建和渲染消息在页面上的显示效果，比如需要显示在页面的哪个位置、字体、颜色、显示和隐藏的动画效果等；

src/components/Toast/index.ts 文件用于实现将消息的显示/隐藏等方法全局挂载到 app 实例上（注：对象写法默认需要导出一个 install() 方法），这样在 main.ts 中导入并注册该组件即可；

主要代码

index.vue 文件

<!-- 封装消息提示插件 -->
<template>
  <Transition enter-active-class="animate__animated animate__bounceInRight"
    leave-active-class="animate__animated animate__bounceOutRight">
    <div v-if="isShow" class="message">{{ tipText }}</div>
  </Transition>
</template>

<script setup lang='ts'>
import { ref, reactive } from 'vue';
let isShow = ref<boolean>(false)
let tipText = ref<string | number>('默认提示内容')
const show = (str: string | number, time: number = 3000) => {
  tipText.value = str
  isShow.value = true
  // 2 秒后自动关闭
  setTimeout(() => {
    isShow.value = false
  }, time);
}
const hide = () => isShow.value = false
// 将组件内部的方法导出，方便外部访问
defineExpose({
  show,
  hide
})
</script>

<style lang='less' scoped>
.message {
  height: 40px;
  line-height: 40px;
  padding: 0 20px;
  border-radius: 5px;
  background-color: rgba(200, 217, 217, 0.5);
  position: fixed;
  top: 50px;
  right: 100px;
}
</style>

index.ts 文件

import { App, createVNode, VNode, render } from 'vue'
import Toast from './index.vue'

export default {
  install(app: App) {
    // 将组件转换为虚拟DOM
    const Vnode: VNode = createVNode(Toast)
    // 将虚拟DOM挂载到页面节点上
    render(Vnode, document.body)
    // 将插件的主要方法挂载到 app.config.globalProperties 上，这里的 $toast 是自定义的
    app.config.globalProperties.$toast = {
      // 这里仅挂载了一个 show 方法到 $toast 上
      show(str: string | number, time?: number) {
        Vnode.component?.exposed?.show(str, time)
      },
    }
  },
}

然后在 main.ts 中导入并注册该插件

// 注册插件
import Toast from './components/Toast'
const app = createApp(App)

// 只要是插件都需要进行注册，都是通过 app.use() 进行注册的
app.use(Toast)

使用插件

进行到此我们的自定义插件就已经可以在任意 App 的子组件中使用了，如：

import { getCurrentInstance } from 'vue'
const instance = getCurrentInstance()
// 使用自定义的全局消息提示插件
instance?.proxy?.$toast.show('this is default message')

效果图

 

扩充声明文件 

注：以上虽然全局的消息插件是能使用了，但是因为 $toast 缺乏类型声明文件所以会报错而且其内部的方法、变量等成员均没有智能提示，所以我们还需要在 main.ts 文件中对 $toast 的成员类型进行声明：将 main.ts 文件中关于注册该自定义插件的代码进行如下更新：

// 注册插件
import Toast from './components/Toast'
const app = createApp(App)

type Toast = {
  show: <T>(str: string | number, time?: number) => void
}
// 编写自定义插件的声明文件，防止报错，声明后也会有智能提示
declare module '@vue/runtime-core' {
  export interface ComponentCustomProperties {
    $toast: Toast
  }
}

// 只要是插件都需要进行注册，都是通过 app.use() 进行注册的
app.use(Toast)

注：更新后如果页面中还是报错（爆红色提醒），重启服务即可，且在页面上访问 $toast 的内部成员也会有智能提示，比如 show() 方法，且该方法需要几个参数、参数需要什么类型都会有提示。至此我们 Vue3 + ts 的自定义插件就封装完成啦！

 

自定messagexffxff0cvue.js前端typescript

有关vue3 + TS 自定义插件-全局message提示插件示例的更多相关文章

  1. ruby - Facter::Util::Uptime:Module 的未定义方法 get_uptime (NoMethodError) - 2

    我正在尝试设置一个puppet节点，但ruby​​gems似乎不正常。如果我通过它自己的二进制文件(/usr/lib/ruby/gems/1.8/gems/facter-1.5.8/bin/facter)在cli上运行facter，它工作正常，但如果我通过由ruby​​gems(/usr/bin/facter)安装的二进制文件，它抛出:/usr/lib/ruby/1.8/facter/uptime.rb:11:undefinedmethod`get_uptime'forFacter::Util::Uptime:Module(NoMethodError)from/usr/lib/ruby

  2. ruby - 如何每月在 Heroku 运行一次 Scheduler 插件？ - 2

    在选择我想要运行操作的频率时，唯一的选项是“每天”、“每小时”和“每10分钟”。谢谢!我想为我的Rails3.1应用程序运行调度程序。 最佳答案 这不是一个优雅的解决方案，但您可以安排它每天运行，并在实际开始工作之前检查日期是否为当月的第一天。 关于ruby-如何每月在Heroku运行一次Scheduler插件？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.com/questions/8692687/

  3. ruby-on-rails - 无法使用 Rails 3.2 创建插件？ - 2

    我对最新版本的Rails有疑问。我创建了一个新应用程序(railsnewMyProject)，但我没有脚本/生成，只有脚本/rails，当我输入ruby./script/railsgeneratepluginmy_plugin"Couldnotfindgeneratorplugin.".你知道如何生成插件模板吗？没有这个命令可以创建插件吗？PS:我正在使用Rails3.2.1和ruby​​1.8.7[universal-darwin11.0] 最佳答案 随着Rails3.2.0的发布，插件生成器已经被移除。查看变更日志here.现在

  4. ruby-on-rails - Rails 3.2.1 中 ActionMailer 中的未定义方法 'default_content_type=' - 2

    我在我的项目中添加了一个系统来重置用户密码并通过电子邮件将密码发送给他，以防他忘记密码。昨天它运行良好(当我实现它时)。当我今天尝试启动服务器时，出现以下错误。=>BootingWEBrick=>Rails3.2.1applicationstartingindevelopmentonhttp://0.0.0.0:3000=>Callwith-dtodetach=>Ctrl-CtoshutdownserverExiting/Users/vinayshenoy/.rvm/gems/ruby-1.9.3-p0/gems/actionmailer-3.2.1/lib/action_mailer

  5. ruby-on-rails - form_for 中不在模型中的自定义字段 - 2

    我想向我的Controller传递一个参数，它是一个简单的复选框，但我不知道如何在模型的form_for中引入它，这是我的观点:{:id=>'go_finance'}do|f|%>Transferirde:para:Entrada:"input",:placeholder=>"Quantofoiganho?"%>Saída:"output",:placeholder=>"Quantofoigasto?"%>Nota:我想做一个额外的复选框，但我该怎么做，模型中没有一个对象，而是一个要检查的对象，以便在Controller中创建一个ifelse，如果没有检查，请帮助我，非常感谢,谢谢

  6. ruby - 主要 :Object when running build from sublime 的未定义方法 `require_relative' - 2

    我已经从我的命令行中获得了一切，所以我可以运行rubymyfile并且它可以正常工作。但是当我尝试从sublime中运行它时，我得到了undefinedmethod`require_relative'formain:Object有人知道我的sublime设置中缺少什么吗？我正在使用OSX并安装了rvm。 最佳答案 或者，您可以只使用“require”，它应该可以正常工作。我认为“require_relative”仅适用于ruby​​1.9+ 关于ruby-主要:Objectwhenrun

  7. ruby - 在 Ruby 中有条件地定义函数 - 2

    我有一些代码在几个不同的位置之一运行:作为具有调试输出的命令行工具，作为不接受任何输出的更大程序的一部分，以及在Rails环境中。有时我需要根据代码的位置对代码进行细微的更改，我意识到以下样式似乎可行:print"Testingnestedfunctionsdefined\n"CLI=trueifCLIdeftest_printprint"CommandLineVersion\n"endelsedeftest_printprint"ReleaseVersion\n"endendtest_print()这导致:TestingnestedfunctionsdefinedCommandLin

  8. ruby - 定义方法参数的条件 - 2

    我有一个只接受一个参数的方法:defmy_method(number)end如果使用number调用方法，我该如何引发错误？？通常，我如何定义方法参数的条件？比如我想在调用的时候报错:my_method(1) 最佳答案 您可以添加guard在函数的开头，如果参数无效则引发异常。例如:defmy_method(number)failArgumentError,"Inputshouldbegreaterthanorequalto2"ifnumbereputse.messageend#=>Inputshouldbegreaterthano

  9. ruby - 如何在 Grape 中定义哈希数组？ - 2

    我使用Ember作为我的前端和GrapeAPI来为我的API提供服务。前端发送类似:{"service"=>{"name"=>"Name","duration"=>"30","user"=>nil,"organization"=>"org","category"=>nil,"description"=>"description","disabled"=>true,"color"=>nil,"availabilities"=>[{"day"=>"Saturday","enabled"=>false,"timeSlots"=>[{"startAt"=>"09:00AM","endAt"=>

  10. ruby - 获取模块中定义的所有常量的值 - 2

    我想获取模块中定义的所有常量的值:moduleLettersA='apple'.freezeB='boy'.freezeendconstants给了我常量的名字:Letters.constants(false)#=>[:A,:B]如何获取它们的值的数组，即["apple","boy"]？ 最佳答案 为了做到这一点，请使用mapLetters.constants(false).map&Letters.method(:const_get)这将返回["a","b"]第二种方式:Letters.constants(false).map{|c

随机推荐