vue使用Vue.extend建立全域性toast元件範例

<template>
  <transition name="fades">
    <div class="Errormes"  v-if="show">{{txt}}</div>
  </transition>
</template>
 
<script>
export default {
  name: 'Toast',
  data () {
    return {
      txt: '',
      show: false
    }
  }
}
</script>
<style lang="less" scoped>
.fades-enter-active, .fades-leave-active {
  transition: opacity 0.5s;
}
.fades-enter, .fades-leave-active {
  opacity: 0;
}
/* 提示彈框 */
.Errormes {
  position: fixed;
  top: 40%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 16px;
  color: #fff;
  font-size: 28px;
  z-index: 999999;
  max-width: 80%;
  height: auto;
  line-height: 60px;
  text-align: center;
}
</style>

import Toast from './toast.vue'
 
const toast = {}
toast.install = (vue) => {
  const ToastClass = vue.extend(Toast)
  const instance = new ToastClass()
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)
 
  let t = null
  const ToastMain = {
    show (msg, seconds = 2000) {
      if (t) clearTimeout(t)
      instance.txt = msg
      instance.show = true
      t = setTimeout(() => {
        instance.show = false
      }, seconds)
    }
  }
  vue.prototype.$toast = ToastMain
}
 
export default toast

import Vue from 'vue'
import App from './App.vue'
import toast from '@/components/Toast/index'
 
Vue.use(toast)

$toast.show(message)

Vue.extend( options )

<div id="mount-point"></div>
// 建立構造器
var Profile = Vue.extend({
  template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
  data: function () {
    return {
      firstName: 'Walter',
      lastName: 'White',
      alias: 'Heisenberg'
    }
  }
})
// 建立 Profile 範例，並掛載到一個元素上。
new Profile().$mount('#mount-point')

var MyComponent = Vue.extend({
 template: '<div>Hello!</div>'
})
 
// 建立並掛載到 #app (會替換 #app)
new MyComponent().$mount('#app')
 
// 同上
new MyComponent({ el: '#app' })
 
// 或者，在檔案之外渲染並且隨後掛載
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

<div id="root">
    <button @click="showLoading">顯示Loading</button>
</div>
function Loading(msg) {
        // 建立構造器
        const Loading = Vue.extend({
          template: '<div id="loading-msg">{{ msg }}</div>',
          props: {
            msg: {
              type: String,
              default: '載入中'
            }
          },
          name: 'Loading'
        })
 
        // 建立掛載div
        const div = document.createElement('div')
        div.setAttribute('id', 'loading-div')
        document.body.append(div)
 
        // 建立範例並掛載到一個元素上
        new Loading().$mount('#loading-div')
 
        // 返回一個移除元素的function
        return () => {
          document.body.removeChild(document.getElementById('loading-div'))
        }
}
 
// 掛載到vue範例上
Vue.prototype.$loading = Loading
 
 new Vue({
     el: '#root',
     methods: {
        showLoading() {
            const hide = this.$loading('正在載入，請稍等...')
            setTimeout(() => {
              hide()
            }, 1500)
        }
     }
})

<template>
  <div id="confirm" v-if='flag'>
    <div class="contents" >
      <div class="content-top">{{ text.title }}</div>
      <div class="content-center">{{ text.msg }}</div>
      <div class="content-bottom">
        <button @click='show' class="left">{{ text.btn.ok }}</button>
        <button @click='hide' class="right">{{ text.btn.no }}</button>
      </div>
    </div>
  </div>
</template>
 
<script>
 
export default {
  data () {
    return {
      flag: true,
      text: {
          title:'標題',
          msg: '這是一個資訊彈出框元件',
          btn: {
              ok: '確定',
              no: '取消'
          }
      }
    }
  },
 
  methods: {
    show (){
      this.flag = false;
    },
 
    hide() {
      this.flag = false;
    }
  }
}
 
</script>

import Vue from 'vue'
import PopBox from './popBox.vue'
 
// Vue.extend返回一個範例建立的構造器，但範例構造器需要進行掛載到頁面中
let popBox = Vue.extend(PopBox)   
 
popBox.install = (vue, text) => {
      
        // 在body中動態建立一個div元素，之後此div將會替換成整個vue檔案的內容
        // 此時的popBoxDom通俗講就是相當於是整個元件物件，通過物件呼叫屬性的方法來進行元件中資料的使用
        let popBoxDom = new popBox({
            el: document.createElement('div')
        })
 
        
        // 可以通過$el屬性來存取建立的元件範例
        document.body.appendChild(popBoxDom.$el)
 
   
        // 將需要傳入的文字內容傳給元件範例
        popBoxDom.text = text;
 
        // 返回一個promise，進行非同步操作，成功時返回，失敗時返回
        return new Promise((res, rej) => {     
            popBoxDom.show = () => {   
                res()   //正確時返回的操作
                popBoxDom.flag = false;
            }
 
            popBoxDom.hide = ()=>{
                rej()   //失敗時返回的操作
                popBoxDom.flag = false;
            }
        }
 
        vue.prototype.$popBox = popBox    
    })
}
 
// 將邏輯函數進行匯出和暴露
export default popBox

import PopBox from './popBox.js'
 
Vue.use(popBOx);
 
 
this.$popBox({
      title:'標題',
      msg:'內容',
      btn:{ ok:'確定', no:'取消'}
}).then(()=>{
      console.log('ok')
}).catch(()=>{
      console.log('no')
})

import toastCom from "./Toast";
 
const toast = {};
toast.install = vue => {
 const ToastCon = vue.extend(toastCom);
 const ins = new ToastCon();
 ins.$mount(document.createElement("div"));
 document.body.appendChild(ins.$el);
 console.log(ins.toast)
 vue.prototype.$toast = ins.toast;
};
 
 
 
const globalComponent = {
 install: function(Vue) {
   Vue.use(toast);
 }
};
 
export default globalComponent;