Vue3开发toast插件教程附源码下载

来源:程序思维浏览: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一样。
精品好课
React实战视频教程仿京东移动端电商
React是前端最火的框架之一,就业薪资很高,本课程教您如何快速学会React并应用到实战,对正在工作当中或打算学习React高薪就业的你来说,那么这门课程便是你手中的葵花宝典。
最新完整React+VUE视频教程从入门到精,企业级实战项目
React和VUE是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React和VUE并应用到实战,教你如何解决内存泄漏,常用库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习Re...
jQuery视频教程从入门到精通
jquery视频教程从入门到精通,课程主要包含:jquery选择器、jquery事件、jquery文档操作、动画、Ajax、jquery插件的制作、jquery下拉无限加载插件的制作等等......
Vue2+Vue3+ES6+TS+Uni-app开发微信小程序从入门到实战视频教程
2021年最新Vue2+Vue3+ES6+TypeScript和uni-app开发微信小程序从入门到实战视频教程,本课程教你如何快速学会VUE和uni-app并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己...
VUE2+VUE3视频教程从入门到精通(全网最全的Vue课程)
VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE+ES6并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就...
HTML5基础入门视频教程易学必会
HTML5基础入门视频教程,教学思路清晰,简单易学必会。适合人群:创业者,只要会打字,对互联网编程感兴趣都可以学。课程概述:该课程主要讲解HTML(学习HTML5的必备基础语言)、CSS3、Javascript(学习...
HTML5视频播放器video开发教程
适用人群1、有html基础2、有css基础3、有javascript基础课程概述手把手教你如何开发属于自己的HTML5视频播放器,利用mp4转成m3u8格式的视频,并在移动端和PC端进行播放支持m3u8直播格式,兼容...
最新完整React视频教程从入门到精通纯干货纯实战
React是目前最火的前端框架,就业薪资很高,本课程教您如何快速学会React并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习React高薪就...
收藏
扫一扫关注我们