分享更有价值
被信任是一种快乐

vue如何实现自定义模态弹窗组件

文章页正文上

本篇内容主要讲解“vue如何实现自定义模态弹窗组件”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“vue如何实现自定义模态弹窗组件”吧!
一、创建弹窗组件 quitDialog.vue 组件

key=”1″
@click=”isQuit = false”
v-if=”isQuit”
@touchmove.prevent>

v-show=”isQuit”
key=”2″>

:alt=”imgLoadTip”>

{{content}}


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
}
}
}

// 退出弹窗
.fade-enter,
.fade-leave-active {
opacity: 0;
}
.fade-enter-active,
.fade-leave-active {
transition: opacity 0.35s;
}
// 全局弹窗
.quit_dialog {
background: rgba(0,0,0,.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;
}
}

二、创建 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 和弹窗组件里的isQuit对应,用于控制显隐
})
}
export default Grasp
三、在全局 main.js 引入
import Vue from ‘vue’
import Popup from ‘./api/quitDialog’
Vue.prototype.$popup = Popup.install
四、页面中调用,只需在函数中调用即可
methods: {
graspBtn () {
this.$grasp({
imgUrl: require(’//assets/home/quits.png’), // 顶部图片。
imgLoadTip: ‘图片加载中…’,
content: ‘温馨提示’,
title: ‘注意:该学习任务未完成,是否确认退出’,
btnText: ‘残忍退出’,
rightText: ‘继续学习’,
// 左边点击事件
leftBtn: () => {
this.$store.dispatch(’user/logout’)。then(() => {
this.$signalr.LogoutPad()
this.$signalr.SendMsg(2, 0, ‘退出系统’)
this.$router.push(’/login’)
})
},
// 右边点击事件
rightBtn: () => {}
})
}
}到此,相信大家对“vue如何实现自定义模态弹窗组件”有了更深的了解,不妨来实际操作一番吧!这里是云技术网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

相关推荐: 关于闭包的面试题有哪些

本篇内容介绍了“关于闭包的面试题有哪些”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!每个 JavaScript 程序员都必须知道闭包是什么。在 JavaScri…

文章页内容下
赞(0) 打赏
版权声明:本站采用知识共享、学习交流,不允许用于商业用途;文章由发布者自行承担一切责任,与本站无关。
文章页正文下
文章页评论上

云服务器、web空间可免费试用

宝塔面板主机、支持php,mysql等,SSL部署;安全高速企业专供99.999%稳定,另有高防主机、不限制内容等类型,具体可咨询QQ:360163164,Tel同微信:18905205712

主机选购导航云服务器试用

登录

找回密码

注册