vue 创建隐式组件 结果提示组件

POOPE

　　调用方法：

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;