Toast

常用于主动操作后的反馈提示，

TIP

若点击按钮无显示，需要设置

.w-toast {
    z-index: 30;
}

设置弹出位置

浏览

代码

<div>
  <w-button @click="$toast('点击弹出提示')" border>顶部弹出</w-button>
  <w-button @click="$toast('点击弹出提示', {position:'middle'})" border
    >中间弹出</w-button
  >
  <w-button @click="$toast('点击弹出提示', {position:'bottom'})" border
    >底部弹出</w-button
  >
</div>

自动或手动关闭

浏览

代码

methods: {
    onClickButton () {
        this.$toast('我会在 3 秒后自动关闭', {
            autoClose: 3,
        })
    }
}

<div>
  <w-button @click="onClickButton" border>顶部弹出</w-button>
</div>

TIP

autoClsoe 取值为 false（手动关闭）或数字（几秒后自动关闭，默认为 5）

设置关闭按钮

浏览

代码

methods: {
    onClickButton () {
        this.$toast('你知道我在等你吗？', {
            closeButton: {
                text: '知道了',
                callback: () => {
                    console.log('他说知道了')
                }
            }
        })
    }
}

<div>
  <w-button @click="onClickButton" border>顶部弹出</w-button>
</div>

支持 HTML

toast 支持传入 HTML 片段

浏览

代码

methods: {
    onClickButton() {
        this.$toast('<span style="color:red">我会是红色的</span>', {
            enableHTML: true
        })
    }
}

<div>
  <w-button @click="onClickButton" border>顶部弹出</w-button>
</div>

WARNING

虽然 toast 支持传入 HTML 片段，但是在网站上动态渲染任意 HTML 是非常危险的，因为容易导致 XSS 攻击。因此在使用时，请确保 toast 的内容是可信的，永远不要将用户提交的内容赋值给 toast 属性