Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to implement custom modal pop-up window components in vue". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "vue how to achieve custom modal pop-up window components"!

First, create a pop-up window component quitDialog.vue component

{{title}}

{{content}}

{{btnText}}

{{rightText}}

Export default {

Name: 'Popup'

Data () {

Return {

IsQuit: false

ImgUrl:''

Title:''

Content:''

BtnText:''

RightText:''

}

}

Methods: {

LeftClick () {

This.leftBtn ()

This.isQuit = false

}

RightClick () {

This.rightBtn ()

This.isQuit = false

}

}

}

/ / exit the pop-up window

. fade-enter

.fade-leave-active {

Opacity: 0

}

.fade-enter-active

.fade-leave-active {

Transition: opacity 0.35s

}

/ / Global pop-up window

.quit _ dialog {

Background: rgba (0pd0j0j0pl .5)

Position: fixed

Top: 0

Left: 0

Height: 100%

Width: 100%

Z-index: 10000

}

.quit _ box {

Width: 700px

Background: # fff

Position: fixed

Top: 50%

Left: 50%

Margin-left:-350px

Margin-top:-190px

Z-index: 10001

Border-radius: 10px

Text-align: center

Padding: 50px

Img {

Width: 80px

}

.quit _ title {

Color: # 666

Font-size: 28px

Margin: 45px 0px

}

Button {

Border-radius: 32px

Padding:20px 0px

Font-size: 26px

Border-radius: 8px

Width: 214px

}

.quit _ btn {

Color: # 03BA82

Background: # fff

Border: 1px solid # 03BA82

Margin-right: 32px

}

.quit _ close {

Background: linear-gradient (0deg, # 03BA82, # 01D695)

Box-shadow: 0px 3px 4px 0px rgba (1,84,58,0.27)

Border: 1px solid # 03BA82

Color: # fff

}

}

Second, create a graspDialog.js

Import Vue from 'vue'

Import Grasp from'/ components/QuitDialog/QuitDialog'

Const PopupBox = Vue.extend (Grasp)

Grasp.install = function (data) {

Let instance = new PopupBox ({

Data

}). $mount ()

Document.body.appendChild (instance.$el)

Vue.nextTick () = > {

Instance.isQuit = true

/ / isQuit corresponds to the isQuit in the pop-up window assembly, which is used to control display and concealment

})

}

Export default Grasp

Third, the introduction of global main.js

Import Vue from 'vue'

Import Popup from'. / api/quitDialog'

Vue.prototype.$popup = Popup.install

Fourth, call in the page, just call it in the function.

Methods: {

GraspBtn () {

This.$grasp ({

ImgUrl: require ('/ / assets/home/quits.png'), / / top picture.

ImgLoadTip: 'the picture is loading …'

Content: 'warm reminder'

Title: 'note: the learning task has not been completed, do you confirm to quit?

BtnText: 'cruel exit'

RightText: 'keep learning'

/ / left click event

LeftBtn: () = > {

This.$store.dispatch ('user/logout'). Then () = > {

This.$signalr.LogoutPad ()

This.$signalr.SendMsg (2, 0, 'exit the system')

This.$router.push ('/ login')

})

}

/ / Click event on the right

RightBtn: () = > {}

})

}

}

At this point, I believe you have a deeper understanding of "how to implement custom modal pop-up window components in vue". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.