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祖孙组件之间的数据传递案例
Dec 07 Vue.js
8个非常实用的Vue自定义指令
Dec 15 Vue.js
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
手写Vue源码之数据劫持示例详解
Jan 04 Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 Vue.js
vue脚手架项目创建步骤详解
Mar 02 Vue.js
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue生命周期钩子函数以及触发时机
Apr 26 Vue.js
vue3 自定义图片放大器效果的示例代码
Jul 23 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
PHP模块 Memcached功能多于Memcache
2011/06/14 PHP
php摘要生成函数(无乱码)
2012/02/04 PHP
PHP获取文件后缀名的三个函数
2012/10/15 PHP
phpcms的分类名称和类别名称的调用
2017/01/05 PHP
Laravel 5.4.36中session没有保存成功问题的解决
2018/02/19 PHP
PHP进阶学习之垃圾回收机制详解
2019/06/18 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
JS localStorage实现本地缓存的方法
2013/06/22 Javascript
Js的Array数组对象详解
2016/02/22 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
vue-cli下的vuex的简单Demo图解(实现加1减1操作)
2018/02/26 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
VUE+Element环境搭建与安装的方法步骤
2019/01/24 Javascript
vue权限问题的完美解决方案
2019/05/08 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
2019/09/27 Javascript
JS通用方法触发点击事件代码实例
2020/02/17 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
[02:53]DOTA2英雄昆卡基础教程
2013/11/25 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python通过加号运算符操作列表的方法
2015/07/28 Python
python使用wxpy实现微信消息防撤回脚本
2019/04/29 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
selenium2.0中常用的python函数汇总
2019/08/05 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
结合OpenCV与TensorFlow进行人脸识别的实现
2019/10/10 Python
css 元素选择器的简单实例
2016/05/23 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
学校食堂采购员岗位职责
2013/12/05 职场文书
英语专业毕业生自荐信范文
2013/12/31 职场文书
安全生产汇报材料
2014/02/17 职场文书
大型主题婚礼活动策划方案
2014/09/15 职场文书
房屋买卖定金协议书
2016/03/21 职场文书
2016年企业安全生产月活动总结
2016/04/06 职场文书