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

最新推荐文章于 2023-09-08 11:47:05 发布

weixin_30470857

最新推荐文章于 2023-09-08 11:47:05 发布

阅读量349

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/yiyi17/p/11025406.html

本文介绍如何使用Vue.js创建一个可复用的提示框组件，通过传递参数自定义显示内容和回调函数，实现弹出框的灵活控制。组件内部采用slot插槽和v-show指令实现内容展示和隐藏效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

转载于:https://www.cnblogs.com/yiyi17/p/11025406.html