iview modal 弹框 模板

iview modal 弹框 模板

 

<!--
* @description 上传图片
* @fileName camera.vue
* @author 彭成刚
* @date 2019/03/18 10:17:04
* @version V1.0.0
!-->
<template>
  <div>
    <Modal @on-cancel="modalCancel"
           class="uploadPhoto"
           v-model="modalVmodel"
           width="900"
           :mask-closable="false"
           title="上传图片">
      <div class='divFormClass'>
        111
      </div>

      <div slot="footer">
        <Button @click="modalCancel">关闭</Button>

        <Button type="primary"
                @click="modalSave">保存</Button>

      </div>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      modalVmodel: false
    }
  },

  components: {},

  computed: {},

  mounted () {
    this.modalVmodel = true
  },

  methods: {
    modalCancel () {
      this.modalVmodel = false
    },
    modalSave () { }
  }
}

</script>
<style lang='less' scoped>
.uploadPhoto {
  .divFormClass {
    height: calc(~"100vh - 350px");
    overflow-y: auto;
    padding-right: 15px;
  }
}
</style>