Vue自定义全局弹窗组件操作

页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组

页面中会有很多时候需要弹窗提示,我们可以写一个弹窗组件,但是如果每个页面都引入这个组件,太麻烦了,所以我们将它变成全局组件,需要用的时候直接通过JS调用即可,不需要在每个页面引入了

效果图

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

弹窗组件

新建一个弹窗的组件——popup.vue

<template>

<transition name=’fade’>

<!– 蒙版 –>

<div class=”mask” v-if=”show” @touchmove.prevent>

<div class=”window”>

<img class=”shadow” :src=”https://www.wpmee.com/imgUrl” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

<h1>{{title}}</h1>

<p>{{content}}</p>

<button @click=”btnClick”>{{btnText}}</button>

</div>

<img @click=”show = false” v-fb class=”close” src=”https://www.wpmee.com/pages/signin/dialog/images/关闭.png” alt=”WordPress主题下载,WordPress免费主题下载,网站源码模板下载”>

</div>

</transition>

</template>

<script>

export default {

name: ‘app’,

data () {

return {

show: false,

imgUrl: ”,

title: ”,

content: ”,

btnText: ”,

click: ”

}

},

created () {

},

methods: {

btnClick () {

this.click()

this.show = false

}

}

}

</script>

<style lang=”less” scoped>

@import “../../../assets/css/minx/minx”;

@import “../../../assets/css/pixel/pixel”;

// 渐变过渡

.fade-enter,

.fade-leave-active {

opacity: 0;

}

.fade-enter-active,

.fade-leave-active {

transition: opacity .35s;

}

// 全局弹窗

.mask {

.fixed;

z-index: 10;

background:rgba(0,0,0,0.65);

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

padding: 75/75rem;

.window{

height: 400/75rem;

width: 100%;

background: #fff;

border-radius:8px;

text-align: center;

.shadow{

width: 270/75rem;

margin-top: -90/75rem;

}

h1{

margin-top: 32/75rem;

font-size:32/75rem;

color:#f1300b;

line-height:32/75rem;

font-weight: 600;

}

p{

margin-top: 32/75rem;

font-size:28/75rem;

color:#222222;

line-height:40/75rem;

}

button{

margin-top: 34/75rem;

background:#f95644;

border-radius:10px;

width:23/75remx;

height:64/75rem;

font-size:28/75rem;

color:#ffffff;

}

}

.close{

width:60/75rem;

height:60/75rem;

margin-top: 40/75rem;

}

}

</style>

popup.js文件

新建一个popup.js文件,写方法

import Vue from ‘vue’

import Popup from ‘./popup.vue’

const PopupBox = Vue.extend(Popup)

Popup.install = function (data) {

let instance = new PopupBox({

data

}).$mount()

document.body.appendChild(instance.$el)

Vue.nextTick(() => {

instance.show = true

// show 和弹窗组件里的show对应,用于控制显隐

})

}

export default Popup

main.js引入popup.js

// 自定义全局弹窗组件

import Vue from ‘vue’

import Popup from ‘./components/dialog/popup’

Vue.prototype.$popup = Popup.install

组件中使用方法

methods: {

btnClick () {

this.$popup({

imgUrl: require(‘../../../static/images/shadow.png’), // 顶部图片

title: ‘我是标题’,

content: ‘我是内容’,

btnText: ‘我是按钮’,

click: () => {

// 点击按钮事件

this.$router.push(‘……’)

}

})

}

}

方便以后自己使用,大家也可以参考哦,也希望大家多多支持,谢谢~~

WordPress主题下载,WordPress免费主题下载,网站源码模板下载


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/7098.htm

发表评论

邮箱地址不会被公开。 必填项已用*标注