组件代码
<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>
