2021-05-31

最新推荐文章于 2021-12-29 13:55:37 发布

今天也是努力的打工人

最新推荐文章于 2021-12-29 13:55:37 发布

阅读量60

点赞数

本文链接：https://blog.csdn.net/weixin_48092622/article/details/117456829

版权

随笔记录

弹框组件

   <newDialog
      v-if="showDialogFlag"
      :dialogVisible="showDialogFlag"
      :typeStr="typeStr"
      :title="title"
      :dialogData="dialogData"
      @colse="colse"
    >
    </newDialog>

<template>
    <div>
    <el-dialog 
      :title="title"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      :show-close="true"
       class="parDialog"
       :width="dialogWidth"
      @close="handleClickClose"
      >
      <div
        class="loadArea"
        v-loading="sureFlag"
        :element-loading-text="$t('LOADING')"
      >
      <div class="dialogContent">
      //弹框内容
      </div>
     <div class="footerSet">
        <el-button @click="Determine()" :loading="loadingFlag">“确定”</el-button>
        <el-button class="secBtn" @click="returnClose">“取消”</el-button>
     </div>
      </div>
    </el-dialog>
    </div>
</template>
<script scoped>
    export default {
    props: {
        typeStr: {
            type: [String, Number],
            default: '1'
        },
        dialogData: {
            type: Object
        },
        title: {
            type: String,
            default: ''
        },
        dialogVisible: {
            type: Boolean,
            default: false
        },
        dialogWidth: {
            type: String,
            default: '500px'
        }
    },   
    components: {},
    data() {},
    computed:{},
    created(){},
    mounted(){},
    watch: {},
    methods:{
     handleClickClose() {
      this.$emit('colse')
    },
    }
    }
</script>
<style scoped>

.parDialog /deep/ .el-dialog__header {
  color: #333;
  font-size: 14px;
  padding: 8px 30px;
  background: linear-gradient(#ffffff 0%, #e1e1e1 100%);
}
.parDialog .el-dialog__title {
  font-size: 16px;
  font-weight: 600;
  color: #333333;
  line-height: 24px;
}
.parDialog /deep/ .el-date-editor.el-input {
  width: 100%;
}
.parDialog .dialogContent {
  /* padding: 15px 25px 25px; */
  width: 100%;
}
.parDialog .dialogContent .elRow {
  padding: 0px 5px 15px 5px;
}
.dialogContent /deep/ .el-date-editor--daterange.el-input__inner {
  width: 100%;
  line-height: 30px;
  padding: 0 3px;
  height: 30px;
}
.footerSet {
  text-align: center;
  width: 100%;
  margin-top: 20px;
}
.footerSet button {
  width: 140px;
  height: 40px;
  background: #d6000f;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 400;
  color: #ffffff;
}
.footerSet .secBtn {
  background: #ffffff;
  border: 1px solid #d6000f;
  color: #d6000f;
}

.parDialog /deep/ .el-dialog__headerbtn {
  top: 8px;
  right: 8px;
  font-size: 24px;
}
</style>