Vue3开发toast插件教程附源码下载
日期:2021-04-02
来源:程序思维浏览:2682次
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一样。
精品好课