98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
||
<div class="baseDialog">
|
||
<el-dialog
|
||
v-el-drag-dialog
|
||
:visible.sync="dialogShow"
|
||
v-bind="$attrs"
|
||
v-on="$listeners"
|
||
>
|
||
<template #title>
|
||
<slot name="title">
|
||
<div class="titleStyle">{{ dialogTitle }}</div>
|
||
</slot>
|
||
</template>
|
||
<slot />
|
||
<template #footer>
|
||
<!--对外继续暴露footer插槽，有个别弹框按钮需要自定义-->
|
||
<slot name="footer">
|
||
<!--将取消与确定按钮集成到内部-->
|
||
<el-row slot="footer" type="flex" justify="end">
|
||
<el-col :span="24">
|
||
<el-button size="small" class="btnTextStyle" @click="$_handleCancel">取消</el-button>
|
||
<el-button type="primary" class="btnTextStyle" size="small" @click="$_handleConfirm">
|
||
确定
|
||
</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
</slot>
|
||
</template>
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import elDragDialog from './js/drag'
|
||
export default {
|
||
inheritAttrs: false,
|
||
name: 'BaseDialog',
|
||
directives: { elDragDialog },
|
||
props: {
|
||
dialogVisible: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
dialogTitle: {
|
||
type: String,
|
||
required: true,
|
||
default: '请填入标题'
|
||
}
|
||
},
|
||
computed: {
|
||
dialogShow: {
|
||
get() {
|
||
return this.dialogVisible
|
||
},
|
||
set(val) {
|
||
this.$emit('update:dialogVisible', val)
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
$_handleConfirm() {
|
||
this.$emit('confirm')
|
||
},
|
||
$_handleCancel() {
|
||
this.$emit('cancel')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
.baseDialog .el-dialog__header {
|
||
font-size: 16px;
|
||
color: rgba(0, 0, 0, 0.85);
|
||
font-weight: 500;
|
||
padding: 13px 24px;
|
||
border-bottom: 1px solid #e9e9e9;
|
||
}
|
||
.baseDialog .el-dialog__header .titleStyle::before{
|
||
content: '';
|
||
display: inline-block;
|
||
width: 4px;
|
||
height: 16px;
|
||
background-color: #0B58FF;
|
||
border-radius: 1px;
|
||
margin-right: 8px;
|
||
position: relative;
|
||
top: 2px;
|
||
}
|
||
.baseDialog .el-dialog__body {
|
||
padding-left: 24px;
|
||
padding-right: 24px;
|
||
}
|
||
.baseDialog .btnTextStyle {
|
||
letter-spacing:6px;
|
||
padding: 9px 10px 9px 16px;
|
||
font-size: 14px;
|
||
}
|
||
</style>
|