如何利用uni-app实现全局toast效果

2023-12-06 21:43:13

前言

在移动端开发中，toast作为一种常见的提示组件，可以帮助开发者快速向用户传递信息。在uni-app中，官方提供的toast组件样式单一，很多时候不满足业务需求。因此，本文将介绍如何在uni-app中实现一个自定义toast组件，并在全局使用它，帮助开发者快速开发出更加人性化的移动端应用。

准备工作

在开始之前，我们需要确保已经安装了uni-app开发环境，并创建一个新的项目。此外，还需要安装一些必要的依赖包，例如vuex、@vant/weapp等。具体安装命令如下：

npm install uni-app -g
npx create-uniapp-project my-app
cd my-app
npm install vuex @vant/weapp

创建自定义toast组件

首先，我们需要创建一个自定义toast组件。可以在components目录下创建一个新的文件，例如toast.vue，并写入以下代码：

<template>
  <div class="toast" :class="{'toast--show': show}">
    <div class="toast__content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Toast',
  props: {
    show: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.toast {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  border-radius: 4px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  z-index: 9999;
}

.toast--show {
  opacity: 1;
}

.toast__content {
  max-width: 280px;
}
</style>

这个组件很简单，它是一个简单的div元素，里面有一个插槽用于显示内容。当show属性为true时，组件将显示，否则将隐藏。

在全局使用自定义toast组件

接下来，我们需要在全局使用这个自定义toast组件。可以在main.js文件中导入这个组件，并将其注册为全局组件，代码如下：

import Toast from './components/toast.vue'

Vue.component('Toast', Toast)

现在，就可以在任何地方使用这个toast组件了。例如，可以在需要显示toast的地方写入以下代码：

<template>
  <div>
    <button @click="showToast">显示Toast</button>
    <Toast ref="toast">
      这是一条提示信息
    </Toast>
  </div>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$refs.toast.show = true
      setTimeout(() => {
        this.$refs.toast.show = false
      }, 2000)
    }
  }
}
</script>