[Vue]H5学习之自定义弹窗

自定义弹窗组件

完成截图

步骤

第一步：
新建一个Dialog.vue文件：

<template>
    <div id="dialog">
        <div class="border" >
            <div>
                <p class="titleStyle">打卡</p>
            </div>
            <div class="table-style">
                <div class="table-describe-style">时间</div>
                <div class="table-content-style">{{currentTimeStr}}</div>
            </div>
            <div class="table-style">
                <div class="table-describe-style">网格</div>
                <div class="table-content-style">第一网格</div>
            </div>
            <div class="table-style">
                <div class="table-describe-style">位置</div>
                <div class="table-content-style">{{positionStr}}</div>
            </div>
            <div class="table-style">
                <div class="table-describe-style">描述</div>
                <div class="table-content-style">
                    <textarea class="check-mes fc-black" placeholder="请输入相关要求" v-model="msg" required>
                    </textarea>
                </div>
            </div>
            <div class="button-align-bottom">
                <div class="horizontal-line-style"></div>
                <div class="button-align-bottom-style">
                    <div class="cancel-button" @click="closeDialog">取消</div>
                    <div class="vertical-line-style"></div>
                    <div class="punch-button">打卡</div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    import { Field } from 'mint-ui';
    import Vue from 'vue'
    Vue.component(Field.name, Field);
    export default {
        name: "",
        props: {//用于父布局传参
            currentTimeStr:String,
            positionStr:String
        },
        data(){
            return {}
        },
        components: {
            'upload-pictures': Upload
        },
        methods:{
            closeDialog(){
                //给父组件传参
                this.$emit('closeDialog',false)
            }
        }
    }
</script>

<style scoped>
    #dialog{
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(0,0,0,0.3);
        width: 100%;
        height: 100%;
    }
    .fc-black {
        color: #333 !important;
    }
    .check-mes {
        display: block;
        width: 100%;
        height: 80px;
        background-color:  #F7F7F7;
        padding: 10px;
        font-size: 16px;
        line-height: 20px;
        border-radius: 5px;
    }

    .horizontal-line-style{
        background: #DCDCDC;
        width: 100%;
        height: 1px;
    }
    .vertical-line-style{
        background: #000;
        width: 1px;
        height: 100%;
    }
    .titleStyle{
        margin-top: 20px;
        font-size: 18px;
        color: #333333;
        letter-spacing: 0;
        text-align: center;
        line-height: 26px;
        font-weight: bold;
    }
    .table-style{
        margin-left: 20px;
        margin-right: 20px;
        display: flex;
    }
    .table-content-style{
        font-size: 16px;
        color: #333333;
        line-height: 24px;
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 5px;
        padding-bottom: 5px;
        order: 2;
        word-wrap: break-word;
        overflow: hidden;

    }
    .table-describe-style{
        color: #999999;
        letter-spacing: 0;
        font-size: 16px;
        line-height: 24px;
        padding-top: 5px;
        padding-bottom: 5px;
        width: 40px ;
        order: 1;
        flex:0 0 auto;
    }
    .table-content-remark{
        background: #F7F7F7;
        border-radius: 6px;
        font-size: 16px;
        color: #333333;
    }

    .border{
        background-color: white;
        border-radius: 6px;
        width: 80%;
        height: 68%;
        position: absolute;
        left: 10%;
        top: 17%;
        /*transform: translate(-50%,-50%);*/
    }
    .media-upload-categray-type{
        margin-left: 20px;
        margin-right: 20px;
        margin-top: 20px;
        display: flex;
    }
    .cancel-button{
        width: 50%;
        text-align: center;
        font-size: 18px;
        color: #666666;
        letter-spacing: 0;
        line-height: 44px;
        background: #FFFFFF;
    }
    .punch-button{
        flex-grow:1;
        text-align: center;
        color: #3A90F6;
        line-height: 44px;
        font-size: 18px;
        letter-spacing: 0;
        background: #FFFFFF;
    }
    .button-align-bottom{
        bottom: 5px;
        position:absolute;
        width: 100%;
    }
    .button-align-bottom-style{
        width: 100%;
        display: flex;
    }
</style>

第二步：
父布局调用及传参

//1 导入文件并声明控件
<template>
	<Dialog @closeDialog="close" v-if="isShowDialog" :currentTime="currentTimeString"></Dialog>
</template>
<script>
	.....
	import Vue from 'vue'
	import Dialog from './Dialog.vue'
	Vue.component('Dialog',Dialog)
	.....
</script>