vue3.x + elementPlus 封装组件之dialog弹框封装篇

根据上篇文章，我们创建了对应的组件js和视图对应的dome页面，这一次我们处理dialog

1.根据上篇一样我们创建对应的dialog文件和dialog.vue文件 下面就是里面的内容

<template>
  <div class="lz-dialog">
    <el-dialog
      v-model="dialogShow"
      :title="obj.dialogTitle"
      :width="obj.dialogWidth"
      :before-close="close"
      draggable
    >
      <slot> </slot>
      <template #footer>
        <span v-if="obj.dialogIsFooter" class="dialog-footer">
          <el-button class="btn-mixins-clear-default" @click="close">{{ obj.dialogCloseBtnText }}</el-button>
          <el-button class="btn-mixins dia-suc" @click="success">{{ obj.dialogSuccessBtnText }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { computed } from 'vue'
export default {
  props: {
    dialogObject: {
      default() {
        return {}
      },
      type: Object
    }
  },
  emits: ['dialogClose', 'dialogSuccess'],
  setup(props, ctx) {
    // const dialogObj = reactive(inject('dialogObj'))
    // 处理props的数据 重新定义 dialogVisible
    const dialogShow = computed({
      get() {
        // getter
        return props.dialogObject.dialogVisible
      },
      set(val) {
        // console.log(val)
        return val
      }
    })
    const obj = {
      dialogTitle: props.dialogObject.title || '标题',
      dialogWidth: props.dialogObject.width || '30%',
      dialogCloseBtnText: props.dialogObject.closeBtnText || '取消',
      dialogSuccessBtnText: props.dialogObject.successBtnText || '成功',
      dialogIsFooter: props.dialogObject.isFooter || false
    }
    const close = () => {
      ctx.emit('dialogClose', false, 'close')
    }
    const success = () => {
      ctx.emit('dialogSuccess', false, 'success')
    }
    return { obj, dialogShow, close, success }
  }
}
</script>
<style lang="scss" scope>
.lz-dialog {
  .dia-suc {
    margin-left: 16px !important;
  }
}
</style>

2.在components/index.js文件里面导入对应的dialog.vue文件

import LZDialog from './dialog/dialog.vue'

export default {

  install: (Vue) => { Vue.component('LZDialog', LZDialog) }

}

3.使用

  <LZDialog
      :dialog-object="dialogObjDelDef"
      @dialogClose="dialogCloseDef"
      @dialogSuccess="dialogSuccessDef"
    >
      <div class="ptb16 t-c">删除之后不可复原</div>
    </LZDialog>

// 删除弹框数据
const dialogObjDelDef = reactive({
  dialogVisible: false,
  title: '是否要删除当前图片？',
  width: '30%',
  successBtnText: '确定',
  closeBtnText: '取消',
  isFooter: true // 是否显示按钮
})
  // 关闭弹窗
  const dialogCloseDef = () => {
    dialogObjDelDef.dialogVisible = false
  }
  // 确定
  const dialogSuccessDef = () => {
    dialogObjDelDef.dialogVisible = false
  }
setup(props, ctx) {
    return { dialogObjDelDef  }
}