如何在vue-toasted中更改toast消息的位置？

Question

我使用vue-toasted。我在vue-toasted中注册了main.js，并按照以下方式使用它：

import Toasted from 'vue-toasted'

Vue.use(Toasted, Option)

并在vue组件中使用它

this.$toasted.error("Temperature too Hot").goAway(5000),

但我不知道如何改变烘烤信息的位置。当前位置为'top-right'。我该如何改变？

Answer 1

只需按照您提供的链接，您就可以使用“容器位置”设置更改位置。

您也可以根据API页面设置位置。

  

下面的API选项是您可以传递以创建Toast的选项

     

位置字符串'右上'位置   吐司容器['右上'，'顶部中心'，'左上'，   '右下角'，'下中心'，'左下角']

Answer 2

我找到了改变烘烤信息位置的方法。

这是我找到的方式

如果要在error或show方法中使用Options，则不要在Vue.use（）中添加选项值。

在Vue.use中删除选项后，我可以移动msg

我希望这对你们有帮助

Answer 3

您可以参考演示here

let toast = this.$toasted.show("Toasted !!", { 
     theme: "toasted-primary", 
     position: "top-right", 
     duration : 5000
});

Answer 4

您实际上尚未在main.js中设置选项

import Toasted from 'vue-toasted';
const toastOptions = {
    position: 'top-center',
    duration : 2000,
    theme: "toasted-primary"
}
Vue.use(Toasted, toastOptions);