个人中心
gpt4 book ai didi

vue3.0实现插件封装

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 30 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章vue3.0实现插件封装由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

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

1、组件准备

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

?
1
2
3
4
5
6
7
8
9
10
11
12
< 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 >
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<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操作.

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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 插件封装的资料请关注我其它相关文章！ 。

原文链接：https://juejin.cn/post/6905409280761921543 。

最后此篇关于vue3.0实现插件封装的文章就讲到这里了,如果你想了解更多关于vue3.0实现插件封装的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

30 4 0
文章推荐： 解决使用gateway后静态资源失效的问题
文章推荐： MySQL数据表分区策略及优缺点分析
文章推荐： SpringBoot上传和下载文件的原理解析
文章推荐： DELL R730服务器配置RAID与安装服务器系统以及域的控制详细图文教程
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com