Vue3 插件开发详解

更新日期: 2020-04-27阅读: 2.2k标签: 插件

前言

vue3.0-beta 版本已经发布了一段时间了,正式版本据说在年中发布(直播的时候说的是年中还是年终,网上传闻说是6月份)。嘴上说着学不动,身体却很诚实地创建一个vue3的项目,兴致勃勃地引入 vue2 插件的时候,眉头一皱,发现事情并没有那么简单。

浏览器无情地抛出了一个错误:

Uncaught TypeError: Cannot set property '$toast' of undefined

不是说兼容vue2的写法吗,插件不兼容,这是闹哪样?发下牢骚之后还是得解决问题。研究插件的代码,是这么实现的

var Toast = {};
Toast.install = function (Vue, options) {
    Vue.prototype.$toast = 'Hello World';
}
module.exports = Toast;

vue2 插件的时候会暴露一个 install 方法,并通过全局方法 Vue.use() 使用插件。install 方法的第一个参数是 Vue 构造器,插件的方法就添加在 Vue 构造器的原型对象上。通过 new Vue() 实例化后,在组件中就能调用 this.$toast 使用组件了。(具体实现可以参考我之前的一篇文章Vue.js 插件开发详解,下面也是基于这个插件demo对比修改)。

而 vue3 的 install 方法不是传入 Vue 构造器,没有原型对象,Vue.prototype 是 undefined,所以报错了。vue3 采用依赖注入的方式,在插件内部利用 provide 和 inject 并暴露出一个组合函数,在组件中使用。

来自:https://segmentfault.com/a/1190000022757326

插件实现

基本框架

下面先实现一个插件的基本框架。

import { provide, inject } from 'vue';
const ToastSymbol = Symbol();     // 用Symbol创建一个唯一标识,多个插件之间不会冲突
const _toast = () => {}        // 插件的主体方法
export function provideToast(config) {    // 对外暴露的方法,将 _toast 方法提供给后代组件
    provide(ToastSymbol, _toast);
}

export function useToast() {    // 后代组件可以从该方法中拿到 toast 方法
    const toast = inject(ToastSymbol);
    if (!toast) {
        throw new Error('error');
    }
    return toast;
}

组件使用

在 provideToast 方法中,提供了 _toast 方法,那在根组件中 调用 provideToast 方法,传入插件参数,子组件中就能使用 toast 功能了。

// app.vue 根组件
import { provideToast } from 'vue2-toast';
export default {
    setup() {
        provideToast({
            width: '200px',        // 配置toast宽度
            duration: 2000        // 配置toast持续显示时长
        });
    }
};

在 useToast 方法中,返回了 toast 方法,那在所有的后代组件中调用 useToast 方法,就能拿到 toast 方法了。

// child.vue 子组件
import { useToast } from 'vue2-toast';
export default {
    setup() {
        const Toast = useToast(); // 所有的子组件都要从useToast拿到toast方法
        Toast('Hello World');
    }
};

数据响应

想要控制 toast dom 元素的显示隐藏,以及提示文本的变化,需要创建响应式的数据,在 vue3 中可以通过 reactive 方法创建一个响应式对象。

const state = reactive({
    show: true,        // DOM元素是否显示
    text: ''    // 提示文本
});

挂载DOM

在页面中显示一个 toast,那就免不了要创建一个 DOM 并挂载到页面中。在 vue2 中是通过Vue.extend 创建一个子类,将子类生成的实例挂载到某个元素中,而 vue3 中通过 createApp 方法来实现的。

const _toast = text => {
    state.show = true;
    state.text = text;
    toastVM = createApp({
        setup() {
            return () =>
                h('div', {
                    style: { display: state.show ? 'block' : 'none' }    // display 设置显示隐藏
                },
                state.text
            );
        }
    });
    toastWrapper = document.createElement('div');
    toastWrapper.id = 'toast';
    document.body.appendChild(toastWrapper);  // 给页面添加一个节点用来挂载toast元素
    toastVM.mount('#toast');
};

完整示例

上面的每一步是这个插件的关键内容,接下来就是完善下细节,比如用户配置插件的全局参数,设置 toast 的样式,持续时间,显示位置等,这里就不一一细讲了,完整示例如下:

import { provide, inject, reactive, createApp, h } from 'vue';
const ToastSymbol = Symbol();

const globalConfig = {
    type: 'bottom', // toast位置
    duration: 2500, // 持续时长
    wordWrap: false, // 是否自动换行
    width: 'auto' // 宽度
};

const state = reactive({
    show: false, // toast元素是否显示
    text: ''
});

