uniapp封装toast

在 UniApp 中封装一个 Toast 组件非常简单，可以按照以下步骤进行操作：

1. 创建一个新的 .vue 文件，用于封装 Toast 组件。
2. 在该文件中，定义一个 template（模板）来展示 Toast 内容，例如：

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

3. 在该文件中，使用 props 来接收 Toast 组件的参数，例如：

<script>
export default {
  props: {
    message: String
  }
}
</script>

4. 使用 CSS 样式来美化 Toast 组件的外观，例如：

<style scoped>
.toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  padding: 10px 20px;
  background-color: rgba(0, 0, 0, 0.8);
  color: #fff;
  border-radius: 4px;
}
</style>

5. 在需要使用 Toast 的页面或组件中，引入并注册 Toast 组件。例如，在 App.vue 中注册：

<template>
  <div>
    <toast :message="toastMessage" v-if="showToast"></toast>
    <!-- 其他内容 -->
  </div>
</template>

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

export default {
  components: {
    Toast
  },
  data() {
    return {
      showToast: false,
      toastMessage: ''
    }
  },
  methods: {
    showToast(message) {
      this.toastMessage = message
      this.showToast = true
      
      // 设置一定时间后关闭 Toast
      setTimeout(() => {
        this.showToast = false
      }, 2000)
    }
  }
}
</script>

6. 在需要弹出 Toast 的地方，调用 showToast 方法，并传入相应的消息：

this.showToast('Hello, UniApp!')

这样，你就成功地封装了一个简单的 Toast 组件，在需要时可以随时调用并显示相应的提示信息。