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

基础弹窗效果组件

javascript 复制代码
<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弹窗触发关闭事件

html 复制代码
 <!-- 底部弹窗 -->
    <regional-selection
      :show="showSelection"
      :maskClosable="true"
      @chooseCancel="chooseCancel"
    ></regional-selection>
javascript 复制代码
 const chooseCancel = () => {
      data.showSelection = false;
    };

效果预览

相关推荐
AntBlack8 分钟前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
315356691311 分钟前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx16 分钟前
前端-CSS-day1
前端·css
知否技术23 分钟前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust28 分钟前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放31 分钟前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
幼儿园技术家37 分钟前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好1 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑
全宝2 小时前
🎨前端实现文字渐变的三种方式
前端·javascript·css
yanlele2 小时前
前端面试第 75 期 - 2025.07.06 更新前端面试问题总结(12道题)
前端·javascript·面试