baiyuchengpin/components/custom-toast.vue

<template>
  <view class="custom-toast" v-if="visible">
    {{ message }}
  </view>
</template>

<script>
export default {
  name:'CustomToast',
  data() {
    return {
      visible: false,
      message: '',
      duration: 1500,
      fontSize: '16px' // 可配置字体大小
    };
  },
  methods: {
    show(options) {
      this.message = options.title || '';
      this.duration = options.duration || 1500;
      this.fontSize = options.fontSize || '16px';
      this.visible = true;
      setTimeout(() => {
        this.visible = false;
      }, this.duration);
    }
  }
};
</script>

<style>
.custom-toast {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  border-radius: 4px;
  font-size: 16px; /* 默认字体大小 */
  z-index: 9999;
}
</style>