公共弹窗组件
<p>公共弹窗组件</p>
<pre><code class="language-javascript"><template>
<el-dialog class="super-dialog" :class="title ? 'c-bm1-mwhite-dialog' : ''" :visible.sync="show" :width="width" :top="top" :show-close="showClose" :close-on-click-modal="closeOnClickModel" :custom-class="customClass" :modal-append-to-body="modalAppendToBody" :append-to-body="appendToBody" :before-close="handleClose">
<div slot="title" v-if="title">
<slot name="title">
<span class="c-fs-16 c-fc-333">{{title}}</span>
</slot>
</div>
<div v-if="scroll" :style='{"height":maxHeight}'>
<el-scrollbar style="height:100%">
<slot name="content"></slot>
</el-scrollbar>
</div>
<div v-else>
<slot name="content"></slot>
</div>
<div slot="footer" v-if="showButton">
<el-button v-if="showCloseButton" @click="handleClose" plain style="width: 80px;">{{cancelText}}</el-button>
<el-button v-if="showConfirmButton" @click="handleConfirm" :disabled="btnLoading" v-loading.fullscreen="btnLoading" type="primary" style="width: 80px;">{{confirmText}}</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'superDialog',
props: {
show: { // 是否显示
type: Boolean,
default: false
},
scroll: {
type: Boolean,
default: false
},
maxHeight: {
type: String,
default: '400px'
},
title: {
type: String,
default: ''
},
width: { // 宽度
type: String,
default: '50%'
},
closeOnClickModel: { // 是否点击遮罩层关闭
type: Boolean,
default: true
},
top: { // 距离顶部距离
type: String,
default: '15vh'
},
showClose: { // 显示关闭按钮
type: Boolean,
default: true
},
customClass: { // 自定义样式类名
type: String,
default: ''
},
modalAppendToBody: {
type: Boolean,
default: true
},
appendToBody: {
type: Boolean,
default: false
},
confirmText: { // 确定按钮文字
type: String,
default: '确定'
},
cancelText: { // 取消按钮文字
type: String,
default: '关闭'
},
showButton: { // 是否显示按钮
type: Boolean,
default: true
},
showConfirmButton: { // 显示确定按钮
type: Boolean,
default: true
},
showCloseButton: { // 显示取消按钮
type: Boolean,
default: true
},
loading: {
type: Boolean,
default: false
}
},
data() {
return {
}
},
computed: {
btnLoading() {
return this.loading
}
},
watch: {
loading() {
this.btnLoading = this.loading
}
},
created() {
},
methods: {
handleClose(done) {
this.$emit('close')
},
handleConfirm() {
this.$emit('confirm')
}
}
}
</script>
<style lang="scss" scoped>
.super-dialog ::v-deep .el-dialog__header {
padding: 15px 15px;
}
::v-deep {
.el-dialog__header {
background-color: #E0E0E0;
color: #000;
font-weight: 600;
}
}
.super-dialog ::v-deep .el-dialog {
margin-bottom: 50px;
}
.super-dialog ::v-deep .el-dialog__footer {
padding: 20px;
border-top: 1px solid rgb(228, 228, 228);
}
</style></code></pre>
<p>引用方式</p>
<pre><code class="language-javascript"> <super-dialog :show="show" @close="close" title="添加消息模板" cancelText="取消" @confirm="confirm" width="35%">
<div slot="title">
{{dialogType==="add" ? "添加" : "编辑"}}消息模板
</div>
<div slot="content">
<el-form ref="form" :model="form" :rules="rules" label-width="90px">
<el-form-item label="模板键值:" prop="primaryKey">
<el-input v-model="form.primaryKey" placeholder="请填写参数名称"></el-input>
</el-form-item>
<el-form-item label="模板名称:" prop="templateName">
<el-input v-model="form.templateName" placeholder="请填写参数键名"></el-input>
</el-form-item>
<el-form-item label="模板内容:" prop="keyValue">
<el-input placeholder="请填写参数键值" v-model="form.keyValue"></el-input>
</el-form-item>
<el-form-item label="备注:" prop="remark">
<div class="desc relative">
<el-input type="textarea" rows="7" class="word-limit-textarea" placeholder="输入备注" v-model="form.remark" maxlength="300"></el-input>
<span class="word-limit-tips word-limit-textareaTips">已输入 {{form.remark ? getLength(form.remark) : 0}}/300</span>
</div>
</el-form-item>
</el-form>
</div>
</super-dialog></code></pre>