Vue extend實(shí)現(xiàn)alert效果 最簡單直接版本 包懂

組件

<template>
  <div class="box"
       v-if="isShow">
    <h3>{{title}}</h3>
    <p class="box-content">{{message}}</p>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: ""
    },
    message: {
      type: String,
      default: ""
    },
    duration: {
      type: Number,
      default: 2000
    }
  },
  data() {
    return {
      isShow: false
    };

  },
  methods: {
    show() {
      this.isShow = true;
      setTimeout(this.hide, this.duration);
    },
    hide() {
      this.isShow = false;
      this.remove();
    }
  }
};
</script>

<style>
.box {
  position: fixed;
  width: 100%;
  top: 16px;
  left: 0;
  text-align: center;
  pointer-events: none;
  background-color: #fff;
  border: grey 3px solid;
  box-sizing: border-box;
}
.box-content {
  width: 200px;
  margin: 10px auto;
  font-size: 14px;
  padding: 8px 16px;
  background: #fff;
  border-radius: 3px;
  margin-bottom: 8px;
}
</style>

動(dòng)態(tài)生成并綁定Vue的prototype

import Vue from 'vue';
import alert from '@/components/Notice2'

let MyAlertConstructor = Vue.extend(alert);


let instance;
const MyAlert = (option) => {
  // 創(chuàng)建實(shí)例并且過濾參數(shù)
  instance = new MyAlertConstructor({
    propsData: {
      ...option
    }
  })

  // 掛載實(shí)例
  instance.$mount();
  instance.remove = () => {
    // 刪除dom
    document.body.removeChild(instance.$el)

    // 銷毀組件
    instance.$destroy()
  }
  console.log('alert', alert, ', MyAlertConstructor', MyAlertConstructor, 'option', option, 'instance', instance, 'instance.$el', instance.$el);

  document.body.appendChild(instance.$el);
  return instance;
}
// 掛載到Vue原型上
Vue.prototype.$alert = (opts) => {
  const comp = MyAlert(opts)
  comp.show()
  return comp
};

1用extend創(chuàng)建一個(gè)子類組件
2用子類組件new出一個(gè)vue實(shí)例，額外的參數(shù)用propsData傳入
3把創(chuàng)建的實(shí)例用el就能訪問到真是dom，用document.body.append把真實(shí)dom添加到body下
5.給組件注冊(cè)remove事件，也就是remove事件的時(shí)候移除body下之前添加的dom 然后銷毀vue實(shí)例

調(diào)用

      this.$alert({
          title: '校驗(yàn)完成',
          message: '校驗(yàn)失敗，請(qǐng)重試！'
        })