uniapp如何自定义 showToast 的样式

在uniapp中，可以使用uni.showToast()方法来显示一个toast提示框，但是它的样式是默认的，如果需要自定义样式，可以通过在App.vue中注册一个全局组件来实现。

具体步骤如下：

1. 在App.vue中注册一个全局组件，例如Toast。

<template>
  <div class="toast-container" :class="{'show': visible}">
    <div class="toast" :class="[type]">
      {{ message }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      message: '',
      type: ''
    }
  },
  methods: {
    show(options) {
      this.message = options.message || ''
      this.type = options.type || ''
      this.visible = true

      setTimeout(() => {
        this.visible = false
      }, options.duration || 2000)
    }
  }
}
</script>

<style scoped>
.toast-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.toast {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 4px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  background-color: rgba(0, 0, 0, 0.7);
}

.toast.success {
  background-color: #52c41a;
}

.toast.warning {
  background-color: #faad14;
}

.toast.error {
  background-color: #f5222d;
}

.toast.show {
  opacity: 1;
  transition: opacity 0.3s;
}

.toast.hide {
  opacity: 0;
  transition: opacity 0.3s;
}
</style>

2. 在需要显示toast的页面中，通过this.$refs.toast.show()方法来调用Toast组件。

<template>
  <view>
    <button @click="showToast">显示toast</button>
  </view>
</template>

<script>
export default {
  methods: {
    showToast() {
      this.$refs.toast.show({
        message: '这是一个toast提示',
        type: 'success', // success/warning/error
        duration: 3000 // 可选，单位为毫秒，默认为2000
      })
    }
  }
}
</script>

<style>
</style>

以上就是在uniapp中自定义toast提示框样式的方法。