使用vue的extend自定义组件开发

Posted 2022-01-09 yiyi17

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(‘关闭了‘) 
      )
    ,