更新记录

1.0.1（2023-12-14）

-

1.0.0（2023-12-08）

-

平台兼容性

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

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

功能

已完成

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

待完成

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

Props 属性

使用

在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>