更新记录

1.0.1（2023-12-14） 下载此版本

-

1.0.0（2023-12-08） 下载此版本

-

平台兼容性

Vue2 Vue3
× ×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × √ √ √ × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
√ √ √ √ √ × √ √ √

一个自定义弹框组件，从上往下弹出，弹出位置基于 外层设置了定位的DOM元素

可设置：宽、高、距离左侧宽度、动画时长、背景色、是否生成一个等高元素撑开父元素

功能

已完成

  • 传入show自动显示
  • 自定义主题色
  • 自定义宽度
  • 自定义高度
  • 动画时长
  • 距离左侧偏移量
  • 是否生成一个等高元素撑开父元素

待完成

  • [ ] 思考中... 1.1.0版本，如果有需要完善里面的功能的，请留言，优先开发

Props 属性

属性名 说明 类型 默认值 说明
show 控制弹框的显示与隐藏 Boolean false 必填
height 高度 传入数字或者字符串都以rpx为单位 String | Number '200rpx' 必填
width 宽度 String '100%' -
bgColor 弹框背景色 String ‘#fff’ -
duration 弹框动画时长【单位毫秒】 String | Number 300 -
left 距离左侧偏移量 String | Number 0 -
placeholder 组件默认使用绝对定位，是否生成一个等高元素撑开父元素 Boolean false -

使用

在pages.json中注册组件

 "easycom": {
        "autoscan": true,
        "custom": {
          "h-(.*)": "@/components/h-$1/h-$1.vue",
         }
  }

<template>
    <view class="pages">
        <view class="edit-data" @click="isShowEdit = !isShowEdit">{{ isShowEdit ? '隐藏' : '显示' }}</view>

        <view v-for="item in list" :key="item" class="item">
            <view class="header">
                <image src="" />
                <view class="middle">
                    <view class="info">
                        <view class="name">{{ item.name }}</view>
                        <view class="props">{{ item.props }}</view>
                        <view class="is-default" v-if="item.isDefault">hello</view>
                    </view>
                    <view class="tips">{{ item.tips }}</view>
                </view>
                <view class="right-icon">
                    <view class="edit-icon"></view>
                </view>
            </view>
            <h-popup-box placeholder :show="isShowEdit" height="80">
                <view class="footer" :class="{ 'footer-active': isShowEdit }" v-show="isShowEdit">
                    我是带placeholder属性的弹框,传入placeholder 会撑开父元素的高度
                </view>
            </h-popup-box>
        </view>

        <!-- 【注意：card必须设置相对定位  position: relative 】 -->
        <view class="card">
            <button @click="show1 = !show1">默认宽度</button>
            <button @click="show2 = !show2">自定义宽</button>
            <button @click="show3 = !show3">自定义位置</button>
            <button @click="show4 = !show4">自定义高度</button>
            <h-popup-box :show="show1" height="200">h</h-popup-box>
            <h-popup-box :show="show2" height="200" width="160rpx" left="185rpx">h</h-popup-box>
            <h-popup-box :show="show3" height="100" width="160rpx" left="365rpx">h</h-popup-box>
            <h-popup-box :show="show4" height="400">h</h-popup-box>
        </view>

    </view>
</template>

<script setup>
import { ref } from 'vue'
const isShowEdit = ref(false)
const show1 = ref(false)
const show2 = ref(false)
const show3 = ref(false)
const show4 = ref(false)
const list = ref([
    {
        id: 1,
        name: 'h-popup-box',
        props: 'placeholder',
        tips: '新增属性@param {boolean} placeholder 是否显示占位符 默认false',
        isDefault: true
    },
    {
        id: 2,
        name: 'h-popup-box',
        props: '',
        tips: '方便与二次开发，可以自定义弹窗的样式，比如背景色，宽高，动画时间等等',
        isDefault: false
    },
    {
        id: 3,
        name: 'h-popup-box',
        props: '',
        tips: '方便与二次开发，可以自定义弹窗的样式，比如背景色，宽高，动画时间等等',
        isDefault: false
    },

])
</script>

<style scoped  lang="scss">
.pages {
    width: 750rpx;
    min-height: 100vh;
    background-color: #F6F6F6;
    padding-top: 20rpx;
    font-family: PingFang SC-Medium, PingFang SC;

    .edit-data {
        margin: 0 0 20rpx 24rpx;
        font-size: 30rpx;
        font-weight: 500;
        color: #0074FC;
    }

    .item {
        width: 100%;
        padding: 20rpx 24rpx 24rpx;
        background-color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 130rpx;
        position: relative;

        .header {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;

            image {
                width: 78rpx;
                height: 78rpx;
                border-radius: 50%;
                margin-right: 14rpx;
                background-color: #eee;
            }

            .middle {
                flex: 1;
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;

                .info {
                    display: flex;
                    align-items: center;

                    .name {
                        font-size: 28rpx;
                        font-weight: 500;
                        margin-right: 12rpx;
                        color: #333333;
                        max-width: 190rpx;
                    }

                    .props {
                        max-width: 300rpx;
                        font-size: 26rpx;
                        font-weight: 500;
                        color: #666666;
                        margin-right: 30rpx;
                    }

                    .is-default {
                        width: 54rpx;
                        height: 26rpx;
                        background: #FFFFFF;
                        border-radius: 4rpx 4rpx 4rpx 4rpx;
                        opacity: 1;
                        border: 1rpx solid #EF7228;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 20rpx;
                        font-weight: 400;
                        color: #EE7128;
                    }
                }

                .tips {
                    margin-top: 10rpx;
                    font-size: 26rpx;
                    font-weight: 500;
                    color: #666666;
                }
            }

            .right-icon {
                width: 50rpx;
                min-height: 110rpx;
                display: flex;
                align-items: center;
                margin-left: 50rpx;
                margin-right: 50rpx;

                .edit-icon {
                    width: 40rpx;
                    height: 40rpx;
                    background-color: #eee;

                }
            }
        }

        @keyframes show-edit-animation {
            0% {
                height: 0;
            }

            100% {
                height: 80rpx;
            }
        }

        .footer-active {
            animation: show-edit-animation 0.5s;
        }

        .footer {
            width: 100%;
            height: 80rpx;
            display: flex;
            overflow: hidden;
            background-color: #f3b43f;

        }
    }

    .card {
        margin: 0 auto;
        width: 702rpx;
        height: 100rpx;
        background: #ffffff;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        opacity: 1;
        z-index: 1;
        padding: 20rpx 0;
        margin-top: 20rpx;
        padding-bottom: 30rpx;
        display: flex;
        position: relative;
        align-items: center;

        button {
            flex: 1;
            height: 60rpx;
        }
    }

}
</style>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...