let [toastTimer, toastVM, toastWrapper] = [null, null, null];

const _toast = text => {
    state.show = true;
    state.text = text;
    if (!toastVM) {
        // 如果toast实例存在则不重新创建
        toastVM = createApp({
            setup() {
                return () =>
                    h(
                        'div',
                        {
                            // 这里是根据配置显示一样不同的样式
                            class: [
                                'lx-toast',
                                `lx-toast-${globalConfig.type}`,
                                globalConfig.wordWrap ? 'lx-word-wrap' : ''
                            ],
                            style: {
                                display: state.show ? 'block' : 'none',
                                width: globalConfig.width
                            }
                        },
                        state.text
                    );
            }
        });
    }

    if (!toastWrapper) {
        // 如果该节点以经存在则不重新创建
        toastWrapper = document.createElement('div');
        toastWrapper.id = 'lx-toast';
        document.body.appendChild(toastWrapper);
        toastVM.mount('#lx-toast');
    }
    if (toastTimer) clearTimeout(toastTimer);
    // 定时器,持续时长之后隐藏
    toastTimer = setTimeout(() => {
        state.show = false;
        clearTimeout(toastTimer);
    }, globalConfig.duration);
};

export function provideToast(config = {}) {
    for (const key in config) {
        globalConfig[key] = config[key];
    }
    provide(ToastSymbol, _toast);
}

export function useToast() {
    const toast = inject(ToastSymbol);
    if (!toast) {
        throw new Error('error');
    }
    return toast;
}


总结

与 vue2 的插件比较大不同点在于,需要用到 toast 的每个组件中,都需要引入 useToast 方法,看起来会有点麻烦。不过其实这也是 vue 组合式 api 的目的,让代码更可读、更容易被理解,清楚的知道这个方法就是来自这里。正如标题所示,这是尝鲜版,vue3 正式版还未发布,未来会不会有更多的插件形式,咋也不敢问,至少这种还是比较稳的。


链接: https://www.fly63.com/article/detial/9189

对于前端开发,整理推荐好用的chrome插件或应用

向web前端开发者整理提供的chrome插件或应用:比如Postman、JSON Viewer、Page Ruler 、ChromeADB 等等

使用原生js开发插件的实现方法

作为前端开发,我们都习惯使用一些开源的插件例如jquery工具库,那么如何使用原生js来开发封装一个自己的插件呢?接下来就看一下怎么去开发一个自己的js插件,先上代码

typeahead.js_jquery input 搜索自动补全jQuery插件

jquery.typeahead.js是一款高级的自动补全jQuery插件。该自动补全插件提供超过50个配置选项和回调方法,用于完成自动补全功能,能够完成绝大部分表单自动补全的需求。

js轮播插件_轮播图js代码插件总汇

这篇文章为大家分享图片轮播插件,最全最简单最通用的 幻灯片轮播插件,pc端和移动端都可完美使用,能满足绝大部分网站的轮播需求。js轮播插件包括Swiper、slick、owl carousel2、jssor/slider 、iSlider 等

ios风格的时间选择插件

在上个项目中,客户希望时间选择插件可以是ios风格的那种,但是找了很久,发现并没有用vue的ios风格时间插件,于是自己便自己造了一个轮子.插件依赖于better-scroll和vue

前端最常用的vscode插件集

在前端开发中,使用Visual Studio Code有哪些你常用的插件?推荐几个自己喜欢的,不带链接,自己搜索安装吧。这些都是比较实用、前端必备的插件集

浏览器插件_常用谷歌浏览器插件推荐

常用谷谷歌浏览器确实没有其它国产软件的内置功能丰富。但是 Google 浏览器的的优点恰恰就体现在拥有超简约的界面,以及支持众多强大好用的扩展程序,用户能够按照自己的喜好去个性化定制浏览器。今天我就给大家介绍几款自己常用的插件。

sublime安装插件

安装Sublime text 2插件很方便,可以直接下载安装包解压缩到Packages目录,也可以安装package control组件,然后直接在线安装

BlockUI详细用法_Jquery中ajax加载提示插件blickUI

BlockUI 插件是用于进行AJAX操作时模拟同步传输时锁定浏览器操作。当它被激活时,它会阻止使用者与页面(或页面的一部分)进行交互,直至它被取消。BlockUI以在DOM中添加元素的方法来实现阻止用户与浏览器交互的外观和行为

vue项目中vscode格式化配置和eslint配置冲突

使用vscode开发vue项目的时候,从远端拉下一个新的项目后,安装完依赖后跑起项目时,发现直接报了一堆语法错误:包括换行、空格、单双引号、分号等各种格式问题

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!