vue2空白弹窗模板

<template>

  <el-dialog :title="title" :visible="isShow" :append-to-body="true" width="900px" :before-close="handleClose">

    <div class="form-box">

      <el-form label-position="right" label-width="170px" :rules="rules" :model="CloneData" ref="CloneData">

        <!-- 左边布局 -->

        <div>

         

        </div>

        <!-- 右边布局 -->

        <div>

         

        </div>

      </el-form>

    </div>

    <span slot="footer">

      <el-button @click="handleClose">关闭</el-button>

      <el-button v-if="permissions.SewageTreatmentPlantEdit" type="primary" @click="handleOk">提交</el-button>

    </span>

  </el-dialog>

</template>



<script>

export default {

  name: 'viewDetail',

  props: {

    title: {

      type: String,

      default: '查看详情'

    },

    isShow: {

      type: Boolean,

      default: false

    },

    data: {

      type: Object,

      default: () => {

        return {}

      }

    }

  },

  data() {

    // 手机号检验

    // let checkMobile = (rule, value, callback) => {

    //  if (!isMobile(value)) {

    //    return callback(new Error('无效或非法的手机号'))

    //  }

    //  return callback()

    // }

    return {

      radio: 1,//单选框

      value1: '',//日期选择器

      input2: '盒',

      provinceData: [],

      cityData: [],

      areaData: [],

      CloneData: {},

      permissions: this.$store.state.permissions,

      rules: {

        name: [{ required: true, message: '存储室号', trigger: 'blur' }],

      }

    }

  },

  watch: {

    isShow(newVal) {

      if (newVal) {

        // 获取区域省数据

        // 机构等级判断

      }

    },

    data: {

      handler(newVals) {

        // console.log('newVals', newVals)

        this.CloneData = newVals

      },

      deep: true

    }

  },

  methods: {

    handleChange(){

      console.log('数字变化1111111111');

    },

    handleClose() {

      this.$emit('close')

    },

    handleOk() {

      this.$emit('ok')

    }

  }

}

</script>



<style lang="scss" scoped>

/deep/ .el-dialog {

  border-radius: 5px;

}



/deep/ .el-dialog__header {

  background-color: #579aff;

  line-height: 60px;

  font-size: $font-size-medi;

  padding: 0 20px;

  border-radius: 5px 5px 0 0;



  .el-dialog__title {

    color: $font-color-white;

  }



  .el-dialog__headerbtn {

    .el-dialog__close {

      font-size: $font-size-larger;

      color: $font-color-white;

    }

  }

}



.form-box {

  padding: 0 20px;



  .el-form {

    display: flex;

    justify-content: space-between;



    >div {

      width: 100%;

    }



    // /deep/ .el-input__inner {

      // padding-right: 0;

    // }



    .el-form-item.label-top {

      /deep/ .el-form-item__content {

        margin-left: 0 !important;

      }



      /deep/ .el-form-item__label {

        display: block;

        width: 230px !important;

        text-align: left;

      }

    }

  }

}

</style>