# 标签组件


1.组件介绍

弹窗组件功能及用法如下,支持设置弹窗内容、弹窗位置、自动关闭、手动关闭、关闭回调等功能

2.使用方法

3.组件代码

    <div class="toast-wrapper" ref="wrapper">
        <z-button @click="showToast1">默认顶部弹窗</z-button>
        <z-button @click="showToast2">默认中间弹窗</z-button>
        <z-button @click="showToast3">默认底层弹窗</z-button>
        <z-button @click="showToast4">设置手动关闭</z-button>
        <z-button @click="showToast5">设置关闭回调</z-button>
    </div>
methods: {
    showToast1() {
        this.$toast(
            '出现顶部位置自动关闭',
            { position:'top', autoClose:2}, 
            this.$refs.wrapper
        )
    },
    showToast2() { 
        this.$toast(
            '出现中间位置自动关闭', 
            { position:'middle',autoClose:2 }, 
            this.$refs.wrapper
        )
    },
    showToast3() { 
        this.$toast(
            '出现底部位置自动关闭', 
            { position:'bottom',autoClose:2}, 
            this.$refs.wrapper 
        )
    },
    showToast4() {
        this.$toast('设置手动关闭按钮',
            {
                autoClose:false,
                
            },
            this.$refs.wrapper
        )
    },
    showToast5() {
        this.$toast(
            '设置手动关闭回调函数', 
            { 
                autoClose:false, 
                closeButton: { text: '关闭', callback(){ alert('弹窗被关闭了') } 
                } 
            }, 
            this.$refs.wrapper 
        )
    }
}