element——vue封装弹窗及注意事项

element——vue封装弹窗及注意事项

可在每页写单独样式或在封装文件中写统一样式
1. 弹窗脚部取消按钮可隐藏，
2. 按钮可实现loading效果，
3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义

第一种方法

弊端：
弹窗插件点击确定会默认调取弹窗右上角关闭事件，所以有时候关闭方法中的内容会替换确定方法中的内容，导致确定方法中调取接口时数据错误

点击确定时如果有关闭弹窗的操作，就会默认出发右上角关闭按钮所绑定事件

1.1 封装

<template>
    <div class="all-dialog2">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="visible"
        :width="dialogWidth"
        :close-on-click-modal="false"
        center
        @close="titleCancel" :modal-append-to-body='false'>
        <slot></slot>
        <span slot="footer" class="dialog-footer">
          <el-button @click="Cancel" v-if="isBtLeft" class="back-btn">{{btLeft}}</el-button>
          <el-button type="primary" @click="Save" :loading="isLoading" class="save-btn">{{btRight}}</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'public-dialog',
  data () {
    return {
      options: [
        {
          value: 'Y',
          label: '通过'
        },
        {
          value: 'N',
          label: '不通过'
        }
      ]
    }
  },
  props: {
    dialogTitle: {
      type: String,
      default: '温馨提示'
    },
    dialogWidth: {
      type: String,
      default: '400px'
    },
    centerDialogVisible: {
      type: Boolean,
      default () {
        return false
      }
    },
    btLeft: {
      type: String,
      default: '取消'
    },
    btRight: {
      type: String,
      default: '确定'
    },
    isBtLeft: {
      type: Boolean,
      default () {
        return true
      }
    },
    isLoading: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  computed: {
  // 计算
    visible: {
      get () {
        return this.centerDialogVisible
      },
      set (val) {}
    }
  },
  methods: {
  // 事件采用vue父子组件传值
  // 头部关闭按钮
    titleCancel () {
      this.$emit('titlePopupData')
    },
  // 脚部取消按钮
    Cancel () {
      this.$emit('resetPopupData')
    },
  // 脚部确定按钮
    Save () {
      this.$emit('submitPopupData')
    }
  }
}
</script>

<style lang="scss">
</style>

1.2 使用封装方法

1. 注册

import publicDialog from '../public-dialog'
components: { publicDialog }

2. 使用

<public-dialog :centerDialogVisible="centerDialog"
:dialogTitle="'标题'"
@resetPopupData="centerDialog = false" @titlePopupData="centerDialog = false" @submitPopupData="centerDialog = false" >
  <div class="info">
  // 内容
  </div>
</public-dialog>

第二种方法

优点：
弹窗插件点击确定会默认调取弹窗右上角关闭事件，该方法使用@click.native.prevent事件修饰符取消默认事件，通过计算属性computed中的set()方法把数据传输到封装方法调用处，点击确定提交按钮时取消掉用头部关闭按钮默认事件

2.1 封装

1. 弹窗脚部取消按钮可隐藏，
2. 按钮可实现loading效果，
3. 弹窗标题、脚部按钮内容、弹窗宽度都可以自定义

<template>
    <div class="all-dialog2">
      <el-dialog
        :title="dialogTitle"
        :visible.sync="visible"
        :width="dialogWidth"
        :close-on-click-modal="false"
        center
        @close.native.prevent="titleCancel" :modal-append-to-body='false'>
        <slot></slot>
        <span slot="footer" class="dialog-footer">
          <el-button @click.native.prevent="Cancel" v-if="isBtLeft" class="back-btn">{{btLeft}}</el-button>
          <el-button type="primary" @click.native.prevent ="Save" :loading="isLoading" class="save-btn">{{btRight}}</el-button>
        </span>
      </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'public-dialog',
  data () {
    return {
      options: [
        {
          value: 'Y',
          label: '通过'
        },
        {
          value: 'N',
          label: '不通过'
        }
      ]
    }
  },
  props: {
    dialogTitle: {
      type: String,
      default: '温馨提示'
    },
    dialogWidth: {
      type: String,
      default: '400px'
    },
    centerDialogVisible: {
      type: Boolean,
      default () {
        return false
      }
    },
    btLeft: {
      type: String,
      default: '取消'
    },
    btRight: {
      type: String,
      default: '确定'
    },
    isBtLeft: {
      type: Boolean,
      default () {
        return true
      }
    },
    isLoading: {
      type: Boolean,
      default () {
        return false
      }
    }
  },
  computed: {
  // 计算
    visible: {
      get () {
        return this.centerDialogVisible
      },
      set (val) { // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('updateVisible', val)
      }
    }
  },
  methods: {
  // 事件采用vue父子组件传值
  // 头部关闭按钮
    titleCancel () {
      this.$emit('titlePopupData')
      // this.centerDialogVisible = false
    },
  // 脚部取消按钮
    Cancel () {
      this.$emit('resetPopupData')
    },
  // 脚部确定按钮
    Save () {
      this.$emit('submitPopupData')
    }
  }
}
</script>

<style lang="scss">
</style>

2.2 使用封装方法

1. 注册

import publicDialog form '../public-dialog'
components: { publicDialog }

2. 使用

<public-dialog :centerDialogVisible="centerDialog"
:dialogTitle="'标题'"
@resetPopupData="centerDialog = false" @updateVisible="centerDialog = false" @submitPopupData="centerDialog = false" >
  <div class="info">
  // 内容
  </div>
</public-dialog>