Vue弹窗封装

原创已于 2023-01-03 10:36:38 修改 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2019-12-20 17:09:59 首次发布

本文详细介绍了在Vue2.0和Vue3.0中封装弹窗组件的方法，包括如何使用v-model和.sync来同步父组件的可见性状态，以及如何通过自定义事件和方法实现弹窗的动态交互。

一、vue2.0

<template>
  <div class="na-dialog">
    <el-dialog :title="datas.title" v-model="innerVisible" :width="datas.width" @close="btnClick(datas.close)"
      @opened="btnClick(datas.open)">
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="innerVisible = false" size="small">取消</el-button>
          <template v-for="item in datas.btns">
            <el-button type="primary" @click="btnClick(item.methods)" size="small">{{ item.label }}</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    props: {
      visible: { //绑定显隐的字段
        type: Boolean,
        default: false
      },
      datas: {
        type: Object,
        default: { //弹窗数据
          title: '弹窗名称', //弹窗名称
          width: '70%', //弹窗宽度
          close: 'closeDialog', //弹窗关闭后调用
          btns: [ //按钮-取消不需要
            {
              label: '保存',
              methods: 'save'
            }
          ]
        }
      }
    },
    computed: {
      innerVisible: {
        get() {
          return this.visible
        },
        set(val) {
          debugger
          this.$emit('update:visible', val)
        }
      },
    },
    methods: {
      btnClick(key) {
        if (key) {
          this.$nextTick(() => {
            this.$parent[key]();
          })
        }
      },
    },
  }
</script>

<style lang="scss" scoped>
  .na-dialog {
    :deep(.el-dialog) {
      .el-dialog__body {
        padding: 0 !important;
        height: calc(100% - 90px);
      }
    }
  }
</style>

<na-dialog :visible.sync="visible" :data="dialog"></na-dialog>

父组件需要加入closeDialog方法、save方法

二、vue3.0弹窗封装

<template>
  <div class="na-dialog">
    <el-dialog :title="datas.title" v-model="innerVisible" :width="datas.width"
      @close="btnClick(datas.close)" @opened="btnClick(datas.open)">
      <slot></slot>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="innerVisible= false" size="small">取消</el-button>
          <template v-for="item in datas.btns">
            <el-button type="primary" @click="btnClick(item.methods)" size="small">{{ item.label }}</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script>
  import {
    reactive,
    toRefs,
    computed,
    getCurrentInstance,
    nextTick,
  } from "vue";
  export default {
    props: {
      visible: {//绑定显隐的字段
        type: Boolean,
        default: false
      },
      datas: {
        type: Object,
        default: {//弹窗数据
          title: '弹窗名称',//弹窗名称
          width: '70%', //弹窗宽度
          close: 'closeDialog', //弹窗关闭后调用
          btns: [ //按钮-取消不需要
            {
              label: '保存',
              methods: 'save'
            }
          ]
        }
      }
    },
    setup(props, context) {
      const state = reactive({});
      const instance = getCurrentInstance();
      const {
        proxy
      } = instance;
      const {
        visible
      } = toRefs(props);
      let innerVisible = computed({
        get: () => visible.value,
        set: (val) => {
          context.emit("update:visible", val);
        },
      })
      //按钮按下
      const btnClick = (key) => {
        if (key) {
          nextTick(()=>{
            proxy.$parent[key]();
          })
        }
      }
      return {
        ...toRefs(state),
        innerVisible,
        btnClick
      };
    }
  }
</script>

<style lang="scss" scoped>
  .na-dialog {
    :deep(.el-dialog) {
      .el-dialog__body {
        padding: 0 !important;
        height: calc(100% - 90px);
      }
    }
  }
</style>

<na-dialog v-model:visible="dialog.visible" :data="dialog"></na-dialog>

引入没什么不同，只是参数有一点区别，一个是参数后加.sync一个是参数前加v-model:

Vue弹窗封装

1 条评论