Vue3 vant组件库Toast提示样式

在Vue 3中使用vant组件库的Toast组件时，如果需要自定义样式，可以通过以下方式进行：

1. 使用Toast的type属性来指定不同的图标，但这些图标是固定的。
2. 使用Toast的icon属性来使用自定义图标，可以是图片链接或者SVG。
3. 使用Toast的className属性来指定一个自定义的类名，然后在CSS中定义样式。
4. 使用Toast的customStyle属性来直接在组件上应用内联样式。

以下是一个自定义Toast样式的例子：

<template>
  <button @click="showCustomToast">显示自定义Toast</button>
</template>
 
<script setup>
import { Toast } from 'vant';
 
const showCustomToast = () => {
  Toast({
    message: '自定义Toast',
    icon: 'https://example.com/custom-icon.png', // 自定义图标链接
    className: 'my-custom-toast', // 自定义类名
    customStyle: {
      color: '#fff', // 文本颜色
      background: 'rgba(0, 0, 0, 0.7)', // 背景颜色
      borderRadius: '5px', // 边框圆角
      padding: '10px', // 内边距
    }
  });
};
</script>
 
<style>
/* 自定义Toast样式 */
.my-custom-toast {
  color: #fff;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 5px;
  padding: 10px;
  /* 其他自定义样式 */
}
</style>

在这个例子中，我们创建了一个按钮，点击后会显示一个自定义样式的Toast。我们使用了icon属性来设置自定义图标，className属性来指定一个自定义的类名，并在customStyle属性中直接设置了样式。在CSS中，我们定义了.my-custom-toast类来应用这些样式。