1. 关键函数
use用法：
- 安装 Vue.js 插件。如果插件是一个对象，它必须暴露一个 install 方法。如果它本身是一个函数，它将被视为安装方法。
export default {
install: (app, options) => {
// Plugin code goes here
}
}
- 该安装方法将以应用实例作为第一个参数被调用。传给 use 的其他 options 参数将作为后续参数传入该安装方法。
app.use(toast, {})
- 当在同一个插件上多次调用此方法时，该插件将仅安装一次。
createVNode用法：
import toast from './index.vue'
// 创建虚拟节点(vue组件,组件传参)
const vm = createVNode(toast, {
message: msg
}) as any
render用法：
const container = document.createElement('div')
render(vm, container)
2. 封装toast组件
├── plugins
├── toast
│ ├── toast.ts
│ └── toast.vue
├── index.ts
└── modules.ts
toast.vue
<template>
<Transition name="down">
<div v-show="isShow" class="toast">
<div class="toastText">{{ props.message }}</div>
</div>
</Transition>
</template>
<script setup lang="ts">
const isShow = ref(false)
interface Props {
message?: string
duration: number
}
const props = withDefaults(defineProps<Props>(), {
message: '',
duration: 3000
})
const show = () => {
if (!props.message) return
isShow.value = true
setTimeout(() => {
isShow.value = false
}, props.duration)
}
// 父组件调用
defineExpose({
show
})
</script>
<style lang="scss" scoped>
.toast {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.toastText {
position: absolute;
top: 20%;
left: 50%;
width: 100px;
height: 40px;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
text-align: center;
line-height: 40px;
}
.down {
&-enter {
&-from {
transform: translate3d(0, -75px, 0);
opacity: 0;
}
&-active {
transition: all 0.5s;
}
&-to {
transform: none;
opacity: 1;
}
}
}
</style>
toast.ts
import { createVNode, render, App } from 'vue'
import toast from './toast.vue'
const { body } = document
const Toast = (msg: string) => {
const dom = body.querySelector(`.my-toast-message`)
// 已存在则先清除该节点
if (dom) body.removeChild(dom)
const container = document.createElement('div')
container.className = `my-toast-message`
// 创建虚拟节点(vue组件,组件传参)
// 回调函数跟参数从这里传入
const vm = createVNode(toast, {
message: msg
}) as any
// 渲染虚拟节点
render(vm, container)
document.body.appendChild(container)
// 获取toast组件实例
const props = vm.component.exposed
// 调用方法
props.show()
}
export default {
// 组件祖册
install(app: App) {
app.config.globalProperties.$toast = Toast
}
}
modules.ts
export { default as toast } from './toast/toast'
// ...
index.ts
import { App } from 'vue'
import * as modules from './modules'
// 用provide注册全局方法
const provide = (app: App) => {
const globalPlugin = app.config.globalProperties
app.provide('globalPlugin', globalPlugin)
}
export default (app: App) => {
// 注册全局插件
Object.keys(modules).forEach((key) => {
app.use((modules as Record<string, any>)[key])
})
provide(app)
}
main.ts
import plugins from '@/plugins/index'
// 注册插件
plugins(app)
3. 调用
<template>
<div></div>
</template>
<script setup lang="ts" name="Home">
const instance = inject('globalPlugin') as Record<string, any>
instance.$toast('弹窗')
</script>
<style lang="scss" scoped></style>
