一、Vue3混合插件开发

为了演示插件开发过程，这里创建一个简单弹窗组件。功能：通过增加全局函数方法，使用渲染函数去调用Vue组件并挂载到真实DOM显示。

1. 文件目录

2. 创建弹窗组件，路径 /src/plugins/example/dialog.vue，这里仅供参考

// /src/plugins/example/dialog.vue
<script lang="jsx">
export default {props: {show: {type: Boolean,default: false}},setup(props) {const msg = '这里是弹窗内容，仅做演示'return () =>props.show ? (<div className="dialog"><div className="content">{msg}</div></div>) : (<div />)}
}
</script><style lang="scss" scoped>
.dialog {position: fixed;top: 0;left: 0;width: 100%;height: 100%;display: flex;align-items: center;justify-content: center;background: black;.content {height: 100px;width: 100%;background: white;margin: 0 30px;padding: 15px;border-radius: 10px;}
}
</style>

3. 创建全局调用方法，路径 /src/plugins/example/index.js

// /src/plugins/example/index.js
import { h, render } from 'vue'
import Dialog from './dialog.vue'const examplePlugin = {}
const removeElement = (el) => {if (typeof el.remove !== 'undefined') {el.remove()} else {el.parentNode.removeChild(el)}
}examplePlugin.install = function (app) {app.config.globalProperties.$exampleDialog = (type) => {if (typeof app.exampleDialogIns === 'undefined') { //创建弹窗const obj = {vNodes: h(Dialog, { show: type }), // 创建虚拟DOMel: document.createElement('div') // 元素容器}render(obj.vNodes, obj.el) // 挂载到容器document.body.appendChild(obj.el) // 追加到页面app.exampleDialogIns = obj}if (!type) { // false则关闭弹窗并销毁变量render(null, app.exampleDialogIns.el)removeElement(app.exampleDialogIns.el)delete app.exampleDialogIns}}
}export default examplePlugin

二、插件使用

1. 入口导入插件，路径 /src/main.ts

// /src/main.ts
...
import exampleDialog from './plugins/example/index'app.use(exampleDialog)
...

2. 组件里使用插件

<script setup lang="ts">
import { getCurrentInstance } from 'vue'const ctx = getCurrentInstance()?.appContext.config.globalProperties
ctx.$exampleDialog(true)
setTimeout(() => ctx.$exampleDialog(false), 3000)
</script><template><div></div>
</template>

Vue3渲染函数开发混合插件之函数调用组件相关推荐

使用Vue3+Element Plus开发Chrome插件
使用Vue3+Element Plus开发Chrome插件引言初始Vue项目的创建 Element-Plus组件的安装及导入其他文件配置 .eslintrc.js文件 vue.config.js ...
Vue.js学习笔记—sort-table：实战：使用Render函数开发可排序的表格组件
参考<Vue,js>实战(梁灏编著) sort-table:实战:使用Render函数开发可排序的表格组件 index.html <!DOCTYPE html> <htm ...
Vue3官网-可复用组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...
vue渲染大量数据如何优化_Vue3 Compiler 优化细节，如何手写高性能渲染函数
送5本<你不知道的 JavaScript 上卷>点我抽奖,祝大家好运 Vue3 的 Compiler 与 runtime 紧密合作,充分利用编译时信息,使得性能得到了极大的提升.本文的目的 ...
vue2基础- render 渲染函数基础使用
文章目录什么是渲染函数为什么需要渲染函数函数式组件怎么使用渲染函数使用 JSX 语法示例什么是渲染函数我们知道Vue是一款流行的JavaScript前端框架.绝大多数情况下我们都是使用 ...
vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM
文章目录过渡 & 动画 Transition 组件基于 CSS 的过渡效果 CSS 过渡类名 class 为过渡效果命名 CSS 过渡 transition 实例1: 实例2: CSS 动 ...
使用 Vue3 + vite + elementUI 开发一个 Utools Markdown 编辑器插件
文章目录目的开发文档整理基础工具的集成初始化项目框架引入按需引用和 SASS 引入验证 utools 开发配置调试和打包插件功能实现依赖库的安装调用布局实现 Editor.vue ...
vue3利用渲染函数实现格子布局（九宫格）
前言因为工作中需要用到类似九宫格的布局,而element-plus里没有类似的组件,因此自己实现了一个格子布局的组件思路其实格子布局目前我更多的是在手机端使用,而目前手机端开发使用的是vant组 ...
《Vue3+TS》开发一个自己的起始页（二）chrome插件化
前言各位小伙伴们大家好,求关注,求收藏,求点赞: 另外为自己拉一波票:https://bbs.csdn.net/topics/603955887?spm=1001.2014.3001.6953,诚实 ...

Vue3渲染函数开发混合插件之函数调用组件

一、Vue3混合插件开发

二、插件使用

Vue3渲染函数开发混合插件之函数调用组件相关推荐

最新文章

热门文章