调用方法：

this.$Result.init({
                title:"标题",
                subTitle:"副标题",
                type:'success',
                append:"内容补充",
                btns:[
                    {
                        name:"确定",
                        type:'info',
                        onClick:()=>{
                            this.$Result.destroy()
                        }
                    },
                    {
                        name:"警告",
                        type:'success',
                        onClick:()=>{
                            
                        }
                    },
                    {
                        name:"错误",
                        type:'primary',
                        onClick:()=>{
                            
                        }
                    },
                ]
                });

步骤一：

创建模板 result.vue

<template>
<div class="result">
    <div class="resultMask"></div>
    <div class="resultContent">
        <div class="center">
            <Icon type="ios-checkmark-circle" v-if="params.type=='success'" style="color:#19be6b" size="80"/>
            <Icon type="ios-close-circle" v-if="params.type=='error'" style="color:#ed4014" size="80"/>
        </div>
        <div class="center title"  v-if="params.title">
            <span v-html="params.title"></span>
        </div>
        <div class="center subTitle" v-if="params.subTitle">
            <span v-html="params.subTitle"></span>
        </div>
        <div class="center" v-if="params.append">
            <span class="append" v-html="params.append"></span>
        </div>
         <div class="center btnCon" >
            <Button :type="item.type" :key="index" v-for="(item,index) in params.btns" @click="btnClick(index)">{{item.name}}</Button>
        </div>
     </div>
</div>
</template>

<script>
import { Icon,Button } from 'view-design';
export default {
    name: "Result",
    components:{
        Icon,
        Button
    },
    data() {
        return {
            params: {
                
            }
        }
    },
    methods: {
        btnClick(index){
            this.params.btns[index].onClick();
        },
        add (params) {
            this.params = params;
        },
    }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
.btnCon button{
    margin-right:10px;
}
.resultMask{
     position:fixed;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    z-index:99999 ;
    background: rgba(0,0,0,0.5);
}
.resultContent{
    position:fixed;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    width:500px;
    background: white;
    z-index: 999999;
    border:2px solid #f8f8f9;
    padding:20px;
}
.center{
    text-align: center;
    padding-top:10px;
}
.title{
    color:#17233d;
    font-size:24px;
}
.subTitle{
    color:#808695;
    font-size:14px;
}
.append{
    display:inline-block;
    padding:20px;
    background: #f8f8f9;
    border-radius: 10px;
    color:#515a6e;
    font-size:14px;
}
</style>

步骤二：

创建    实例    instance.js

import Result from './result.vue';
import Vue from 'vue';
Result.newInstance = properties => {
    const _props = properties || {}
    const div = document.createElement('div')
    document.body.appendChild(div)
    const result = new Vue({
        el: div,
        render: h => h(Result)
    }).$children[0]
    _props.remove = function() {
        document.body.removeChild(result.$el)
    }
    result.add(_props)
    return {
        component: result,
        destroy() {
            document.body.removeChild(result.$el)
        },
    }
}
export default Result

步骤三：

对外暴露方法

创建 index.js

import Result from './instance'
let instance

function getInstance(opt) {
    instance = Result.newInstance(opt)
    return instance
}

export default {
    init(opt) {
        getInstance(opt)
    },
    destroy() {
        instance.destroy()
        instance = null
    }
}

步骤四：

在main.js 中引入

import Result from './implicitComponents/Result/index';
Vue.prototype.$Result = Result;