更新记录

0.0.1（2025-04-08） 下载此版本

20250408初次提交

平台兼容性

<template>
  <view style="display: flex; flex-direction: row">
    <view class="content">
      <!--  <image class="logo" src="/static/logo.png"></image>
        <view class="text-area">
            <text class="title">{{title}}</text>
        </view> -->
      <view @click="toastTop">顶部吐司 </view>
      <view @click="toastCenter">居中吐司 </view>
      <view @click="toastBottom">底部吐司 </view>
      <view @click="toastCustom">其他自定义吐司 </view>
    </view>
  </view>
  <YfgCustomToast ref="customToast" :bottom="bottomHeight" />
</template>

<script>
import YfgCustomToast from "@/components/yfg-custom-toast/yfg-custom-toast.vue";

export default {
  components: { YfgCustomToast },

  data() {
    return {
      title: "Hello",
      bottomHeight: "0px",
      windowHeight: 0,
      safeAreaInsets: {},
    };
  },
  onReady() {
    const systemInfo = uni.getSystemInfoSync();
    this.windowHeight = systemInfo.windowHeight;
    this.safeAreaInsets = systemInfo.safeAreaInsets || {};
  },
  onLoad() {},
  methods: {
    toastTop() {
      // 顶部显示（考虑刘海屏安全区域）
      this.bottomHeight = `calc(${this.windowHeight}px - 40px - ${
        this.safeAreaInsets.top || 0
      }px)`;
      this.$refs.customToast.show("顶部吐司");
    },
    toastCenter() {
      // 垂直居中
      this.bottomHeight = "50%";
      this.$refs.customToast.show("居中吐司");
    },
    toastBottom() {
      // 底部显示（自动处理刘海屏）
      this.bottomHeight = `calc(0px + ${this.safeAreaInsets.bottom || 0}px)`;
      this.$refs.customToast.show("底部吐司");
    },
    toastCustom() {
      // 自定义位置（示例：距离底部200rpx）
      this.bottomHeight = "200rpx";
      this.$refs.customToast.show("自定义位置吐司");
    },
  },
};
</script>

<style>
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200rpx;
  width: 200rpx;
  margin-top: 200rpx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50rpx;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36rpx;
  color: #8f8f94;
}
.slderBg {
  position: absolute;
  display: flex;
  align-items: center;
  height: calc(100vh - 400rpx);
  margin-top: 400rpx;
  right: 0;
  width: 104rpx;
}
.itemSty {
  width: 104rpx;
  height: 104rpx;
}
</style>

直接引入即可

如需修改细节，可直接修改自定义view，刘海屏区域可直接使用自己项目内的进行替换