封装 dialog 公共组件

前言

  • 在我们写项目的时候会用到各种框架,帮助我们快速高效的开发,element 是我们广泛使用的一种框架,弹窗组件在项目里也是很常见的一个组件,当项目需要使用大量弹框的情况下我们可以通过封装一个公共的弹框组件时=使代码更加高效简洁

封装 dialog 公共组件

  • 在 componets 文件夹里创建一个 dialog 文件,这里我将组件的大多数属性都用上了,只需要进行需求配置就行了

  • 子组件的代码

<el-dialog
  v-model="visible"
  :width="obj.dialogWidth"
  :top="obj.dialogTop"
  :before-close="handleClose"
  @closed="closed"
  :show-close="false"
  draggable
  center
  append-to-body
>
  <template #header="{ close }">
    <div class="my-header">
      <div class="title">{{ obj.dialogTitle }}</div>
      <div class="close" @click="close">
        <slot name="closeIcon"></slot>
      </div>
    </div>
  </template>
  <slot> </slot>
  <template #footer>
    <span v-if="obj.dialogIsFooter">
      <el-button @click="close">{{ obj.dialogCloseBtnText }}</el-button>
      <el-button @click="success">{{ obj.dialogSuccessBtnText }}</el-button>
    </span>
  </template>
</el-dialog>
<script setup>
import { ElMessageBox } from 'element-plus'
import { computed } from 'vue'

const props = defineProps({
  dialogObject: {
    default() {
      return {}
    },
    type: Object,
  },
})
const emit = defineEmits(['dialogSuccess', 'dialogClosed'])

const visible = computed(() => {
  return props.dialogObject.dialogVisible
})

const obj = {
  dialogVisible: props.dialogObject.dialogVisible || false,
  dialogTitle: props.dialogObject.title || '标题',
  dialogWidth: props.dialogObject.width || '30%',
  dialogTop: props.dialogObject.top || '12vh',
  dialogCloseBtnText: props.dialogObject.closeBtnText || '取消',
  dialogSuccessBtnText: props.dialogObject.successBtnText || '成功',
  dialogIsFooter: props.dialogObject.isFooter || false,
}

//取消按钮
const close = () => {
  props.dialogObject.dialogVisible = false
}

//确认的按钮
const success = () => {
  emit('dialogSuccess', false, 'success')
}

//关闭弹框的回调
const closed = () => {
  emit('dialogClosed')
}

//弹框关闭提醒
const handleClose = (done: () => void) => {
  ElMessageBox.confirm('是否关闭弹窗')
    .then(() => {
      done()
      props.dialogObject.dialogVisible = false
    })
    .catch(() => {
      // catch error
    })
}
</script>
  • 父组件的代码
<template>
  <el-button type="danger" @click="btnClick">打开</el-button>
  <Dialog 
    class="dialogClass"
    :dialog-object="dialogObject"
    @dialogSuccess="dialogSuccess"
    @dialogClosed="dialogClosed"
  >
    <template #closeIcon>
      <el-button type="danger" :icon="Close" circle />
    </template>
    <template> 弹框内容 </template>
  </Dialog >
</template>
<script setup>
import Dialog from '@/components/dialog.vue'
import { reactive } from 'vue'
import { Close } from '@element-plus/icons-vue'

const dialogObject = reactive({
  dialogVisible: false,
  title: '标题',
  width: '90%',
  top: '12vh',
  successBtnText: '确定',
  closeBtnText: '取消',
  isFooter: true,
})
const btnClick = () => {
  dialogObject.dialogVisible = true
}
// 确定
const dialogSuccess = () => {
  dialogObject.dialogVisible = false
}
// 关闭弹窗的回调
const dialogClosed = () => {}
</script>
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的 Vue Element 封装 dialog 组件的示例: ```vue <template> <el-dialog :visible.sync="dialogVisible" :title="title" :width="width" :height="height" :before-close="beforeClose"> <slot></slot> <div slot="footer"> <el-button @click="cancel">取消</el-button> <el-button type="primary" @click="confirm">确定</el-button> </div> </el-dialog> </template> <script> export default { name: 'MyDialog', props: { title: { type: String, default: '' }, width: { type: String, default: '50%' }, height: { type: String, default: 'auto' } }, data() { return { dialogVisible: false } }, methods: { // 打开对话框 open() { this.dialogVisible = true }, // 关闭对话框 close() { this.dialogVisible = false }, // 确定操作 confirm() { this.$emit('confirm') this.close() }, // 取消操作 cancel() { this.$emit('cancel') this.close() }, // 关闭前的操作 beforeClose(done) { this.$emit('beforeClose', done) } } } </script> ``` 使用示例: ```vue <template> <div> <el-button @click="openDialog">打开对话框</el-button> <my-dialog :title="dialogTitle" :width="dialogWidth" :height="dialogHeight" @confirm="handleConfirm" @cancel="handleCancel" @beforeClose="handleBeforeClose"> <div>这是对话框内容</div> <div>可以放置任何内容</div> </my-dialog> </div> </template> <script> import MyDialog from '@/components/MyDialog' export default { name: 'MyPage', components: { MyDialog }, data() { return { dialogTitle: '对话框标题', dialogWidth: '60%', dialogHeight: 'auto' } }, methods: { openDialog() { this.$refs.dialog.open() }, handleConfirm() { console.log('点击了确定') }, handleCancel() { console.log('点击了取消') }, handleBeforeClose(done) { console.log('关闭前的操作') done() } } } </script> ``` 在该组件,我们使用了 Vue Element dialog 组件,并在其基础上封装了一些常用的功能,例如: - 可以通过 props 自定义对话框的标题、宽度和高度; - 可以通过默认插槽放置任何内容; - 可以通过事件监听点击确定和取消按钮的操作,并在关闭对话框前执行一些操作。 在使用时,只需要像使用 Vue Element dialog 组件一样,在需要使用对话框的地方加入 `MyDialog` 组件,并通过 props 自定义对话框的样式和标题,然后在需要打开对话框的地方调用 `open()` 方法即可。同时,我们也可以在父组件监听对话框的确认、取消、关闭前等事件,并执行相应的操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值