一步一个脚印，打造你的移动端项目中的toast组件：提示信息

2024-02-08 20:34:39

toast组件：是什么，有何用处？

toast组件是移动端开发中必不可少的组件之一，常被用来在页面上显示简短的提示信息。它可以广泛应用于各种场景中，比如数据加载完成时、表单验证不通过时、请求失败时，等等。

使用vue构建toast组件

我们首先要创建一个新的vue.js项目，这里我们就不再赘述了，重点在于构建组件。

创建组件

在组件文件夹下，创建一个新的组件文件，命名为toast.vue，其内容如下：

<template>
  <div class="toast" :class="{ 'toast--active': active }">
    {{ message }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: false,
      message: '',
      timeout: null
    }
  },
  methods: {
    show(message, duration = 2000) {
      this.message = message
      this.active = true

      clearTimeout(this.timeout)
      this.timeout = setTimeout(() => {
        this.active = false
      }, duration)
    }
  }
}
</script>

<style>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 12px;
  background-color: #333;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.toast--active {
  opacity: 1;
}
</style>

使用组件

在需要使用toast组件的地方，我们可以这样写：

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

<script>
import Toast from './components/Toast.vue'

export default {
  components: {
    Toast
  },
  methods: {
    showToast() {
      this.$refs.toast.show('这是一条提示信息')
    }
  }
}
</script>