如何修改vue-toasted中toast提示消息的显示位置？

Hey there! Glad to help you tweak the position of your vue-toasted notifications. You’ve got two straightforward options here—setting a global default position for all toasts, or overriding the position for individual toast calls. Let’s walk through both:

1. Set a Global Default Position #

Since you already registered vue-toasted in main.js, you can update the global options object to include your preferred position. This will apply to every toast you trigger unless you override it later.

Here’s how to modify your existing registration code:

import Toasted from 'vue-toasted'
Vue.use(Toasted, {
  position: 'bottom-center', // Replace with your desired position
  // Keep any other existing global options here
})

vue-toasted supports these position values:

• top-left
• top-center
• top-right (your current setting)
• bottom-left
• bottom-center
• bottom-right

2. Override Position for Individual Toasts #

If you only want a specific toast to use a different position (instead of changing all of them), you can pass the position directly when calling the toast method.

Update your component call like this:

this.$toasted.error("Temperature too Hot", {
  position: 'bottom-left' // Custom position for this toast only
}).goAway(5000)

That’s it! Pick the approach that fits your use case best—global defaults keep things consistent, while individual overrides let you handle edge cases easily.

内容的提问来源于stack exchange，提问作者Gil