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

绝地灬酷狼 2022-09-10 12:19 24阅读 0赞

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

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

## 第一种方法 ##

**弊端：  
弹窗插件点击确定会默认调取弹窗右上角关闭事件，所以有时候关闭方法中的内容会替换确定方法中的内容，导致确定方法中调取接口时数据错误**  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASnVsaWV0X3htag_size_20_color_FFFFFF_t_70_g_se_x_16]  
点击确定时如果有关闭弹窗的操作，就会默认出发右上角关闭按钮所绑定事件

### 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 form '../public-dialog'
    components: {  publicDialog }

1.  使用

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

1.  使用

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

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBASnVsaWV0X3htag_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/42addc75e6504510a7881d5dacbd1aea.png