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

时间:2018-03-22 15:07:08

标签: javascript vue.js vuejs2 vue-component

我使用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'。我该如何改变?

4 个答案:

答案 0 :(得分:0)

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

Container Position

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

  

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

     

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

答案 1 :(得分:0)

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

这是我找到的方式

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

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

我希望这对你们有帮助

答案 2 :(得分:0)

您可以参考演示here

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

答案 3 :(得分:0)

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

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