更新记录

1.0.0（2025-10-14） 下载此版本

1.0.0通用弹出框： 可以根据需求选择弹出的方向、是否显示弹出框的title 关闭图标 兼容小程序APP

平台兼容性

uni-app(4.76)

目录

放入components 目录中即可，页面中直接使用不需要单独引入

使用实例

<template>
    <view class="content">
        <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title" @click="showClearn=true">显示弹出框</text>
        </view>
        <m-popup v-model="showClearn" type="bottom" :borderRadius="borderraduld">
         <view style="width: 750rpx;height: 400rpx;">
             你的弹出内容
         </view>
        </m-popup>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

    const showClearn=ref(false)
    // 通过射角度控制 弹出框圆角
    const borderraduld={
        tl:"20rpx",
        tr:"20rpx",
        br:"0",
        bl:"0"
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .logo {
        height: 200rpx;
        width: 200rpx;
        margin-top: 200rpx;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 50rpx;
    }

    .text-area {
        display: flex;
        justify-content: center;
    }

    .title {
        font-size: 36rpx;
        color: #8f8f94;
    }
</style>

参数说明

type Direction = 'top' | 'bottom' | 'left' | 'right' | 'center'
type RadiusType =
  | string
  | {
      tl?: string // 左上
      tr?: string // 右上
      br?: string // 右下
      bl?: string // 左下
    }
const props = defineProps({
    // 显示隐藏
    /** 显示隐藏*/
  modelValue: { type: Boolean, default: false }, // 控制显示隐藏弹出层
  showmark: { type: Boolean, default: true }, // 是否显示遮罩
  bacground: { type: String, default: '#fff' },     // 背景色
  title: { type: String, default: '' }, // 标题
  fontSize: { type: Number, default: 26 }, // 标题字体大小
  fontWeight: { type: Boolean, default: true },// 标题是否加粗
  showClose: { type: Boolean, default: false },// 是否显示关闭按钮
  lineHeight: { type: Number, default: 30 }, // 标题行高
  zIndex: { type: Number, default: 11 }, // z-index 默认11
  closeIndex: { type: Number, default: 0 }, // 关闭按钮z-index
  showTitle:{ type: Boolean, default: true }, // 是否显示标题
   /** 圆角: 可以传字符串统一四个角，也可以传对象分别控制 */
    borderRadius: {
      type: [String, Object] as PropType<RadiusType>,
      default: '20rpx'
    },
  type: {
    type: String as PropType<Direction>,
    default: 'bottom',
  },
})