# Toast 文字提示
使用方法
# this.$toast
# 预览
# 示例代码
<x-button @click="$toast('点击弹出提示')">上方弹出</x-button>
<x-button @click="$toast('点击弹出提示', {position:'middle'})">中间弹出</x-button>
<x-button @click="$toast('点击弹出提示', {position:'bottom'})">下方弹出</x-button>
# 设置关闭按钮
# 预览
# 示例代码
<template>
<div>
<x-button @click="onClickButton">上方弹出</x-button>
</div>
</template>
<script>
export default {
methods: {
onClickButton () {
this.$toast('你知道我在等你吗?', {
closeButton: {
text: '知道了',
callback: () => {
console.log('他说知道了')
}
}
})
}
},
}
</script>
# 支持传入 HTML
# 预览
# 示例代码
<template>
<div>
<x-button @click="onClickButton">上方弹出</x-button>
</div>
</template>
<script>
export default {
methods: {
onClickButton () {
this.$toast('<strong style="color:red;">加粗的提示</strong>', {
enableHtml: true
})
}
},
}
</script>
# options
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
message | 显示内容,函数第一个参数 | String | -- | -- |
object | 函数接受的第二个参数 | String | autoClose, closeButton, enableHtml, position | -- |
position | 设置位置 | String | top、middle、bottom | middle |
autoClose | 是否自动关闭 | Boolean | true、false | true |
closeButton | 设置关闭按钮 | Object | -- | {message:'关闭', callback:undefined} |
enableHtml | 是否支持html内容 | Boolean | true、false | false |