Confirm usage and description of commonly used vue components

<!--
 *
 * Confirm dialog box
 * 
 * How to use：
 * <dialogConfirm :show-dialog="showDialog" :ok-text="'delete'" :cancel-text="'Cancel'" :content="'content'" v-on:confirm="confirmFn" v-on:cancel="cancelFn" :hide-confirm="false"></dialogConfirm>
 *
 * show-dialog: Whether to display the dialog box，Boolean value  
 * ok-text: Confirm button text，Default is‘good'
  * cancel-text: Cancel button text, default is 'Cancel'
 * hideConfirm: Whether to hide the delete button
 * hideCancle Whether to hide the Cancel button
 * content: Dialog text 
 * confirmFn: OK button callback
 * cancelFn: Cancel button callback
 -->
 
<template>
    <div class="dialog" v-if="showDialog">
        <transition name="dialog-fade">
            <div class="dialog-bg" v-if="showDialog" @click="confirmHide"></div>
        </transition>
 
        <transition name="dialog-show">
            <div class="dialog-box" v-if="showDialog">
                <div class="dialog-main" v-html="content"></div>
                <div class="dialog-button">
                    <div class="dialog-confirm-cancel" @click="clickCancel" v-if="!hideCancle">{{cancelText || 'Cancel'}}</div>
                    <div class="dialog-confirm-button" @click="clickConfirm" v-if="!hideConfirm">{{okText || 'good'}}</div>
                </div>
            </div>
        </transition>
    </div>
</template>
 

<script>
    export default{
        data(){
            return{}
        },
        props: ['showDialog','content','okText','cancelText','hideConfirm','hideCancle'],
        methods: {
            clickCancel() {
                this.$emit('cancel');
            },
            clickConfirm() {
                this.$emit('confirm');
            },
            confirmHide(){
                this.$emit('confirmhide')
            }
        }
    }
</script>

<style lang="sass" rel="stylesheet/scss">
 
.dialog {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    z-index: 100;
    
    &-bg {
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,.4);
    }
 
    &-box {
        width: 5.6rem;
        position: absolute;
        top: 40%;
        left: 50%;
        -webkit-transform: translate3d(-50%,-50%,0);
        transform: translate3d(-50%,-50%,0);
        background-color: #fff;
        border-radius: .1rem;
        line-height: 1.5;
        text-align: center;
    }
    &-main {
        padding: .42rem .38rem .4rem;
        text-align: left;
        font-size: .28rem;
        color:#333;
    }
    &-button { 
        overflow: hidden;
        border-top: 1px solid #EEE;
        font-size: .32rem;
        line-height: .88rem;
        display: flex;
    }
 
    &-confirm {
        &-cancel {
            color: #3ba3f2;
            flex:1;
            border-right: 1px solid #EEE;
            margin-right: -1px;
        }
        &-button {
            flex:1;
            color: #3ba3f2;
        }
    }
 
    .dialog-show-enter-active, .dialog-fade-enter-active {
        transition: all .3s ease;
    }
    .dialog-show-leave-active, .dialog-fade-leave-active {
        transition: all .3s ease;
    }
    .dialog-show-enter, .dialog-show-leave-active {
        top: -35%;
    }
    .dialog-fade-enter, .dialog-fade-leave-active {
        opacity: 0;
    }
}
     
</style>

<template>
  <div class="quit_box" v-show="visible">
    <div class="topBox">
      <span class="tip">hint</span>
    </div>
    <div class="quit_title">{{message}}</div>
    <button class="cancel_btn" @click="leftClick">Cancel</button>
    <button class="confirm_btn" @click="rightClick">confirm</button>
  </div>
</template>

<script>
export default {
  name: "mmtoast",
  data() {
    return {
      visible: false,
      message:''
    };
  },
  methods: {
    leftClick() {
    },
    rightClick() {
    },
  },
};
</script>

import MmToast from './'
 
let instance
let showToast = false
const mmToast = {
    install(Vue, options = {}) {
        let opt = () // Get the default configuration in the component        (opt, options) // Merge the configuration and finally return opt as an object        .$mmToast = (message) => {
            return new Promise((resolve, reject) => {
                if (message) {
                     = message // If there is a message passed, use the message passed                }
                /*
 Solve how to put the template in toast into the body, and you can use the el attribute at this time.
 However, if it is useless to directly assign the el property in the toast component to the body when installing the plug-in, and toast has not been rendered yet, then how to solve it
                                                                                                                                                                          
 Create a component object, then mount the object to a div, and then assign the content to the body, and make the constructed object to the prototype.
 */
                let TempToastConstructor = (MmToast) // Create a TempToastConstructor component 
                instance = new TempToastConstructor({
                    data: opt
                })
                 = instance.$mount()
                //Not mounted to any document, the template will be rendered as an element outside the document, and you must insert it into the document using the native DOM API.  This method returns the instance itself.                // ( === instance) // The output is true                (.$el)//el corresponds to the dom element of the component                 = showToast = true
 
 
                 = function () {
                    resolve()
                     = showToast = false
                }
 
                 = function () {
                    reject()
                     = showToast = false
                }
 
            })
        }
    }
}
export default mmToast

import mmToast from '../src/components/mmtoast/'
(mmToast)

   this.$mmToast("This operation will permanently delete the file, will it continue?")
        .then(() => {
           = [];
          ("placeHistory", null);
          ("Delete successfully!");
        })
        .catch(() => {
          ("Undelete");
        });