前言背景
在项目开发，我们总是不可避免的能遇到需要通过 js 调用 api 在 html 中全局显示，以使灵活应付各种项目场景
例如：饿了么的 element-ui 的全局 api Message MessageBox Notification 等组件 或者是高德地图中的调用 自定义信息窗体 等api
但是通常我们会碰到，这些组件库提供的 api 并不能满足我们的个性化布局以及样式，无法做到还原设计稿或者是需求
如果使用html 字符串来传入 api 进行又使代码繁琐冗余，如果这些全局api里面的内容中，例如弹窗通知中里面还要用到别的组件该怎么办呢
思考办法
最好的体验应该是按照 vue组件 写法，去创建一个 vue 组件，来对内容进行个性化布局书写，那我们怎么把我们为创建的组件给它传入到这些 api 里面显示呢
我们的 dom 可以分为 真实DOM 以及 vue 的 VNode 虚拟 dom
在 vue 中，如果我们想要自定义这些全局 js 调用 api 里面的样式，肯定是使用 vue 的 VNode 虚拟 dom 更方便，也更自由灵活，方便书写我们的样式
那么我们如何来创建虚拟节点呢？
下面写一下 vue2 以及 vue3 的用法
vue2 写法
在 vue2 中我们可以使用 createElement 这个 api
或者使用 vue 的构造器extend 、 new 一个 Vue 来创建 Vue 实例，然后把创建后实例的$el 取出来放到需要使用的 api 上
具体怎么做看如下代码
首先创建一个自定义的 customComponent 组件，里面放我们想要显示的内容
<template>
<div class="customComponent">
<div>{{ name }}</div>
<div>
<i class="el-icon-platform-eleme" style="font-size: 22px"></i>
</div>
<el-button type="primary">按钮</el-button>
</div>
</template>
<script>
export default {
props: {
name: {
type: String,
default: "我是测试",
},
},
};
</script>
<style lang="less" scoped>
.customComponent{
display: flex;
align-items: center;
justify-content: space-between;
}
/deep/ .el-button{
font-size: 28px;
}
</style>
createElement
在 vue2 中使用 createElement 来创建 VNode 节点
一般情况下我们都是这样用的，传入普通的 html 元素
this.$createElement("div", {
// 与 `v-bind:style` 的 API 相同，
// 接受一个字符串、对象，或对象组成的数组
style: {
color: "red",
fontSize: "14px",
},
// 普通的 HTML 特性
attrs: {
id: "foo",
},
});
如果这样书写样式以及灵活性就差很多了，也比较麻烦，而且还想要用到其他的组件改怎么做呢
但是其实这个api是可以把我们的组件传入的
并且可以传入相应的 props 参数
import customComponent from './components/customComponent/index.vue'
export default {
components: { customComponent }, // 注册
mounted() {
const element = this.$createElement('customComponent', { // 组件名称
props: {
name: '我是createElement创建的'
}
})
this.$notify({
dangerouslyUseHTMLString: true,
message: element,
});
}
}
效果如下，传入的参数、组件的样式、深度选择器 都生效了
extend 或者 new Vue 构造器
上面的方法虽然已经解决了我们的需求，但是这样的写法其实对于我们来说是比较繁琐的，代码可阅读性也差了点，那么能不能再我们的 .vue 组件里面去写好然后使用呢
那我们可以使用vue的 extend构造器 或者 Vue函数 来创建一个vue实例，然后通过获取实例的 $el 获取dom对象，这样更加灵活，并且涵盖场景多
首先可以在原先的组件文件夹下创建一个index.js文件
import Vue from 'vue'
import customComponent from './index.vue'
export const createComponent = (name = '') => {
const element = document.createElement('div') // 创建一个真实dom节点
// new Vue
const app = new Vue({
components: { customComponent },
template: `<customComponent :name="name"/>`, // 使用并传入props
data() {
return {
name,
};
},
});
// vue构造器extend
// const extendComponents = Vue.extend(customComponent)
// const app = new extendComponents({
// propsData: {
// name
// }
// })
app.$mount(element); // 挂载到真实节点
return app.$el
}
在饿了么组件中使用，注意不要使用innerHTML来转换字符串，它不会转换父节点
import { createComponent } from "./components/CustomComponents/index.js";
export default {
mounted() {
const element = createComponent('我是new Vue创建的')
console.log(element, 'element')
this.$notify({
message: element.outerHTML, // 把dom对象转为html字符串
dangerouslyUseHTMLString: true,
duration: 0
});
},
}
vue3 写法
同样先写一个组件
<template>
<div class="customComponent">
<div>{{ name }}</div>
<div>
<i class="el-icon-platform-eleme" style="font-size: 22px"></i>
</div>
<el-button type="primary">按钮</el-button>
</div>
</template>
<script setup lang="ts">
interface Props {
name: string;
}
const props = withDefaults(defineProps<Props>(), {
name: '我是测试',
});
</script>
<style lang="less" scoped>
.customComponent {
display: flex;
align-items: center;
justify-content: space-between;
}
:deep(.el-button) {
font-size: 28px;
}
</style>
h() 函数
这个vue3的api其实相当于vue2的createElement，只不过写法稍有区别
import { h } from "vue";
import { ElNotification } from "element-plus";
import CustomComponents from "./components/CustomComponents/index.vue";
onMounted(() => {
const element = h(CustomComponents, {
name: "我是createElement创建的",
});
console.log(element);
ElNotification({
message: element,
duration: 0,
});
});
createVNode() 函数
h() 函数和 createVNode() 函数都是创建 dom节点，作用是一样的，但是在 vue3 中createVNode() 函数的功能比 h() 函数要多且做了性能优化，渲染节点的速度也更快。
import { createVNode } from "vue";
onMounted(() => {
const element = createVNode(CustomComponents, {
name: '我是createVNode创建的'
})
console.log(element);
ElNotification({
message: element,
duration: 0,
});
});
在vue3 中 Vue.extend 构造器被移除了，所以我们也可以用 createApp 来创建一个vue应用实例，但是注意该实例与 项目中的 vue实例 没有任何关联
尾巴
这是本人理解的所有关于 把vue组件在全局js调用的api 如何使用的方法
可能细心的读者发现了，我展示的都是静态数据，这些方法并没有办法做成 实时数据更新
因为都是通过api调用显示的，如果想要实现数据的实时更新，我们需要手动封装一个自己专属的js调用组件，通过调用方法来传入数据实现更新
如果有这方面的需求可以看我的另一篇文章
