Augmi UI

Toast

this.$toast

预览

代码

<style>
    .wrapper {
        z-index: 30;
    }
</style>
<g-button @click="$toast('点击弹出提示')">上方弹出</g-button>
<g-button @click="$toast('点击弹出提示', {position:'middle'})">中间弹出</g-button>
<g-button @click="$toast('点击弹出提示', {position:'bottom'})">下方弹出</g-button>

设置关闭按钮

预览

代码

<style>
    .wrapper {
        z-index: 30;
    }
</style>
<div>
    <g-button @click="onClickButton">上方弹出</g-button>
</div>
methods: {
    onClickButton () {
        this.$toast('你知道我在等你吗？', {
            closeButton: {
                text: '知道了',
                callback: () => {
                    console.log('他说知道了')
                }
            }
        })
    }
}

支持 HTML

预览

代码

<style>
    .wrapper {
        z-index: 30;
    }
</style>
<div>
    <g-button @click="onClickButton">上方弹出</g-button>
</div>
methods: {
    onClickButton () {
        this.$toast('你知道我在等你吗？', {
            closeButton: {
                text: '知道了',
                callback: () => {
                    console.log('他说知道了')
                }
            }
        })
    }
}

← Popover - 弹出层 →