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 $router和$route的区别详解
Dec 02 Vue.js
实用的 vue tags 创建缓存导航的过程实现
Dec 03 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue集成一个支持图片缩放拖拽的富文本编辑器
Jan 29 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
vue-router懒加载的3种方式汇总
Feb 28 Vue.js
VUE实现吸底按钮
Mar 04 Vue.js
vue中三级导航的菜单权限控制
Mar 31 Vue.js
vue实现锚点定位功能
Jun 29 Vue.js
idea编译器vue缩进报错问题场景分析
Jul 04 Vue.js
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
vue动态绑定style样式
Apr 20 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
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
PHP_SELF,SCRIPT_NAME,REQUEST_URI区别
2014/12/24 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
FormValid0.5版本发布,带ajax自定义验证例子
2007/08/17 Javascript
基于Jquery的跨域传输数据(JSONP)
2011/03/10 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
将光标定位于输入框最右侧实现代码
2012/12/04 Javascript
JS中 用户登录系统的解决办法
2013/04/15 Javascript
jquery和javascript的区别(常用方法比较)
2013/07/04 Javascript
JavaScript 语言基础知识点总结(思维导图)
2013/11/10 Javascript
jquery中的常见问题及快速解决方法小结
2016/06/14 Javascript
JS实现兼容火狐及IE iframe onload属性的遮罩层隐藏及显示效果
2016/08/23 Javascript
BootStrap Table 获取同行不同列元素的方法
2016/12/19 Javascript
Vue.js移动端左滑删除组件的实现代码
2017/09/08 Javascript
基于Bootstrap表单验证功能
2017/11/17 Javascript
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
react native基于FlatList下拉刷新上拉加载实现代码示例
2018/09/30 Javascript
vue-music 使用better-scroll遇到轮播图不能自动轮播问题
2018/12/03 Javascript
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
关于Python中空格字符串处理的技巧总结
2017/08/10 Python
Django-Rest-Framework 权限管理源码浅析(小结)
2018/11/12 Python
python日期相关操作实例小结
2019/06/24 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python基于pandas爬取网页表格数据
2020/05/11 Python
关于Python3的import问题(pycharm可以运行命令行import错误)
2020/11/18 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
如何获取某个日期是当月的最后一天
2013/12/05 面试题
法学专业本科生自荐信范文
2013/12/17 职场文书
简历自我评价模版
2014/01/31 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
工作求职信
2014/07/04 职场文书
家长评语怎么写
2014/12/30 职场文书
python全面解析接口返回数据
2022/02/12 Python