You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
111 lines
2.3 KiB
111 lines
2.3 KiB
<template>
|
|
<div class="dialog">
|
|
<el-dialog :title="title"
|
|
lock-scroll
|
|
:visible.sync="visible"
|
|
:modal="modal"
|
|
:width="width+'%'"
|
|
:top="top"
|
|
:before-close="handleClose"
|
|
:append-to-body="isNest"
|
|
:close-on-click-modal="false">
|
|
<!-- <div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}"> -->
|
|
<div :style="{height:formHeight+'px',overflowY:'auto',overflowX:'hidden'}">
|
|
<slot></slot>
|
|
</div>
|
|
<span v-if="showFooter"
|
|
slot="footer"
|
|
class="dialog-footer">
|
|
<el-button v-if="showCancel"
|
|
@click="handleCancel">{{cancel}}</el-button>
|
|
<el-button v-if="showConfirm"
|
|
type="primary"
|
|
:disabled="disabled"
|
|
@click="handleConfirm">{{confirm}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable */
|
|
import { mapGetters } from 'vuex'
|
|
export default {
|
|
computed: {
|
|
formHeight () {
|
|
// let clientHeight = document.documentElement.clientHeight
|
|
return this.clientHeight * 0.6 * this.dialogHeight
|
|
},
|
|
...mapGetters(['clientHeight'])
|
|
},
|
|
props: {
|
|
title: {
|
|
type: String,
|
|
default: '提示'
|
|
},
|
|
cancel: {
|
|
type: String,
|
|
default: '取消'
|
|
},
|
|
confirm: {
|
|
type: String,
|
|
default: '确定'
|
|
},
|
|
visible: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
width: {
|
|
type: Number,
|
|
default: 70
|
|
},
|
|
top: {
|
|
type: String,
|
|
default: '60px'
|
|
},
|
|
isNest: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
modal: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
showConfirm: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
showCancel: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
dialogHeight: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
showFooter: {
|
|
type: Boolean,
|
|
default: true
|
|
}
|
|
},
|
|
methods: {
|
|
handleClose () {
|
|
// 点击右上角关闭按钮，双向数据绑定的问题
|
|
this.$emit('cancel')
|
|
},
|
|
handleCancel () {
|
|
this.$emit('cancel')
|
|
},
|
|
handleConfirm () {
|
|
this.$emit('ok')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
</style>
|
|
|