vue中封装el-dialog弹窗（对话框）

原创已于 2022-06-08 18:50:47 修改 · 3.8k 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#elementui #vue.js #javascript

于 2022-05-25 15:48:42 首次发布

本文介绍了一个使用Vue.js实现的弹窗组件案例。该组件通过自定义的PopUp组件完成弹出窗口的功能，并且能够接收外部传入的数据来决定其显示内容及行为。文章展示了如何在主文件中设置定时器来触发弹窗的显示与隐藏，同时通过属性同步确保弹窗状态的正确更新。

index.vue

<template>
  <div>
    <PopUp v-if="visible" :visible.sync="visible" :obejct-data="obejctData" @updateVisible="updateVisibleId" />
  </div>
</template>

<script>
import PopUp from './PopUp.vue'
export default {
  components: {
    PopUp
  },
  data() {
    return {
      visible: false,
      obejctData: {}
    }
  },
  created() {
    setTimeout(() => {
      //弹出
      this.visible = true
      this.obejctData = {
        type: 'add'
      }
    }, 1000)
  },
  methods: {
    updateVisibleId(val) {
      this.visible = val
    }
  }
}
</script>

<style></style>

popup.vue

<template>
  <div>
    <el-dialog :visible.sync="dialogVisible" width="70%">
      <div class="center">
        <p>my name is popup</p>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    //传递的参数信息
    obejctData: {
      type: Object,
      default: () => {}
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('updateVisible', val)
      }
    }
  },
  created() {
    console.log(this.obejctData)
  }
}
</script>