# 弹出提示 - Toast

# 预览及使用方法


<div>
    <g-button @click="showToast1">top</g-button>
    <g-button @click="showToast2">middle</g-button>
    <g-button @click="showToast3">bottom</g-button>
</div>

import Vue from "vue";
import Toast from "../../../src/Toast";
import Button from "../../../src/Button";
import plugin from "../../../src/plugin";
Vue.use(plugin);
export default {
    components: {
        "g-toast": Toast,
        "g-button": Button
    },
    methods: {
        showTop() {
            this.showToast("top");
        },
        showMiddle() {
            this.showToast("middle");
        },
        showBottom() {
            this.showToast("bottom");
        },
        showToast(position) {
            this.$toast('我是 Toast 的内容!', {
                position,
                enableHtml: false,
                closeButton: {
                    text: "关闭",
                    callback() {}
                },
            autoClose: 3,
            });
        }
    }
}

# 相关提示:

# 1、showToast

该方法中的 this.$toast 接受两个参数,第一个参数为一个字符串,是 Toast 弹出提示的内容,第二个参数为一个对象,包含其他相关属性。

# 2、autoClose

此选项可以设定 Toast 自动关闭的延时。单位为“ 秒 ”,默认设置为延时 3 秒后自动关闭。

# 3、closeButton

Toast 组件的右侧按钮文本可编辑,并且支持传入一个回调。 closeButton 选项接收一个对象。对象包括 textcallback 属性。用于设定按钮的文本与回调。

# 4、enableHtml

Toast 组件还支持 HTML 语法,该功能默认关闭,你需要传递一个 enableHTML 参数来开启它, enableHtml:true 。 开启后就可以在 Toast 内容区域写 HTML 语法。

# 5、position

可以设定 Toast 弹出的位置 ,支持 top, middle, bottom 三个值。