相信普通的vue組件大家都會(huì)寫, 定義 -> 引入 -> 注冊(cè) -> 使用 ,行云流水,一氣呵成,但是如果我們今天是要自定義一個(gè)彈窗組件呢?
首先,我們來(lái)分析一下彈窗組件的特性(需求):
0. 輕量 --一個(gè)組件小于 1Kib (實(shí)際打包完不到0.8k)
1.一般都是多處使用 --需要解決每個(gè)頁(yè)面重復(fù)引用+注冊(cè)
1.一般都是跟js交互的 --無(wú)需 在 <template> 里面寫 <toast :show="true" text="彈窗消息"></toast>
今天,我們就抱著上面2個(gè)需求點(diǎn),來(lái)實(shí)現(xiàn)一個(gè)基于vue的toast彈窗組件,下圖是最終完成的效果圖.
一. 先寫一個(gè)普通的vue組件
文件位置 /src/toast/toast.vue
<template> <div class="wrap">我是彈窗</div></template><style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.35); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; }</style>二. 在我們需要使用的頁(yè)面引入組件,方便看效果和錯(cuò)誤
<template> <div id="app"> <toast></toast> </div></template><script> import toast from './toast/toast' export default { components: {toast}, }</script>
三. 實(shí)現(xiàn)動(dòng)態(tài)加載組件
可以看到,已經(jīng)顯示出一個(gè)靜態(tài)的彈出層了,接下來(lái)我們就來(lái)看看如何實(shí)現(xiàn)動(dòng)態(tài)彈出.
我們先在 /src/toast/ 目錄下面,新建一個(gè) index.js , 然后在index.js里面,敲入以下代碼(由于該代碼耦合比較嚴(yán)重,所以就不拆開(kāi)一行一行講解了,改成行內(nèi)注釋)
文件位置 /src/toast/index.js
import vue from 'vue'// 這里就是我們剛剛創(chuàng)建的那個(gè)靜態(tài)組件import toastComponent from './toast.vue'// 返回一個(gè) 擴(kuò)展實(shí)例構(gòu)造器const ToastConstructor = vue.extend(toastComponent)// 定義彈出組件的函數(shù) 接收2個(gè)參數(shù), 要顯示的文本 和 顯示時(shí)間function showToast(text, duration = 2000) { // 實(shí)例化一個(gè) toast.vue const toastDom = new ToastConstructor({ el: document.createElement('div'), data() { return { text:text, show:true } } }) // 把 實(shí)例化的 toast.vue 添加到 body 里 document.body.appendChild(toastDom.$el) // 過(guò)了 duration 時(shí)間后隱藏 setTimeout(() => {toastDom.show = false} ,duration)}// 注冊(cè)為全局組件的函數(shù)function registryToast() { // 將組件注冊(cè)到 vue 的 原型鏈里去, // 這樣就可以在所有 vue 的實(shí)例里面使用 this.$toast() vue.prototype.$toast = showToast}export default registryToast
附一個(gè)傳送門vue.extend 官方文檔
四. 試用
到這里,我們已經(jīng)初步完成了一個(gè)可以全局注冊(cè)和動(dòng)態(tài)加載的toast組件,接下來(lái)我們來(lái)試用一下看看
在vue的入口文件(腳手架生成的話是 ./src/main.js ) 注冊(cè)一下組件
文件位置 /src/main.js
import toastRegistry from './toast/index'// 這里也可以直接執(zhí)行 toastRegistry()Vue.use(toastRegistry)我們稍微修改一下使用方式,把 第二步 的引用靜態(tài)組件的代碼,改成如下<template> <div id="app"> <input type="button" value="顯示彈窗" @click="showToast"> </div></template><script> export default { methods: { showToast () { this.$toast('我是彈出消息') } } }</script>
可以看到,我們已經(jīng) 不需要 在頁(yè)面里面 引入 跟 注冊(cè) 組件,就可以直接使用 this.$toast() 了.
五. 優(yōu)化
現(xiàn)在我們已經(jīng)初步實(shí)現(xiàn)了一個(gè)彈窗.不過(guò)離成功還差一點(diǎn)點(diǎn),缺少一個(gè)動(dòng)畫,現(xiàn)在的彈出和隱藏都很生硬.
我們?cè)賹?duì) toast/index.js 里的 showToast 函數(shù)稍微做一下修改(有注釋的地方是有改動(dòng)的)
文件位置 /src/toast/index.js
function showToast(text, duration = 2000) { const toastDom = new ToastConstructor({ el: document.createElement('div'), data() { return { text:text, showWrap:true, // 是否顯示組件 showContent:true // 作用:在隱藏組件之前,顯示隱藏動(dòng)畫 } } }) document.body.appendChild(toastDom.$el) // 提前 250ms 執(zhí)行淡出動(dòng)畫(因?yàn)槲覀冊(cè)賑ss里面設(shè)置的隱藏動(dòng)畫持續(xù)是250ms) setTimeout(() => {toastDom.showContent = false} ,duration - 1250) // 過(guò)了 duration 時(shí)間后隱藏整個(gè)組件 setTimeout(() => {toastDom.showWrap = false} ,duration)}然后,再修改一下toast.vue的樣式
文件位置 /src/toast/toast.vue
<template> <div class="wrap" v-if="showWrap" :class="showContent ?'fadein':'fadeout'">{{text}}</div></template><style scoped> .wrap{ position: fixed; left: 50%; top:50%; background: rgba(0,0,0,.35); padding: 10px; border-radius: 5px; transform: translate(-50%,-50%); color:#fff; } .fadein { animation: animate_in 0.25s; } .fadeout { animation: animate_out 0.25s; opacity: 0; } @keyframes animate_in { 0% { opacity: 0; } 100%{ opacity: 1; } } @keyframes animate_out { 0% { opacity: 1; } 100%{ opacity: 0; } }</style>大功告成,一個(gè)toast組件初步完成
總結(jié)
以上所述是小編給大家介紹的vue的toast彈窗組件實(shí)例詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)武林網(wǎng)網(wǎng)站的支持！
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
