當前位置：首頁 > 前端技术 > vue >内容正文

vue

vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」

發(fā)布時間：2024/10/8 vue 95 豆豆

生活随笔收集整理的這篇文章主要介紹了 vue 时间插件_Vue3 插件开发详解尝鲜版「值得收藏」小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

作者:lishuai

轉發(fā)鏈接：https://segmentfault.com/a/1190000022757326

前言

vue3.0-beta 版本已經(jīng)發(fā)布了一段時間了，正式版本據(jù)說在年中發(fā)布(直播的時候說的是年中還是年終，網(wǎng)上傳聞說是6月份)。嘴上說著學不動，身體卻很誠實地創(chuàng)建一個vue3的項目，興致勃勃地引入 vue2 插件的時候，眉頭一皺，發(fā)現(xiàn)事情并沒有那么簡單。

更多的Vue實踐知識點文章，請見本篇文章底部，有好東西等著你

瀏覽器無情地拋出了一個錯誤：

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

不是說兼容vue2的寫法嗎，插件不兼容，這是鬧哪樣？發(fā)下牢騷之后還是得解決問題。研究插件的代碼，是這么實現(xiàn)的

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

vue2 插件的時候會暴露一個 install 方法，并通過全局方法 Vue.use() 使用插件。install 方法的第一個參數(shù)是 Vue 構造器，插件的方法就添加在 Vue 構造器的原型對象上。通過 new Vue() 實例化后，在組件中就能調用 this.$toast 使用組件了。(具體實現(xiàn)可以參考我之前的一篇文章：Vue.js 插件開發(fā)詳解，下面也是基于這個插件demo對比修改)。

而 vue3 的 install 方法不是傳入 Vue 構造器，沒有原型對象，Vue.prototype 是 undefined，所以報錯了。vue3 采用依賴注入的方式，在插件內部利用 provide 和 inject 并暴露出一個組合函數(shù)，在組件中使用。

插件實現(xiàn)

基本框架

下面先實現(xiàn)一個插件的基本框架。

import { provide, inject } from 'vue';const ToastSymbol = Symbol(); // 用Symbol創(chuàng)建一個唯一標識，多個插件之間不會沖突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 方法，傳入插件參數(shù)，子組件中就能使用 toast 功能了。

// app.vue 根組件import { provideToast } from 'vue2-toast';export default { setup() { provideToast({ width: '200px', // 配置toast寬度 duration: 2000 // 配置toast持續(xù)顯示時長 }); }};

在 useToast 方法中，返回了 toast 方法，那在所有的后代組件中調用 useToast 方法，就能拿到 toast 方法了。

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

數(shù)據(jù)響應

想要控制 toast DOM 元素的顯示隱藏，以及提示文本的變化，需要創(chuàng)建響應式的數(shù)據(jù)，在 vue3 中可以通過 reactive 方法創(chuàng)建一個響應式對象。

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

掛載DOM

在頁面中顯示一個 toast，那就免不了要創(chuàng)建一個 DOM 并掛載到頁面中。在 vue2 中是通過Vue.extend 創(chuàng)建一個子類，將子類生成的實例掛載到某個元素中，而 vue3 中通過 createApp 方法來實現(xiàn)的。

完整示例

上面的每一步是這個插件的關鍵內容，接下來就是完善下細節(jié)，比如用戶配置插件的全局參數(shù)，設置 toast 的樣式，持續(xù)時間，顯示位置等，這里就不一一細講了，完整示例如下：

import { provide, inject, reactive, createApp, h } from 'vue';const ToastSymbol = Symbol();const globalConfig = { type: 'bottom', // toast位置 duration: 2500, // 持續(xù)時長 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實例存在則不重新創(chuàng)建 toastVM = createApp({ setup() { return () => h( 'div', { // 這里是根據(jù)配置顯示一樣不同的樣式 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) { // 如果該節(jié)點以經(jīng)存在則不重新創(chuàng)建 toastWrapper = document.createElement('div'); toastWrapper.id = 'lx-toast'; document.body.appendChild(toastWrapper); toastVM.mount('#lx-toast'); } if (toastTimer) clearTimeout(toastTimer); // 定時器，持續(xù)時長之后隱藏 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 正式版還未發(fā)布，未來會不會有更多的插件形式，咋也不敢問，至少這種還是比較穩(wěn)的。