自定义showToast

<template>
  <view class="toast" v-if="visible">
    <view class="toast-content">
      <view v-if="r_icon" class="toast-icon">
        <icon :type="r_icon" color="white" size="40"/>
      </view>
      <view :class="r_icon ? 'toast-text-content' : ''">
        <text class="toast-text">{{ r_message }}</text>
      </view>
    </view>
  </view>
</template>
<script setup>
import {ref} from 'vue'

const icons = {
  success: 'success_no_circle',
  info: 'info',
  warn: 'warn',
  waiting: 'waiting',
  error: 'cancel',
  download: 'download',
  search: 'search',
  clear: 'clear',
  none: ''
}

const r_icon = ref('')
const visible = ref(false)
const r_message = ref('')
const showToast = (info) => {
  const {icon = 'none', title = '', duration = 2000} = info
  visible.value = true
  r_message.value = title
  r_icon.value = icons[icon]
  setTimeout(() => {
    visible.value = false
  }, duration)
}

defineExpose({
  showToast
})
</script>
<style scoped lang="scss">
.toast {
  left: 50%;
  top: 50%;
  padding: 20rpx;
  position: fixed;
  transform: translate(-50%, -50%);
  background-color: rgba(87, 87, 87, 0.9);
  box-shadow: 0 4px 8px rgba(0.1, 0.1, 0.1, 0.1);
  color: white;
  border-radius: 10rpx;
  z-index: 9999;

  .toast-content {
    display: block;
    align-items: center;
    justify-content: center;
    text-align: center;
    word-wrap: break-word;
    white-space: normal;
    max-width: 300rpx;


    .toast-text {
      white-space: normal;
      font-size: 26rpx;
      text-align: center;
    }

    .toast-text-content {
      margin-bottom: 20rpx;
    }

    .toast-icon {
      margin: 10rpx 0;
    }
  }
}
</style>

<template>
  <view>
    <button @click="toast">showToast</button>
  </view>
  <CustomToast ref="customToast"/>
</template>
<script setup>
import {ref} from 'vue'

const customToast = ref()
const toast = () => {
  return customToast.value.showToast({title: 'showToast~'})
}
</script>