# 弹出提示 - 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
选项接收一个对象。对象包括 text
与 callback
属性。用于设定按钮的文本与回调。
# 4、enableHtml
Toast
组件还支持 HTML
语法,该功能默认关闭,你需要传递一个 enableHTML
参数来开启它, enableHtml:true
。 开启后就可以在 Toast
内容区域写 HTML
语法。
# 5、position
可以设定 Toast
弹出的位置 ,支持 top
, middle
, bottom
三个值。