How to implement custom modal pop-up window components with vue
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!
