个人项目地址： SubTopH前端开发个人站
（自己开发的前端功能和UI组件，一些有趣的小功能，感兴趣的伙伴可以访问，欢迎提出更好的想法，私信沟通，网站属于静态页面）
SubTopH前端开发个人站https://subtop.gitee.io/subtoph.github.io/#/home
以上 👆 是个人前端项目，欢迎提出您的建议😊
以下是uniapp&&微信小程序底部弹窗自定义组件
基础弹窗效果组件
<template>
<view>
<view
class="tui-actionsheet-class tui-actionsheet"
:class="[show ? 'tui-actionsheet-show' : '']"
>
<view class="regional-selection">
底部弹窗
</view>
</view>
<!-- 遮罩层 -->
<view
class="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;
};效果预览文章来源：https://www.toymoban.com/news/detail-625053.html
文章来源地址https://www.toymoban.com/news/detail-625053.html
到了这里，关于uniapp&&微信小程序底部弹窗自定义组件的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
