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;
    };

效果预览

相关推荐
明月(Alioo)16 分钟前
用AI帮忙,开发刷题小程序:微信小程序中实现Markdown图片解析与渲染功能详解
微信小程序·小程序·aigc
@大迁世界23 分钟前
Vue 设计模式 实战指南
前端·javascript·vue.js·设计模式·ecmascript
芭拉拉小魔仙1 小时前
Vue项目中如何实现表格选中数据的 Excel 导出
前端·vue.js·excel
jump_jump1 小时前
妙用 localeCompare 获取汉字拼音首字母
前端·javascript·浏览器
U.2 SSD1 小时前
Echarts单轴坐标系散点图
前端·javascript·echarts
不做无法实现的梦~1 小时前
jetson刷系统之后没有浏览器--解决办法
开发语言·javascript·ecmascript
德育处主任Pro1 小时前
前端玩转大模型,DeepSeek-R1 蒸馏 Llama 模型的 Bedrock 部署
前端·llama
Jedi Hongbin2 小时前
Three.js NodeMaterial 节点材质系统文档
前端·javascript·three.js·nodematerial
前端小马2 小时前
前后端Long类型ID精度丢失问题
java·前端·javascript·后端
用户1456775610372 小时前
干净的图片批量处理,处理速度飞快
前端