更新记录

1.0.0（2023-05-03） 下载此版本

完成

平台兼容性

uni.scss(按项目实际颜色)

$uni-color-primary: #007aff;
$uni-color-success: #4cd964;
$uni-color-warning: #f0ad4e;
$uni-color-error: #dd524d;
$uni-color-info: #909399; //默认色
$uni-color-disabled: #c0c4cc; //禁止色
$uni-color-default: #dcdfe6; 

依赖yll1024335892-ayi-icon组件

yll1024335892-ayi-icon

Toast 吐司提示

方法

Options 有效值

示例

使用 ref 获取组件实例

基础用法

<template>
    <view class="demo">
        <ayi-toast ref="Toast"></ayi-toast>
        <ayi-button @tap="open">提示</ayi-button>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    const Toast = ref();

    function open() {
        Toast.value?.open({
            message: "Toast 提示"
        });
    }
</script>

不同位置

配置 position 参数：

<template>
    <view class="demo">
        <ayi-toast ref="Toast"></ayi-toast>
        <ayi-button @tap="open">提示</ayi-button>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    const Toast = ref();

    function open() {
        Toast.value?.open({
            message: "Toast 提示",
            position: "top" // top middle bottom
        });
    }
</script>

不同类型

配置 type 参数：

<template>
    <view class="demo">
        <ayi-toast ref="Toast"></ayi-toast>
        <ayi-button @tap="open">提示</ayi-button>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    const Toast = ref();

    function open() {
        Toast.value?.open({
            message: "Toast 提示",
            type: "primary" // warning error info success
        });
    }
</script>

其他

<template>
    <view class="demo">
        <ayi-toast ref="Toast"></ayi-toast>
        <ayi-button @tap="open">图标</ayi-button>
        <ayi-button @tap="open2">图片</ayi-button>
    </view>
</template>

<script lang="ts" setup>
    import { ref } from "vue";
    const Toast = ref();

    function open() {
        Toast.value?.open({
            message: "Toast 提示",
            icon: "good-fill" //为ayi-icon的图标值
        });
    }

    function open2() {
        Toast.value?.open({
            message: "Toast 提示",
            image: {
                url: "/static/avatar.png",
                style: {
                    height: "120rpx",
                    width: "120rpx"
                }
            }
        });
    }
</script>