Dialog 弹窗组件

基于 Element UI 的 Dialog 组件封装的业务弹窗组件，支持模板使用和 JavaScript 调用两种方式。

基础用法

模板使用

<template>
  <div>
    <el-button @click="showDialog = true">打开弹窗</el-button>

    <by-dialog
      :visible.sync="showDialog"
      title="基础弹窗"
      content="这是一个基础的弹窗示例"
      @confirm="handleConfirm"
      @cancel="handleCancel"
    />
  </div>
</template>

<script>
export default {
  data() {
    return {
      showDialog: false
    }
  },
  methods: {
    handleConfirm() {
      this.$message.success('确认操作')
    },
    handleCancel() {
      this.$message.info('取消操作')
    }
  }
}
</script>

JavaScript 调用

// 提示弹窗
this.$byDialog.alert('这是一个提示信息', '提示')

// 确认弹窗
this.$byDialog.confirm('确认删除这条记录吗？', '确认').then(result => {
  if (result.action === 'confirm') {
    this.$message.success('确认删除')
  }
})

// 成功提示
this.$byDialog.success('操作成功！', '成功')

// 错误提示
this.$byDialog.error('操作失败！', '错误')

// 信息提示
this.$byDialog.info('这是一条信息', '信息')

组件属性

参数	说明	类型	可选值	默认值
visible	是否显示弹窗	boolean	—	false
title	弹窗标题	string	—	''
content	弹窗内容（当没有插槽时使用）	string	—	''
width	弹窗宽度	string	—	'600px'
showFooter	是否显示底部按钮区域	boolean	—	true
closeOnClickModal	是否点击模态层关闭弹窗	boolean	—	false
buttons	按钮配置	array	—	见下方按钮配置
customClass	自定义类名	string	—	''

按钮配置

参数	说明	类型	可选值	默认值
text	按钮文本	string	—	—
type	按钮类型	string	primary/success/warning/danger/info/text	default
size	按钮尺寸	string	medium/small/mini	small
loading	是否加载中	boolean	—	false
disabled	是否禁用	boolean	—	false
icon	图标类名	string	—	—
action	按钮动作	string	—	—
callback	按钮点击回调	function	—	—
class	自定义类名	string	—	—
style	自定义样式	object	—	—

插槽

插槽名	说明
default	弹窗内容区域
header	弹窗头部区域
footer	弹窗底部按钮区域

事件

事件名	说明	回调参数
close	弹窗关闭时触发	—
confirm	点击确认按钮时触发	(button, index)
cancel	点击取消按钮时触发	(button, index)
[action]	点击自定义按钮时触发	(button, index)

使用示例

基础弹窗

<by-dialog
  :visible.sync="showBasicDialog"
  title="基础弹窗"
  content="这是一个基础的弹窗示例"
  @confirm="handleConfirm"
  @cancel="handleCancel"
/>

自定义内容弹窗

<by-dialog :visible.sync="showCustomDialog" title="自定义内容" width="600px">
  <template #header>
    <h3>自定义头部</h3>
  </template>
  
  <div class="custom-content">
    <el-alert
      title="提示信息"
      type="info"
      :closable="false"
      show-icon
    />
    <el-input
      v-model="inputValue"
      placeholder="请输入内容"
      style="margin-top: 20px;"
    />
  </div>
  
  <template #footer>
    <div class="custom-footer">
      <el-button @click="showCustomDialog = false">取消</el-button>
      <el-button type="primary" @click="handleCustomConfirm">确定</el-button>
    </div>
  </template>
</by-dialog>

自定义按钮配置

<by-dialog
  :visible.sync="showCustomButtonsDialog"
  title="自定义按钮"
  content="这个弹窗有自定义的按钮配置"
  :buttons="customButtons"
  @save="handleSave"
  @preview="handlePreview"
  @delete="handleDelete"
  @cancel="handleCancel"
/>

data() {
  return {
    customButtons: [
      {
        text: '预览',
        type: 'info',
        action: 'preview',
        icon: 'el-icon-view'
      },
      {
        text: '保存',
        type: 'primary',
        action: 'save',
        icon: 'el-icon-check'
      },
      {
        text: '删除',
        type: 'danger',
        action: 'delete',
        icon: 'el-icon-delete'
      },
      {
        text: '取消',
        type: 'default',
        action: 'cancel',
        icon: 'el-icon-close'
      }
    ]
  }
}

加载状态按钮

<by-dialog
  :visible.sync="showLoadingDialog"
  title="加载状态"
  content="点击保存按钮查看加载状态"
  :buttons="loadingButtons"
  @save="handleSaveWithLoading"
/>

