可拖拽弹框组件

可拖拽组件 <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;     }, 用来关闭弹框

可拖拽弹框组件