vue2.0如何显示toast

要在Vue 2.0中显示Toast，可以通过以下步骤进行：1、使用第三方库、2、自定义组件。接下来，我们将详细讲解这两种方法。

一、使用第三方库

使用第三方库是实现Toast通知最简单的方法之一。以下是具体步骤：

1. 安装第三方库：例如vue-toasted
2. 在项目中引入并配置
3. 在需要的地方调用Toast方法

安装第三方库

首先，使用npm或yarn安装vue-toasted：

npm install vue-toasted --save

在项目中引入并配置

在Vue项目的主文件（如main.js）中引入并配置vue-toasted：

import Vue from 'vue';

import Toasted from 'vue-toasted';
Vue.use(Toasted, {
  duration: 5000
});

调用Toast方法

在需要显示Toast的地方调用this.$toasted.show方法：

export default {

  methods: {
    showToast() {
      this.$toasted.show('This is a toast message!', {
        type: 'success'
      });
    }
  }
}

二、自定义组件

如果你不想依赖第三方库，可以自定义一个Toast组件。以下是具体步骤：

1. 创建Toast组件
2. 在需要的地方使用并控制Toast显示

创建Toast组件

新建一个文件Toast.vue，并添加以下内容：

<template>

  <transition name="toast">
    <div v-if="visible" class="toast" :class="type">{{ message }}</div>
  </transition>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
      type: ''
    };
  },
  methods: {
    show(message, type = 'info') {
      this.message = message;
      this.type = type;
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, 3000);
    }
  }
};
</script>
<style scoped>
.toast {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  color: #fff;
  border-radius: 5px;
}
.toast.info {
  background-color: #2196F3;
}
.toast.success {
  background-color: #4CAF50;
}
.toast.error {
  background-color: #F44336;
}
.toast.enter-active, .toast-leave-active {
  transition: opacity 0.5s;
}
.toast.enter, .toast-leave-to {
  opacity: 0;
}
</style>

使用并控制Toast显示

在需要显示Toast的组件中引入并注册Toast组件：

import Toast from './Toast.vue';

export default {
  components: {
    Toast
  },
  data() {
    return {
      toast: null
    };
  },
  methods: {
    showToast(message, type) {
      this.toast.show(message, type);
    }
  },
  mounted() {
    this.toast = this.$refs.toast;
  }
};

在模板中引用Toast组件：

<template>

  <div>
    <button @click="showToast('This is a custom toast!', 'success')">Show Toast</button>
    <Toast ref="toast" />
  </div>
</template>

三、对比与选择

以下是使用第三方库与自定义组件的对比：

选择建议

• 如果你希望快速实现Toast功能，并且对定制性要求不高，推荐使用第三方库，如vue-toasted。
• 如果你有特殊的需求，或者希望完全控制Toast的样式和行为，建议自定义组件。

四、实例说明

以下是一个完整的实例，展示如何在Vue 2.0项目中使用第三方库vue-toasted：

项目结构

my-vue-app/

├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   │   └── Toast.vue
│   ├── App.vue
│   ├── main.js
├── .gitignore
├── package.json
└── README.md

代码示例

main.js

import Vue from 'vue';

import App from './App.vue';
import Toasted from 'vue-toasted';
Vue.use(Toasted, {
  duration: 5000
});
new Vue({
  render: h => h(App),
}).$mount('#app');

App.vue

<template>

  <div id="app">
    <button @click="showToast('Hello, this is a toast!')">Show Toast</button>
  </div>
</template>
<script>
export default {
  methods: {
    showToast(message) {
      this.$toasted.show(message, {
        type: 'success'
      });
    }
  }
}
</script>
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}
</style>

五、总结与建议

总结来说，在Vue 2.0中显示Toast有两种主要方法：使用第三方库和自定义组件。使用第三方库如vue-toasted更为简单快捷，适合快速开发，而自定义组件则提供了更多的定制性，适合有特殊需求的项目。

建议开发者根据项目需求和复杂度选择合适的方法。如果是新手或者项目时间紧迫，推荐使用第三方库。如果需要高度定制化的Toast效果，可以选择自定义组件。

无论选择哪种方法，都应注意Toast的使用频率和时机，避免对用户造成干扰。希望本文能帮助你在Vue 2.0项目中顺利实现Toast通知功能。

相关问答FAQs：

1. 什么是Toast？如何在Vue 2.0中显示Toast？

Toast是一种常见的用户提示组件，它以简洁的方式向用户显示短暂的通知消息。在Vue 2.0中，我们可以使用一些插件或自定义组件来实现Toast的显示。

2. 使用第三方插件显示Toast

Vue 2.0有很多第三方插件可以帮助我们快速实现Toast的显示。其中一个比较流行的插件是vue-toasted。下面是使用vue-toasted显示Toast的步骤：

步骤1：安装vue-toasted插件

npm install vue-toasted

步骤2：在Vue项目的入口文件（通常是main.js）中引入vue-toasted插件

import Vue from 'vue'
import Toasted from 'vue-toasted'

Vue.use(Toasted)

步骤3：在需要显示Toast的组件中调用vue-toasted插件的toast方法

this.$toasted.show('Hello, Toast!', {
  duration: 3000, // 持续时间为3秒
  position: 'top-right' // Toast显示在右上角
})

3. 自定义组件显示Toast

除了使用第三方插件，我们还可以根据项目需求自定义Toast组件来实现显示。下面是一个简单的自定义Toast组件的示例：

步骤1：创建一个Toast组件

<template>
  <div v-show="show" class="toast">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
      message: ''
    }
  },
  methods: {
    showToast(message, duration) {
      this.message = message
      this.show = true
      setTimeout(() => {
        this.show = false
      }, duration)
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 10px;
  background-color: #333;
  color: #fff;
}
</style>

步骤2：在需要显示Toast的组件中引入并使用Toast组件

<template>
  <div>
    <button @click="showToast">显示Toast</button>
    <Toast ref="toast"></Toast>
  </div>
</template>

<script>
import Toast from '@/components/Toast'

export default {
  components: {
    Toast
  },
  methods: {
    showToast() {
      this.$refs.toast.showToast('Hello, Toast!', 3000)
    }
  }
}
</script>

以上是两种常见的在Vue 2.0中显示Toast的方法，你可以根据项目需求选择使用第三方插件或自定义组件来实现。希望对你有所帮助！