组件内容
<template>
//@touchmove.prevent不让遮罩层后的页面滚动
//@tap.self只触发自己,或者给mask的子级.content加@tap.stop阻止事件默认行为
<view @touchmove.prevent :class="sc" class="tankuang width-100 height-100 position-fixed p-left-0 p-top-0">
<view class="mask width-100 height-100" @tap.self="$emit('maskTap')">
<view class="content width-100 position-absolute p-left-0 bj-white p-30" >
<slot></slot>
<!-- 按钮 -->
<!-- @tap="$emit('bottomTap')" class="bottomBtn width-100 bj-primary-co$emit('bottomTap')自定义事件 -->
<view @tap="$emit('bottomTap')" class="bottomBtn width-100 bj-primary-color text-center text-white position-fixed p-bottom-0 p-left-0">{{title}}</view>
</view>
</view>
</view>
</template>
<script>
export default {
props:{
title:String,//按钮内容
sc:String //控制calss类名
},
data() {
return {
};
},
methods:{
}
}
</script>
<style>
/* 底部弹框 */
.mask {
background-color: rgba(0, 0, 0, 0.5);
}
.content {
height: 1037upx;
border-radius: 20upx 20upx 0 0;
box-sizing: border-box;
bottom: 0;
}
.none {
display: none;
}
@keyframes contentHide {
from {
transform: translateY(0%);
}
to {
transform: translateY(100%);
}
}
@keyframes maskHide {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hide .mask {
animation: maskHide 0.2s linear both;
}
.hide .mask .content {
animation: contentHide 0.2s linear both;
}
@keyframes contentShow {
from {
transform: translateY(100%);
}
to {
transform: translateY(0%);
}
}
@keyframes maskShow {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.show {
display: block;
}
.show .mask {
animation: maskShow 0.2s linear both;
}
.show .mask .content {
animation: contentShow 0.2s linear both;
}
/* 底部按钮 */
.bottomBtn {
height: 100upx;
line-height: 100upx;
font-size: 26upx;
}
</style>
页面
//点击这三个按钮
<view class="display-flex" @tap="listTap('car')"></view>
<view class="display-flex" @tap="listTap('address')"></view>
<view class="sevenBox display-flex" @tap="listTap('service')"></view>
<!-- 底部弹框1 -->
//popup组件名字,全局注册
<popup title="加入购物车" :sc="fuClassName.car" @maskTap="maskTap('car')" @bottomTap="carTap">
购物车
</popup>
<popup title="选择新的地址" :sc="fuClassName.address" @maskTap="maskTap('address')" @bottomTap="addressTap">
地址
</popup>
<popup title="确定" :sc="fuClassName.service" @maskTap="maskTap('service')" @bottomTap="serviceTap">
服务
</popup>
//数据区
data(){
returm{
fuClassName:{
car:"none",
address:"none",
service:"none",
},
}
},
//方法区
methods: {
/* 点击出现 */
listTap(key){
this.fuClassName[key]='show'
},
/*点击底部弹框遮罩层 弹框消失 */
maskTap(key) {
this.fuClassName[key] = "hide";
setTimeout(() => {
this.fuClassName[key] = "none";
}, 200)
},
/* 点击弹框里的按钮 */
carTap(){
this.maskTap('car')
console.log("1")
},
addressTap(){
this.maskTap('address')
console.log("2")
},
serviceTap(){
this.maskTap('service')
console.log("3")
}
}