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

本文主要是介绍[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>