uniapp地部弹框组件的封装

uniapp底部弹框组件的封装

<template>
     <view class="share">
            <view :class="{'share-box': shareState}" @click="handleHiddenShare">
            </view>
            <view class="share-item" :class="{'share-show': shareState}">
                <!-- <view  class="close"><image src="../../static/images/icon_ch备份@2x.png"></image></view> -->
                
                <view class="share-item-content">
                    <view class="ipt">
                        <view class='pic-box'><image mode="heightFix" src="../../static/images/12-icon@2x.png"></image></view>
                        <input type="text" placeholder="请输入司机姓名">
                    </view>
                    <view class="ipt">
                        <view class='pic-box'><image mode="heightFix" src="../../static/images/13-icon@2x.png"></image></view>
                        <input type="text" placeholder="请输入联系方式">
                    </view>
                    <view class="ipt">
                        <view class='pic-box'><image mode="heightFix" src="../../static/images/14-icon@2x.png"></image></view>
                        <input type="text" placeholder="请输入车辆牌号">
                    </view>
                    <view class="textarea-box">
                        <textarea  value="" placeholder="其他说明" />
                    </view>
                    <view class="btn-box">
                      <button>提交</button>
                    </view>
                    <text class="tips">注：提交信息后无法修改，请正确填写</text>
                </view>
                
                
                
                <view class="cancel" @click.stop="handleHiddenShare">
                    <text>取消</text>
                </view>
            </view>
        </view>
</template>

<script>
 export default {
        props: {
            
        },
        data() {
            return {
                shareState: false,
            };
        },
        methods: {
            // 显示分享
            handleShowShare () {
                this.shareState = true;
            },
            // 隐藏分享
            handleHiddenShare () {
                this.shareState = false;
            }
        }
    }
</script>

<style scoped>
    .share {
        position: fixed;
         100%;
        height: 100%;
        z-index:1000000;
    }
    .share-box {
         100%;
        height: 100%;
        position: fixed;
        top: 0rpx; left: 0rpx; bottom: 0rpx; right: 0rpx;
        background-color: rgba(0, 0, 0, 0.4);
        transition: .3s;
        z-index: 999;
    }
    // 进入分享动画
    .share-show {
        transition: all 0.3s ease;
        transform: translateY(0%) !important;
    }
    // 离开分享动画
    .share-item {
        position: fixed;
        left: 0;
        bottom: 0;
         100%;
        height: 60%;
        background-color: #FFFFFF;
        transition: all 0.3s ease;
        transform: translateY(100%);
        z-index: 1999;
        border-radius:10px 10px 0px 0px;
    }
    .content {
         100%;
        height: 30%;
        display: flex;
        flex-wrap: wrap;
        
    }
    .share-item-content{
        padding:30px;
        box-sizing: border-box;
    }
    .ipt{
        display:flex;
        height:30px;
        margin-bottom:15px;
    }
    .ipt .pic-box{
        100%;
        30px;
        margin-right:20px;
    }
    .ipt image{
        height:100%;
        auto;
        
    }
    .ipt input{
        height:100%;
        border-bottom:1px solid #EAEAEA;
        flex:1;
    }
    .textarea-box{
        height: 40px;
        border-radius: 2px;
        border: 1px solid #CCCCCC;
        margin-bottom:15px;
    }
    .textarea-box textarea{
        height:100%;
        100%;
        
    }
    .btn-box{
        height:36px;
        background: linear-gradient(270deg, #0D80F7 0%, #02A0FE 100%);
        border-radius: 5px;
    }
    .btn-box button{
        height:36px;
        background: linear-gradient(270deg, #0D80F7 0%, #02A0FE 100%);
        border-radius: 5px;
        color:white;
        line-height:36px;
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
    }
    .tips{
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #666666;
        line-height: 17px;
    }
                
</style>