vue-toasted中如何改变toast消息的位置？答案

【问题标题】：How to change the position of toast message in vue-toasted?vue-toasted中如何改变toast消息的位置？
【发布时间】：2018-09-01 02:15:18
【问题描述】：

我使用vue-toasted。我在main.js 中注册了vue-toasted 并使用如下：

import Toasted from 'vue-toasted'

Vue.use(Toasted, Option)

并在 vue 组件中像这样使用它

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

但我不知道如何更改烤消息的位置。当前位置是'top-right'。我该如何更改？

【问题讨论】：

当个人表明他们也在努力解决自己的问题时，通常最好在 SO 上收到问题。展示这一点的部分方法是花几秒钟来正确格式化和校对你的问题。我建议查看How to Ask。

标签： javascript vue.js vuejs2 vue-component vue-toasted

【解决方案1】：

只需点击您提供的链接，显然您可以使用容器位置设置更改位置。

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

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

Position String 'top-right' 位置吐司容器的 ['top-right', 'top-center', 'top-left', '右下'、'中下'、'左下']

【讨论】：

【解决方案2】：

我找到了一种改变烤味精位置的方法。

这就是我找到的方式

如果你想在 error 或 show 方法中使用 Options，你不要把选项值放在 Vue.use() 中。

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

希望对大家有帮助

【讨论】：

【解决方案3】：

可以参考demohere

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

【讨论】：

【解决方案4】：

您实际上还没有在 main.js 中设置选项

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

【讨论】：