前言
项目中存在大量封装的组件，那么如何实现指令式调用组件呢，如使用HintDialog.open()在页面中打开提示弹出框，使用HintDialog.close()关闭弹窗，另外还有如Loading加载动画，弹出层，确认框等封装组件。那么这是怎么实现的呢，下面就以弹窗提示框为例。
一.封装组件
首先在components文件夹下新建HintDialog文件夹，然后新建HintDialog.vue,这里简单写一个弹出框代表我们封装的组件，并设好组件接收参数。
<template>
<div class="hintDialog">
<div class="dialog">
<div class="dialog-title">
{
{title}}
</div>
<div>{
{msg}}</div>
<div>确认</div>
</div>
</div>
</template>
<script lang="ts" setup>
// 组件接收的参数
interface props {
// 内容
msg?: string;
// 标题
title?: string;
}
// 设置默认参数
withDefaults(defineProps<props>(), {
title: "系统错误",
msg: "数据返回异常！",
});
</script>
<style scoped>
.hintDialog{
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 9999;
background-color: rgba(141, 138, 138, 0.5);
}
.dialog {
width: 500px;
height: 300px;
position: absolute;
left: 50%;
top: 50%;
background: #FFFFFF;
border-radius:7px;
box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.16);
transform: translate(-50%,-50%);
}
.dialog-title{
width: 100%;
display: flex;
justify-content: center;
}
</style>新建index.ts文件代码如下：
import { h, createApp } from 'vue'
// 引入组件
import HintDialog from './HintDialog.vue'
let node: any;
/**
* 打开弹窗
* @param title 标题
* @param msg 内容
*/
const open = (title?: string, msg?: string) => {
if (node) {
// 如果已经存在，即删除节点
document.body.removeChild(node);
}
node = document.createElement('div')
// 创建实例
const instance = createApp({
render() {
return h(HintDialog, { title, msg });
}
})
// 将node加入到body
document.body.appendChild(node)
// 挂载
instance.mount(node);
}
/**
* 关闭弹窗
*/
const close = () => {
if (node) {
// 删除节点即可
document.body.removeChild(node);
node = null
}
}
export default {
open,
close
}
在HintDialog.vue中弹窗有一个确定按钮，点击时要关闭弹窗，所以给按钮绑定关闭事件：
<template>
<div @click="closeDialog">确认</div>
</template>
<script lang="ts" setup>
import HintDialog from './index'
/**
* 关闭弹窗
*/
const closeDialog = () => {
HintDialog.close()
}
</script>二.调用组件
1.引入
import HintDialog from "./components/HintDialog/index";2.打开HintDialog弹窗
HintDialog.open()总结
如此变实现了组件的指令式调用，在实际开发中应用场景还是很多的。
推荐阅读