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  }
}

  • 7
    点赞
  • 18
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
首先,你需要在父组件中引入 Dialog 弹框组件,并在父组件的 template 中添加一个触发显示弹框的按钮。例如: ```vue <template> <div> <button @click="showDialog">显示弹框</button> <Dialog v-model="dialogVisible"></Dialog> </div> </template> ``` 在上面的代码中,我们添加了一个按钮,当用户点击该按钮时,会触发 showDialog 方法。同时,我们引入了一个名为 Dialog组件,并将它的显示与隐藏与一个名为 dialogVisible 的变量绑定了起来。 接下来,在父组件的 script 中,我们需要定义 showDialog 方法以及 dialogVisible 变量。例如: ```vue <script> import Dialog from './Dialog.vue' export default { components: { Dialog }, data() { return { dialogVisible: false } }, methods: { showDialog() { this.dialogVisible = true } } } </script> ``` 在上面的代码中,我们首先引入了 Dialog 组件,然后在 data 中定义了 dialogVisible 变量,并将其默认值设置为 false。接着,我们定义了一个名为 showDialog 的方法,该方法将 dialogVisible 设置为 true,从而显示 Dialog 弹框组件。 最后,我们需要在 Dialog 弹框组件中添加一个关闭按钮,并将其与 dialogVisible 变量绑定起来。例如: ```vue <template> <div> <div class="dialog-mask" v-if="visible" @click="close"></div> <div class="dialog-wrapper" v-if="visible"> <div class="dialog-content"> <div class="dialog-header"> <h3 class="dialog-title">Dialog 标题</h3> <button class="dialog-close-btn" @click="close">×</button> </div> <div class="dialog-body"> <p>Dialog 内容</p> </div> </div> </div> </div> </template> <script> export default { props: { visible: { type: Boolean, required: true } }, methods: { close() { this.$emit('update:visible', false) } } } </script> ``` 在上面的代码中,我们添加了一个名为 close 的方法,该方法会将 dialogVisible 设置为 false,并通过 $emit 方法将更新后的值传递给父组件。同时,我们在弹框组件中添加了一个关闭按钮,并在按钮的 click 事件中调用 close 方法。 这样,当用户点击父组件中的按钮时,就会触发 showDialog 方法,从而显示 Dialog 弹框组件。当用户点击弹框中的关闭按钮时,会触发 close 方法,从而关闭弹框

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值