Vue3开发toast插件教程附源码下载
日期：2021-04-02
来源：程序思维浏览：2433次
Vue3最近已经发布了，改动的不小，尤其是开发插件，我们都知道第三方ui库都是以插件的模式开发的，身为vue开发者不会开发插件真说不过去，最近我在百度上搜索vue3开发插件的教程，不是很完善而且也没有提供源码下载，vue官方文档写的也是不清不楚，目前支持vue3的第三方ui库我知道的是vant-ui，但是代码示例还是vue2使用方式，其实已经支持了vue3，如果自己会开发vue3的插件那么也会使用vant的vue3模式调用，所以会自己开发插件还是很有必要的，下面我就以开发toast(轻提示)插件，来演示一下vue3是如何开发插件的：
在src/plugins/my-toast/toast.vue文件中的代码如下：
<template>
<div class="toast-wrap">
{{message}}
</div>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: "my-toast",
//vue2模式
// data(){
// return {
// message:""
// }
// },
props:{
message:{
type:String,
default:""
}
},
//vue3模式
setup(props,conText){
let message=ref("");
//监听父组件传过来的值，使用props.message接收index.ts文件中vm.component.props.message传过来的值
watch(()=>props.message,(newVal,oldVal)=>{
message.value=newVal;
})
return {
message
}
}
}
</script>
<style scoped>
.toast-wrap{background-color:rgba(0,0,0,0.8);padding:8px 15px;font-size:14px;color:#FFFFFF;text-align: center;position: fixed;z-index:99;left:50%;top:50%;transform: translate(-50%,-50%);border-radius: 5px;}
</style>
可以看到以上代码vue3推荐使用hook(钩子函数)来开发程序，如果想用vue2模式也是向下兼容的，而且vue3推荐使用ts来编程，如果不熟悉vue3和ts也没有关系，最近我会发布vue3+TypeScript的视频教程，toast.vue文件就是ui界面和数据的接收。
在src/plugins/my-toast/index.ts文件中的代码如下：
import MyToast from "./toast.vue";
import {createVNode, render} from "vue";
interface IOptions{
message:string,
duration?:number,
onClose?:Function
}
export default {
install:(app:any):void=>{
//是否存在toast，防止toast在未销毁前，连续单击按钮生成多个toast
let isToast=false;
//注册全局方法，相当于vue2的Vue.prototype.$myToast
app.config.globalProperties.$myToast=function(opts:IOptions){
//如果toast不存在,开始创建toast
if(!isToast){
//将isToast设置为true，在toast未销毁时不执行下面的程序
isToast=true;
//创建虚拟节点
let vm:any = createVNode(MyToast);
//创建div容器
let container=document.createElement("div");
//渲染虚拟节点
render(vm, container);
//将新创建的div元素添加到<body>元素内部
document.body.appendChild(container);
//如果存在opts.message属性，赋值为opts.message的值，否则赋值为空,并传递给MyToast组件内部data方法返回的message属性
//如果toast.vue使用vue2模式定义数据使用vm.component.data.message传值
// vm.component.data.message=opts.message || "";
//如果toast.vue使用vue3模式定义hook的setup使用以下方式传值
vm.component.props.message=opts.message || "";
let duration=opts.duration || 2000;
setTimeout(()=>{
//销毁toast
document.body.removeChild(container);
//toast销毁后将isToast设置为false
isToast=false;
//如果onClose方法存在
if(opts.onClose){
//调用onClose方法
opts.onClose();
}
},duration);
}
}
}
}
这里主要是操作显示/隐藏toast.vue里的组件，并将数据传递过去，类似于父组件给子组件传值，参数opts.message为提示信息，比如“确认要删除吗？”，opts.duration为显示的时间默认为2000毫秒，opts.onClose()是一个回调函数，关闭toast后可以在这个函数里写业务逻辑。
插件开发完成后如何使用呢？
首选在main.ts文件中全局注册，代码如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
//引入toast插件
import MyToast from "./plugins/my-toast";
let app=createApp(App).use(store).use(router);
//全局注册toast插件
app.use(MyToast);
app.mount('#app');
接下来在src/views/plugins.vue文件中使用插件，代码如下：
<template>
<div>
<button type="button" @click="showToast">显示toast</button>
</div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
export default defineComponent({
name: "plugins",
setup() {
//获取组件实例，由于vue3的setup里不能使用this需要用getCurrentInstance()来代替
let { proxy }: any = getCurrentInstance();
function showToast() {
//调用toast插件
proxy.$myToast({
message: "我是toast插件",
duration: 3000,
onClose: () => {
console.log("已关闭");
},
});
}
}
return {
showToast,
showVantToast,
showModal,
};
},
methods: {
//vue2调用方式
// showToast(){
// let _this:any=this;
// _this.$myToast({
// message:"我是toast插件",
// duration:3000,
// onClose:()=>{
// console.log("已关闭");
// }
// })
// }
},
});
</script>
好了，toast插件已经开发完成，思路就是这样，其他插件开发思路也是一样的，下面是vue3插件源码下载地址：
链接: https://pan.baidu.com/s/1_5OYQT8W-RXnVs3ORhmfOA
密码: h0u2
此代码包包含toast、confirm、alert等自己写的插件和router路由，vuex状态管理，vant-ui的演示案例，运行方式和vue2一样。
在src/plugins/my-toast/toast.vue文件中的代码如下：
<template>
<div class="toast-wrap">
{{message}}
</div>
</template>
<script>
import {ref,watch} from "vue";
export default {
name: "my-toast",
//vue2模式
// data(){
// return {
// message:""
// }
// },
props:{
message:{
type:String,
default:""
}
},
//vue3模式
setup(props,conText){
let message=ref("");
//监听父组件传过来的值，使用props.message接收index.ts文件中vm.component.props.message传过来的值
watch(()=>props.message,(newVal,oldVal)=>{
message.value=newVal;
})
return {
message
}
}
}
</script>
<style scoped>
.toast-wrap{background-color:rgba(0,0,0,0.8);padding:8px 15px;font-size:14px;color:#FFFFFF;text-align: center;position: fixed;z-index:99;left:50%;top:50%;transform: translate(-50%,-50%);border-radius: 5px;}
</style>
可以看到以上代码vue3推荐使用hook(钩子函数)来开发程序，如果想用vue2模式也是向下兼容的，而且vue3推荐使用ts来编程，如果不熟悉vue3和ts也没有关系，最近我会发布vue3+TypeScript的视频教程，toast.vue文件就是ui界面和数据的接收。
在src/plugins/my-toast/index.ts文件中的代码如下：
import MyToast from "./toast.vue";
import {createVNode, render} from "vue";
interface IOptions{
message:string,
duration?:number,
onClose?:Function
}
export default {
install:(app:any):void=>{
//是否存在toast，防止toast在未销毁前，连续单击按钮生成多个toast
let isToast=false;
//注册全局方法，相当于vue2的Vue.prototype.$myToast
app.config.globalProperties.$myToast=function(opts:IOptions){
//如果toast不存在,开始创建toast
if(!isToast){
//将isToast设置为true，在toast未销毁时不执行下面的程序
isToast=true;
//创建虚拟节点
let vm:any = createVNode(MyToast);
//创建div容器
let container=document.createElement("div");
//渲染虚拟节点
render(vm, container);
//将新创建的div元素添加到<body>元素内部
document.body.appendChild(container);
//如果存在opts.message属性，赋值为opts.message的值，否则赋值为空,并传递给MyToast组件内部data方法返回的message属性
//如果toast.vue使用vue2模式定义数据使用vm.component.data.message传值
// vm.component.data.message=opts.message || "";
//如果toast.vue使用vue3模式定义hook的setup使用以下方式传值
vm.component.props.message=opts.message || "";
let duration=opts.duration || 2000;
setTimeout(()=>{
//销毁toast
document.body.removeChild(container);
//toast销毁后将isToast设置为false
isToast=false;
//如果onClose方法存在
if(opts.onClose){
//调用onClose方法
opts.onClose();
}
},duration);
}
}
}
}
这里主要是操作显示/隐藏toast.vue里的组件，并将数据传递过去，类似于父组件给子组件传值，参数opts.message为提示信息，比如“确认要删除吗？”，opts.duration为显示的时间默认为2000毫秒，opts.onClose()是一个回调函数，关闭toast后可以在这个函数里写业务逻辑。
插件开发完成后如何使用呢？
首选在main.ts文件中全局注册，代码如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store';
//引入toast插件
import MyToast from "./plugins/my-toast";
let app=createApp(App).use(store).use(router);
//全局注册toast插件
app.use(MyToast);
app.mount('#app');
接下来在src/views/plugins.vue文件中使用插件，代码如下：
<template>
<div>
<button type="button" @click="showToast">显示toast</button>
</div>
</template>
<script lang="ts">
import { defineComponent, getCurrentInstance } from "vue";
export default defineComponent({
name: "plugins",
setup() {
//获取组件实例，由于vue3的setup里不能使用this需要用getCurrentInstance()来代替
let { proxy }: any = getCurrentInstance();
function showToast() {
//调用toast插件
proxy.$myToast({
message: "我是toast插件",
duration: 3000,
onClose: () => {
console.log("已关闭");
},
});
}
}
return {
showToast,
showVantToast,
showModal,
};
},
methods: {
//vue2调用方式
// showToast(){
// let _this:any=this;
// _this.$myToast({
// message:"我是toast插件",
// duration:3000,
// onClose:()=>{
// console.log("已关闭");
// }
// })
// }
},
});
</script>
好了，toast插件已经开发完成，思路就是这样，其他插件开发思路也是一样的，下面是vue3插件源码下载地址：
链接: https://pan.baidu.com/s/1_5OYQT8W-RXnVs3ORhmfOA
密码: h0u2
此代码包包含toast、confirm、alert等自己写的插件和router路由，vuex状态管理，vant-ui的演示案例，运行方式和vue2一样。
精品好课
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器，利用mp4转成m3u8格式的视频，并在移动端和PC端进行播放支持m3u8直播格式，兼容...
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程，本课程教你如何快速学会VUE和uni-app并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己...
HTML5基础入门视频教程，教学思路清晰，简单易学必会。适合人群：创业者，只要会打字，对互联网编程感兴趣都可以学。课程概述：该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
VUE是目前最火的前端框架之一，就业薪资很高，本课程教您如何快速学会VUE+ES6并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习VUE高薪就...
React是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React并应用到实战，教你如何解决内存泄漏，常用UI库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习React高薪就...
jquery视频教程从入门到精通，课程主要包含：jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
React和VUE是目前最火的前端框架，就业薪资很高，本课程教您如何快速学会React和VUE并应用到实战，教你如何解决内存泄漏，常用库的使用，自己封装组件，正式上线白屏问题，性能优化等。对正在工作当中或打算学习Re...
React是前端最火的框架之一，就业薪资很高，本课程教您如何快速学会React并应用到实战，对正在工作当中或打算学习React高薪就业的你来说，那么这门课程便是你手中的葵花宝典。