The paper

  1. Re-encapsulate reusable popover components based on ElementUi

Create a popover component

Create an index.vue file in the BaseDialog folder SRC/Components

The code is as follows: properties can be configured as in el-Dialog

<template>
  <div class="base-dialog">
      <el-dialog 
        :title="title" 
        :visible.sync="visible"
        :width="width"
        :append-to-body="appendToBody"
      >
          <slot></slot>
          <div slot="footer" v-if="isShowFooter">
              <el-button @click="visible = false">{{cancel_name}}</el-button>
              <el-button 
                  type="primary" 
                  @click="confirmBtn"
              >{{confirm_name}}</el-button>
          </div>
      </el-dialog>
  </div>
</template>

Copy the code
<script> export default {name: 'BaseDialog', props:{title: {// title type: String, default: 'hint'}, isShow: Type: Boolean, default: false}, width:{// Popup width type: String, default: "}, cancel_name:{// Cancel button name type: String, default: 'confirm_name'}, confirm_name:{// confirm button name type: String, default: 'confirm_name'}, isShowFooter:{// Confirm bottom type: Boolean, default: true}, appendToBody: {// Whether to insert itself into the body element with nested popover must be set to type: Boolean, default: false } }, data() { return { }; }, computed: { visible: { get(){ return this.isShow }, set(val){ this.$emit("update:isShow", false) } } }, methods: {confirmBtn () {/ / trigger to save this. $emit (' handleClick)},}, created () {}, mounted () {},}; </script>Copy the code
<style scoped lang="scss"> ::v-deep .el-dialog{ .el-dialog__header{ box-shadow: 0px 0px 5px 0px Rgba (136, 152, 157, 0.3); border-radius: 6px 6px 0px 0px; padding: 20px 20px 18px 25px; .el-dialog__title{ color: #212121; font-weight: 16px; } } .el-dialog__body{ padding-left: 25px; } } </style>Copy the code

Begin to use

Basically used in the parent component

<template> <div class="dialog-test"> <el-button type="primary" @click="showDialog"> </el-button> <base-dialog </div> </base-dialog> </div> </template> <script> export default { name: 'DialogTest', components: { BaseDialog: ()=> import('@/components/BaseDialog'), // import popup}, data(){return{isShow: False,}}, watch:{isShow(newValue){if(newValue == false){this.reset()}}, Methods :{showDialog(){this.isshow = true}, handleSave(){// Click save button}, reset(){}} </script>Copy the code