第Vue封裝全局toast組件的完整實(shí)例目錄前言

一.借助vue-cli

1.定義Toast組件2.在main.js里面配置3.在其他組件內(nèi)使用二、不借助vue-cli

1.注冊(cè)toast組件2.注冊(cè)toast插件3.在其他組件內(nèi)使用總結(jié)

前言

最近體驗(yàn)了下Vue，Toast都是前端常用組件，本文詳細(xì)介紹了Vue封裝全局toast組件的過(guò)程，下面話不多說(shuō)了，來(lái)一起看看詳細(xì)的介紹吧

一.借助vue-cli

1.定義Toast組件

//components/Toast

template

transitionname="fade"

divv-show="visible"{{message}}/div

/transition

/template

script

exportdefault{

data(){

return{

visible:false,

message:''

/script

stylescoped

div{

position:fixed;

top:30%;

left:50%;

padding:5px20px;

color:#fff;

background-color:#424242;

border-radius:5px;

text-align:center;

transform:translate(-50%,-50%);

/*vue動(dòng)畫(huà)過(guò)渡效果設(shè)置*/

.fade-enter-active,

.fade-leave-active{

transition:opacity.5s;

.fade-enter,.fade-leave-to{

opacity:0;

/style

2.在main.js里面配置

importVuefrom'vue'

importAppfrom'./App.vue'

importToastfrom'./components/Toast'

//定義插件對(duì)象

constToastObj={

install:function(Vue){

//創(chuàng)建一個(gè)Vue的“子類(lèi)”組件

constToastConstructor=Vue.extend(Toast)

//創(chuàng)建一個(gè)該子類(lèi)的實(shí)例,并掛載到一個(gè)元素上

constinstance=newToastConstructor()

console.log(instance)

//將這個(gè)實(shí)例掛載到動(dòng)態(tài)創(chuàng)建的元素上,并將元素添加到全局結(jié)構(gòu)中

instance.$mount(document.createElement('div'))

document.body.appendChild(instance.$el)

//在Vue的原型鏈上注冊(cè)方法，控制組件

Vtotype.$toast=(msg,duration=1500)={

instance.message=msg

instance.visible=true

setTimeout(()={

instance.visible=false

},duration)

Vue.use(ToastObj)

VductionTip=false

newVue({

render:h=h(App),

}).$mount('#app')

3.在其他組件內(nèi)使用

template

div

h1{{msg}}/h1

/div

/template

script

exportdefault{

name:'HelloWorld',

data:()={

return{

msg:'HelloWord'

mounted(){

//使用toast組件

this.$toast('組件掛載成功')

/script

二、不借助vue-cli

在借助vue-cli的情況下，可以方便實(shí)現(xiàn)組件的導(dǎo)入導(dǎo)出，但是在不借助構(gòu)建工具的情況下，就需要使用其他方法了

1.注冊(cè)toast組件

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

metaname="viewport"content="width=device-width,initial-scale=1.0"

titleDocument/title

scriptsrc="./static/vue/vue.min.js"/script

/head

body

divid="app"

my-button/my-button

/div

divid="toast"/div

script

//定義toast全局組件

constToast=Vponent('toast',{

data(){

return{

isShow:false,

message:'全局提示',

wrapperStyle:{

position:'fixed',

top:'20%',

left:'50%',

zIndex:10000,

padding:'6px12px',

backgroundColor:'#424242',

borderRadius:'5px',

transform:'translate(-50%,-50%)'

textStyle:{

color:'#fff',

fontSize:'14px'

template:`divv-show="isShow":

span:{{message}}/span

/div`

2.注冊(cè)toast插件

//定義插件對(duì)象

constToastObj={

install:function(Vue){

//創(chuàng)建一個(gè)toast組件實(shí)例,并掛載到一個(gè)元素上

constinstance=newToast()

//將這個(gè)實(shí)例掛載到DOM中

instance.$mount('#toast')

//在Vue的原型鏈上注冊(cè)方法，控制組件

Vtotype.$toast=({message,duration=2000}={})={

instance.message=message

instance.isShow=true

setTimeout(()={

instance.isShow=false

},duration)

//注冊(cè)toast插件

Vue.use(ToastObj)

3.在其他組件內(nèi)使用

Vponent('my-button',{

data(){

return{

wrapperStyle:{

width:'70px',

padding:'20px',

backgroundColor:'green'

textStyle:{

color:'#fff',

fontSize:'16px'

methods:{

handleClick(){

this.$t