组件代码
<template>
<view>
<!-- 蒙版 -->
<view class="mask" @click="close()" v-show="tanchuang"></view>
<!-- 弹窗 -->
<view class="pop" :style="{height:height*0.8 + 'px',top:tanchuang?height*0.2 + 'px':height + 'px'}">
<!-- 头部 -->
<view class="" style="width: 100%;" @click="close()">
<view class="huaxian"></view>
</view>
<!-- 内容 -->
<scroll-view scroll-y="true" :style="{maxHeight: `${scrollHeight}px`}">
<slot></slot>
</scroll-view>
</view>
</view>
</template>
<script>
let systemInfo = uni.getSystemInfoSync();
export default {
name: "pop-up",
props: {
tanchuang: {
type: Boolean,
default: false
}
},
data() {
return {
height: systemInfo.screenHeight,
scrollHeight: systemInfo.screenHeight * 0.8 - uni.upx2px(100),
};
},
methods: {
close() {
this.$emit('close');
},
}
}
</script>
<style lang="scss">
/* 划线 */
.huaxian {
height: 10rpx;
width: 200rpx;
background: #bbbbbb;
border-radius: 100rpx;
margin: auto;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
/* 蒙版 */
.mask {
z-index: 998;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
}
/* */
.pop {
position: fixed;
// width: 750rpx;
background-color: #fff;
border-radius: 30rpx 30rpx 0 0;
left: 0;
right: 0;
transition-property: top;
transition-duration: 150ms;
transition-timing-function: ease-in-out;
z-index: 999;
.title {
padding: 30rpx 30rpx 0;
align-items: center;
justify-content: center;
line-height: 40rpx;
}
&--close-btn {
height: 40rpx;
width: 40rpx;
position: absolute;
right: 30rpx;
top: 30rpx;
}
}
.border-bottom {
width: 750rpx;
border-bottom: 1rpx solid #e8e8e8;
transform: scaleY(.5);
margin-top: 30rpx;
}
</style>
组件的使用
<template>
<view>
<button @click="tanchuang = true">打开</button>
<pop-up :tanchuang="tanchuang" @close="tanchuang = false">
<view class="article-list">
弹窗内容
</view>
</pop-up>
</view>
</template>
<script>
export default {
data() {
return {
tanchuang: false
}
},
methods: {
}
}
</script>
<style>
</style>
