uniapp微信小程序底部弹窗自定义组件

基础弹窗效果组件

<template><view><viewclass="tui-actionsheet-class tui-actionsheet":class="[show ? 'tui-actionsheet-show' : '']"><view class="regional-selection">底部弹窗</view></view><!-- 遮罩层 --><viewclass="tui-actionsheet-mask":class="[show ? 'tui-mask-show' : '']"@tap="handleClickMask"></view></view>
</template><script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
export default {name: "tuiActionsheet",props: {//点击遮罩 是否可关闭maskClosable: {type: Boolean,default: true,},//显示操作菜单show: {type: Boolean,default: false,},},setup(props, ctx) {const data = reactive({});onBeforeMount(() => {});onMounted(() => {});// 点击遮罩层const handleClickMask = () => {if (!props.maskClosable) return;handleClickCancel();};// 点击取消const handleClickCancel = () => {ctx.emit("chooseCancel");};return {handleClickMask,handleClickCancel,...toRefs(data),};},
};
</script><style scoped lang="less">
.tui-actionsheet {width: 100%;position: fixed;left: 0;right: 0;bottom: 0;z-index: 9999;visibility: hidden;transform: translate3d(0, 100%, 0);transform-origin: center;transition: all 0.3s ease-in-out;// background: #eaeaec;min-height: 100rpx;
}.tui-actionsheet-show {transform: translate3d(0, 0, 0);visibility: visible;
}
.regional-selection {text-align: center;height: 400rpx;background: #fff;
}
.tui-actionsheet-mask {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.6);z-index: 9996;transition: all 0.3s ease-in-out;opacity: 0;visibility: hidden;
}.tui-mask-show {opacity: 1;visibility: visible;
}
</style>

在页面使用

父组件showSelection控制底部弹窗显示隐藏

maskClosable控制是否点击遮罩层关闭

chooseCancel弹窗触发关闭事件

 <!-- 底部弹窗 --><regional-selection:show="showSelection":maskClosable="true"@chooseCancel="chooseCancel"></regional-selection>

 const chooseCancel = () => {data.showSelection = false;};

效果预览