index.js
import Vue from 'vue' import tip from './tip.vue' const Constructor = Vue.extend(tip); const Tip = (options={})=>{ options.showAlert = options.fn//传来的fn给options,赋值data const vm = new Constructor({ data:options }) vm.$mount() document.body.appendChild(vm.$el) vm.visible = true return vm } export default Tip
tip.vue
<template> <div class="tip-0"> <div class="tip" v-show="visible" @click="tipHide()">{{message}}</div> </div> </template> <script> export default { data(){ return{ visible:true, message:9999, showAlert:null//接收传来的fn } }, methods:{ tipHide(){ this.showAlert() this.visible = false; } } } </script>
使用
<button @click="showTip()">tip</button> import Tip from './components/tip' showTip(){ Tip({ message:2222, fn: () => { alert('关闭了') } }) },