可拖拽组件
<BaseDialog
v-if="totalDialogVisible"
title="合计"
:visible.sync="totalDialogVisible"
width="30%"
@close="handleCloseTotal"
@submit="handleCloseTotal"
>
<!-- <p v-for="(item,index) in currencyData" :key="index" style="color:#DD1931;font-size: 18px; font-weight: bold;">
<span>应付 {{item.currency}} : </span>
<span>{{item.totalAmount}}</span>
</p> -->
<!-- 应收 -->
<div v-for="(item,index) in arList" :key="index" style="color:rgb(102, 163, 9); font-size:16px; font-weight:bold">
<p>应收 {{item.currency}} : {{item.totalAmount}} </p>
</div>
<!-- 应付 -->
<div v-for="(item,index) in apList" :key="'flag'+ index" style="color:rgb(221, 25, 49); font-size:16px; font-weight:bold">
<p>应付 {{item.currency}} : {{item.totalAmount}}</p>
</div>
</BaseDialog>
=================================================================================================
main.js中引用：
import BaseDialog from "@/components/BaseDialog";
在全局挂在一次
Vue.component('BaseDialog', BaseDialog)
baseDigLog文件夹
index.vue:
<template>
<el-dialog
:title="title"
:visible.sync="visible"
:width="width"
:before-close="handleClose"
:append-to-body="true"
:close-on-click-modal="false"
:destroy-on-close="destroyOnClose"
:modal="modal"
:show-close="showClose"
v-dialogDrag="drag"
ref="dialogRef"
>
<div class="center-box">
<slot></slot>
</div>
<template v-if="slotFooter">
<slot slot="footer" name="slotFooter"></slot>
</template>
<template v-else>
<span slot="footer" class="dialog-footer" v-if="!hiddenFooter">
<el-button @click="handleClose" v-if="showCancel">{{ cancelText }}</el-button>
<el-button type="primary" @click="submit" :loading="loading" v-if="showConfirm" :disabled="confirmDisabled">{{ confirmText }}</el-button>
</span>
</template>
</el-dialog>
</template>
<script>
export default {
props: {
visible: false,
title: '',
width: '',
// 是否隐藏footer
hiddenFooter: {
type: Boolean,
default: false
},
destroyOnClose: {
type: Boolean,
default: true
},
// 确定后的loading状态
loading: false,
// 插槽footer，为true得自己配置footer， name为slotFooter
slotFooter: false,
// 是否显示确认
showConfirm: {
type: Boolean,
default: true
},
// 是否显示取消
showCancel: {
type: Boolean,
default: true
},
// 是否显示遮罩层
modal: {
type: Boolean,
default: false
},
// 是否显示右上角x
showClose: {
type: Boolean,
default: true
},
// 默认的取消按钮文本
cancelText: {
type: String,
default: '取 消'
},
// 默认的确定按钮文本
confirmText: {
type: String,
default: '确 定'
},
// 是否拖拽
drag: {
type: Boolean,
default: true
},
// 确定按钮是否禁用
confirmDisabled: {
type: Boolean,
default: false
}
},
data() {
return {
};
},
created(){
},
beforeDestroy() {
this.destory()
},
deactivated() {
this.destory()
},
methods: {
handleClose() {
this.$emit("close");
},
submit() {
this.$emit("submit");
},
destory() {
// 没有no-close类名，才执行关闭事件
if (!this.$refs.dialogRef.$el.classList.contains('no-close')) this.handleClose()
}
},
};
</script>
<style lang="scss" scoped>
::v-deep .el-dialog__footer {
text-align: center;
clear: both;
}
</style>
===================================================================
example.vue:
<template>
<BaseDialog
v-if="visible2"
:title="title"
:visible="visible2"
width="1200px"
@close="close"
@submit="submit"
>
<div class="content">
<!-- 这里放业务代码 -->
</div>
</BaseDialog>
</template>
<script>
// 这是使用BaseDialog组件的例子，可直接复制使用
export default {
props: {
visible: false,
title: {
type: String,
default: () => 'Title'
},
},
data() {
return {
visible2: this.visible,
};
},
created() {
},
methods: {
close() {
this.visible2 = false
this.$emit('close')
},
submit() {
this.close()
}
},
};
</script>
<style scoped lang="scss">
.content {
padding: 0 5px 10px;
text-align: left;
}
</style>
totalDialogVisible 是用来判断此组件是否需要显示和隐藏的
handleCloseTotal(){
this.totalDialogVisible = false;
},
用来关闭弹框