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使用vant中的checkbox实现全选功能
Nov 17 Vue.js
详解Vue 的异常处理机制
Nov 30 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
Vue.extend 登录注册模态框的实现
Dec 29 Vue.js
vue 中this.$set 动态绑定数据的案例讲解
Jan 29 Vue.js
Vue+Bootstrap实现简易学生管理系统
Feb 09 Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 Vue.js
Vue实现下拉加载更多
May 09 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
vue使用wavesurfer.js解决音频可视化播放问题
Apr 04 Vue.js
vue实现省市区联动 element-china-area-data插件
Apr 22 Vue.js
Vue ECharts实现机舱座位选择展示功能
May 15 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
jquery eval解析JSON中的注意点介绍
2013/08/23 Javascript
js动态创建标签示例代码
2014/06/09 Javascript
js中 javascript:void(0) 用法详解
2015/08/11 Javascript
Bootstrap打造一个左侧折叠菜单的系统模板(二)
2016/05/17 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
js实现上传文件添加和删除文件选择框
2016/10/24 Javascript
Vue自定义指令拖拽功能示例
2017/02/17 Javascript
教你5分钟学会用requirejs(必看篇)
2017/07/25 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
node 使用 async 控制并发的方法
2018/05/07 Javascript
vue侧边栏动态生成下级菜单的方法
2018/09/07 Javascript
Vue项目引进ElementUI组件的方法
2018/11/11 Javascript
layui点击数据表格添加或删除一行的例子
2019/09/12 Javascript
Python黑魔法Descriptor描述符的实例解析
2016/06/02 Python
Python 数据结构之旋转链表
2017/02/25 Python
Tensorflow实现卷积神经网络的详细代码
2018/05/24 Python
python利用selenium进行浏览器爬虫
2019/04/25 Python
Python 实现Serial 与STM32J进行串口通讯
2019/12/18 Python
python deque模块简单使用代码实例
2020/03/12 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
Volcom法国官网:美国冲浪滑板品牌
2017/05/25 全球购物
Sephora丝芙兰泰国官方网站:国际知名化妆品购物
2017/11/15 全球购物
青年文明号事迹材料
2014/01/18 职场文书
优秀大学生职业生涯规划书
2014/02/27 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
《卖木雕的少年》教学反思
2014/04/11 职场文书
驾驶员培训方案
2014/05/01 职场文书
2016七一建党节慰问信
2015/11/30 职场文书
学校中层领导培训心得体会
2016/01/11 职场文书
银行柜员优质服务心得体会
2016/01/22 职场文书
2016年学校党支部创先争优活动总结
2016/04/05 职场文书
2019年大学推荐信
2019/06/24 职场文书
详解PHP用mb_string处理windows中文字符
2021/05/26 PHP
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python