以Toast为例玩一玩Vue3

在 Vue2 时写过一个 toast 插件。详见 Vue | 如何封装一个toast插件

翻看 Vue2 的 toast 代码可以发现核心是这句:

Vue.prototype.$toast = toast

Vue2 的时候会暴露一个 install 方法,并通过全局方法 Vue.use() 使用插件。

install 方法的第一个参数是 Vue 构造器,通过 new Vue() 实例化后,在组件中就能调用 this.$toast 使用组件了。

Vue3 的 install 方法不是传入 Vue 构造器,没有原型对象,Vue.prototype 是 undefined,上面的方式也就没啥用了。


Vue3 出来有段时间了,Vue3 的变化,广度上或者影响范围上个人认为应该是this,在 Vue2 中到处可见 this.$routerthis.$store等代码。在 Vue3 中,不再推荐这种都往 prototype 中加的方式。

不妨看一看配套的 VueX 的写法:

import { useStore } from 'vuex'

export default {
  setup () {
    const store = useStore()
  }
}

这种方式的术语是Hook,具体可见 React 的文档。那么我们期望的 Toast 的使用方式为:

import { useToast } from "./useToast.js";
export default{
setup() {
      const Toast = useToast(); 
      Toast("Hello World");
};
}

那么问题来了,useToast.js 这个文件应该如何编写。

首先,明确一点我们先将 DOM 搞出来,一个居中的框,里面有提示文字。功能代码,一定时间消失,可以使用 setTimeout() 并设置默认事件2000毫秒。

在使用 Vue 时使用的是单文件方式template,这里不妨采用 h 函数来写,一下子高大上起来了呢。

 const toastVM = createApp({
  setup() {
    return () =>
      h(
        'div',
        {
          class: [
            'lx-toast',
          ],
          style: {
            display: state.show ? 'block' : 'none',
            background: "#000",
            color: "#fff",
            width: '100px',
            position: "fixed",
            top: "50%",
            left: "50%",
            transform: "translate(-50%, -50%)",
            padding: "8px 10px",
          }
        },
        state.text
      );
  }
});

核心代码是:display: state.show ? 'block' : 'none' 根据 state.show 的值来决定是否可以展示。

对于 state 的定义:

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

接下来是将 h 好的东西挂到 DOM 中,

const toastWrapper = document.createElement('div');
toastWrapper.id = 'lx-toast';
document.body.appendChild(toastWrapper);
toastVM.mount('#lx-toast');

最后是核心的 useToast 函数:

export function useToast() {
  return function Toast(msg) {
    console.log(msg)
    // 拿到传来的数据
    state.show = true
    state.text = msg
    setTimeout(() => {
      state.show = false
    }, 1000);
  }
}

暴露函数可以控制展示文字数据,可能还需要控制展示时间等,更多的功能可以进一步扩展。

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 157,298评论 4 360
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,701评论 1 290
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 107,078评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,687评论 0 202
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,018评论 3 286
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,410评论 1 211
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,729评论 2 310
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,412评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,124评论 1 239
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,379评论 2 242
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,903评论 1 257
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,268评论 2 251
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,894评论 3 233
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,014评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,770评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,435评论 2 269
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,312评论 2 260

推荐阅读更多精彩内容