vue3.0实现插件封装


Posted in Vue.js onDecember 14, 2020

  最近公司有一个新的项目,项目框架是我来负责搭建的,所以果断选择了Vue3.x+ts。vue3.x不同于vue2.x,他们两的插件封装方式完全不一样。由于项目中需要用到自定义提示框,所以想着自己封装一个。vue2.x提供了一个vue.extend的全局方法。那么vue3.x是不是也会提供什么方法呢?果然从vue3.x源码中还是找到了。插件封装的方法,还是分为两步。

1、组件准备

  按照vue3.x的组件风格封装一个自定义提示框组件。在props属性中定义好。需要传入的数据流。

<template>
  <div v-show="visible" class="model-container">
   <div class="custom-confirm">
    <div class="custom-confirm-header">{{ title }}</div>
    <div class="custom-confirm-body" v-html="content"></div>
    <div class="custom-confirm-footer">
     <Button @click="handleOk">{{ okText }}</Button>
     <Button @click="handleCancel">{{ cancelText }}</Button>
    </div>
   </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, watch, reactive, onMounted, onUnmounted, toRefs } from "vue";
export default defineComponent({
 name: "ElMessage",
 props: {
  title: {
   type: String,
   default: "",
  },
  content: {
   type: String,
   default: "",
  },
  okText: {
   type: String,
   default: "确定",
  },
  cancelText: {
   type: String,
   default: "取消",
  },
  ok: {
   type: Function,
  },
  cancel: {
   type: Function,
  },
 },
 setup(props, context) {
  const state = reactive({
   visible: false,
  });
  function handleCancel() {
   state.visible = false;
   props.cancel && props.cancel();
  }
  function handleOk() {
   state.visible = false;
   props.ok && props.ok();
  }
  return {
   ...toRefs(state),
   handleOk,
   handleCancel,
  };
 },
});
</script>

2、插件注册

  这个才是插件封装的重点。不过代码量非常少,只有那么核心的几行。主要是调用了vue3.x中的createVNode创建虚拟节点,然后调用render方法将虚拟节点渲染成真实节点。并挂在到真实节点上。本质上就是vue3.x源码中的mount操作。

import { createVNode, render } from 'vue';
import type {App} from "vue";
import MessageConstructor from './index.vue'
const body=document.body;
const Message: any= function(options:any){
 const modelDom=body.querySelector(`.container_message`)
  if(modelDom){
   body.removeChild(modelDom)
  }
  options.visible=true;
  const container = document.createElement('div')
  container.className = `container_message`
  //创建虚拟节点
  const vm = createVNode(
   MessageConstructor,
   options,
  )
  //渲染虚拟节点
  render(vm, container)
  document.body.appendChild(container);
} 
export default {
  //组件祖册
  install(app: App): void {
    app.config.globalProperties.$message = Message
  }
}

  插件封装完整地址。源码位置————packages/runtime-core/src/apiCreateApp中的createAppAPI函数中的mount方法。

vue3.0实现插件封装

vue3.0实现插件封装

以上就是vue3.0实现插件封装的详细内容,更多关于vue 插件封装的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
Dec 01 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
为什么推荐使用JSX开发Vue3
Dec 28 Vue.js
vue-router路由懒加载及实现的3种方式
Feb 28 Vue.js
如何理解Vue简单状态管理之store模式
May 15 Vue.js
vue-router中hash模式与history模式的区别
Jun 23 Vue.js
Vue3.0写自定义指令的简单步骤记录
Jun 27 Vue.js
Vue鼠标滚轮滚动切换路由效果的实现方法
Aug 04 Vue.js
vue使用Google Recaptcha验证的实现示例
Aug 23 Vue.js
vue使用refs获取嵌套组件中的值过程
Mar 31 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue 基于abstract 路由模式 实现页面内嵌的示例代码
Dec 14 #Vue.js
Vue实现点击当前行变色
Dec 14 #Vue.js
Vue实现简单购物车功能
Dec 13 #Vue.js
vue使用element-ui实现表单验证
Dec 13 #Vue.js
vue+element实现动态加载表单
Dec 13 #Vue.js
vue实现两个区域滚动条同步滚动
Dec 13 #Vue.js
vue实现滚动鼠标滚轮切换页面
Dec 13 #Vue.js
You might like
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
js控制web打印(局部打印)方法整理
2013/05/29 Javascript
js网页实时倒计时精确到秒级
2014/02/10 Javascript
JS动态增加删除UL节点LI及相关内容示例
2014/05/21 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
学习JavaScript编程语言的8张思维导图分享
2015/03/27 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
AngularJS ng-blur 指令详解及简单实例
2016/07/30 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JavaScript仿微博发布信息案例
2016/11/16 Javascript
vue与bootstrap实现时间选择器的示例代码
2017/08/26 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
微信小程序实现点击效果
2019/06/21 Javascript
vuex(vue状态管理)的特殊应用案例分享
2020/03/03 Javascript
解决Vue + Echarts 使用markLine标线(precision精度问题)
2020/07/20 Javascript
在python中的socket模块使用代理实例
2014/05/29 Python
纯Python开发的nosql数据库CodernityDB介绍和使用实例
2014/10/23 Python
python 查找字符串是否存在实例详解
2017/01/20 Python
Python上下文管理器和with块详解
2017/09/09 Python
对python程序内存泄漏调试的记录
2018/06/11 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
python中slice参数过长的处理方法及实例
2020/12/15 Python
html5自动播放mov格式视频的实例代码
2020/01/14 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
土木工程毕业生自荐信
2013/09/21 职场文书
校领导推荐信
2013/11/01 职场文书
老同学聚会感言
2014/02/23 职场文书
工作粗心大意检讨书
2014/09/18 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
2014基建处领导班子“四风”对照检查材料思想汇报
2014/10/04 职场文书
2014年医德医风工作总结
2014/11/13 职场文书