data() {
  return {
    loadingButtons: [
      {
        text: '保存',
        type: 'primary',
        action: 'save',
        loading: false
      },
      {
        text: '取消',
        type: 'default',
        action: 'cancel'
      }
    ]
  }
},
methods: {
  handleSaveWithLoading() {
    // 设置按钮加载状态
    const saveButton = this.loadingButtons.find(btn => btn.action === 'save')
    if (saveButton) {
      saveButton.loading = true

      // 模拟异步操作
      setTimeout(() => {
        saveButton.loading = false
        this.showLoadingDialog = false
        this.$message.success('保存成功')
      }, 2000)
    }
  }
}

表单弹窗

<by-dialog
  :visible.sync="showFormDialog"
  title="表单弹窗"
  width="600px"
  :buttons="formButtons"
  @submit="handleFormSubmit"
>
  <el-form :model="form" :rules="formRules" ref="formRef" label-width="100px">
    <el-form-item label="姓名" prop="name">
      <el-input v-model="form.name" placeholder="请输入姓名" />
    </el-form-item>
    <el-form-item label="邮箱" prop="email">
      <el-input v-model="form.email" placeholder="请输入邮箱" />
    </el-form-item>
    <el-form-item label="年龄" prop="age">
      <el-input-number v-model="form.age" :min="1" :max="120" />
    </el-form-item>
  </el-form>
</by-dialog>

不同尺寸弹窗

<!-- 小尺寸弹窗 -->
<by-dialog
  :visible.sync="showSmallDialog"
  title="小尺寸弹窗"
  content="这是一个小尺寸的弹窗"
  custom-class="small"
  :close-on-click-modal="true"
/>

<!-- 中等尺寸弹窗 -->
<by-dialog
  :visible.sync="showMediumDialog"
  title="中等尺寸弹窗"
  content="这是一个中等尺寸的弹窗"
  custom-class="medium"
/>

<!-- 大尺寸弹窗 -->
<by-dialog
  :visible.sync="showLargeDialog"
  title="大尺寸弹窗"
  content="这是一个大尺寸的弹窗，适合显示更多内容"
  custom-class="large"
/>

<!-- 全屏弹窗 -->
<by-dialog :visible.sync="showFullscreenDialog" title="全屏弹窗" custom-class="fullscreen">
  <div class="fullscreen-content">
    <!-- 全屏内容 -->
  </div>
</by-dialog>

JavaScript API

ByDialogService 方法

方法名	说明	参数	返回值
alert	警告弹窗	(content, title, options)	Promise
confirm	确认弹窗	(content, title, options)	Promise
success	成功提示弹窗	(content, title, options)	Promise
error	错误提示弹窗	(content, title, options)	Promise
info	信息提示弹窗	(content, title, options)	Promise
custom	自定义弹窗	(options)	Promise
show	通用弹窗方法	(options)	Promise

使用示例

// 基础调用
this.$byDialog.alert('提示内容')
this.$byDialog.confirm('确认要删除吗？')

// 带标题和选项
this.$byDialog.alert('内容', '标题', { width: '500px' })

// 自定义弹窗
this.$byDialog
  .custom({
    title: '自定义弹窗',
    content: '这是一个自定义的弹窗',
    width: '500px',
    buttons: [
      {
        text: '稍后再说',
        type: 'default',
        action: 'later'
      },
      {
        text: '立即处理',
        type: 'primary',
        action: 'now'
      }
    ]
  })
  .then(result => {
    if (result.action === 'now') {
      this.$message.success('立即处理')
    } else if (result.action === 'later') {
      this.$message.info('稍后再说')
    }
  })

样式定制

自定义类名

<by-dialog :visible.sync="showDialog" title="自定义样式弹窗" custom-class="my-custom-dialog" />

.my-custom-dialog {
  .el-dialog {
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  }

  .el-dialog__header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 8px 8px 0 0;
  }

  .el-dialog__body {
    padding: 30px;
  }
}

不同尺寸样式

// 小尺寸弹窗
.by-dialog.small {
  .el-dialog {
    width: 400px !important;
  }
}

// 中等尺寸弹窗
.by-dialog.medium {
  .el-dialog {
    width: 600px !important;
  }
}

// 大尺寸弹窗
.by-dialog.large {
  .el-dialog {
    width: 800px !important;
  }
}

// 全屏弹窗
.by-dialog.fullscreen {
  .el-dialog {
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .el-dialog__body {
    height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

注意事项

1. 事件监听：组件会自动监听所有按钮的点击事件，通过 action 属性区分不同的按钮
2. 按钮回调：按钮支持 callback 属性，如果返回 false 会阻止默认行为
3. 自动关闭：确认和取消按钮默认会自动关闭弹窗，其他按钮需要手动处理

完整示例

查看 DialogExample.vue 文件获取更多使用示例。