::v-deep .el-dialog {
    border-radius: $border-radius;
    box-shadow: 0 0 2px 0 #b4b9c3;
}
::v-deep .el-dialog__header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    padding: 0;
    border-top-left-radius: $border-radius;
    border-top-right-radius: $border-radius;
    font-size: $text-sm;
    font-weight: 500;
    color: $secondary;
    background-color: $color-title-dialog;
}
::v-deep .el-dialog__body {
    margin-top: 16px;
    padding: 8px 24px;
    color: #4e4e4e;
}
::v-deep .el-dialog__footer {
    display: flex;
    justify-content: center;
    padding: 16px 24px 24px;
}

/* VModal.vue */

<template>
  <vue-final-modal
    v-bind="$attrs"
    v-on="$listeners"
  >
    <slot>Modal content</slot>
  </vue-final-modal>
</template>

<script>
export defualt {
  name: 'VModal'
}
</script>

<style>
Modal style
</style>

<template>
  <div>
    <v-modal name="myModal" v-model="show">
      <!-- title -->
      <!-- content -->
      <!-- button -->
    </v-modal>
  </div>
</template>

<script>
export default {
  data: () => ({
    showModal: false
  }),
  mounted() 
    this.showModal = true
    // 或
    this.$vfm.show('myModal')
  }
}
</script>