更新记录

1.0.0（2024-10-31） 下载此版本

提交

平台兼容性

lui-notify

notify 提示组件

使用方法

一、组件抛出open 和 close 两个方法，通过ref 的方式进行访问 open 函数接收一下参数，参数均可选

    interface OpenParam {
        title?: string     // 显示的内容
        type?: 'default' | 'success' | 'warn' | 'error' | 'info' // 显示的样式，具体看下方的示例图片
        color?: string          // 自定义背景颜色
        duration?: number       // 延时关闭，值为毫秒，传入0不自动关闭
        style?: any                 // 自定义样式
        align?: string          // 同text-align
    }
    // 如
    notifyRef.value.open({title: '默认提示'})

二、自定义显示内容，通过open 方式进行显示

    <template>
        <view style="margin-top: 200px;">
            <lui-notify ref="notifyRef">
                <template #default>
                    这是自定义内容
                </template>
            </lui-notify>
            <button type="info" @click="showTips">信息</button>
        </view>
    </template>
    <script lang="ts" setup>
        import { ref } from 'vue'
        const notifyRef = ref()
        const showTips = () => {
            notifyRef.value.open()
        }
    </script>

使用示例

<template>
    <view style="margin-top: 200px;">
        <lui-notify ref="notifyRef"></lui-notify>
        <button type="default" @click="showTips">默认</button>
        <button type="error" @click="errorTips('error')">错误</button>
        <button type="warn" @click="errorTips('warn')">警告</button>
        <button type="success" @click="errorTips('success')">成功</button>
        <button type="info" @click="errorTips('info')">信息</button>
    </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const notifyRef = ref()

const showTips = () => {
    notifyRef.value.open({title: '这是一段信息这是一段信息这是一段信息这是一段信息这是一段信息这是一段信息这是一段信息这是一段信息'})
}
const errorTips = (type) => {
    const titleMap = {
        error: '错误',
        warn: '警告',
        success: '成功',
        info: '信息'
    }
    notifyRef.value.open({title: titleMap[type] + '提示', type, align: 'center'})
}
</script>

<style lang="scss" scoped>
    button{
        margin-bottom: 20px;
        color: #ffffff;
        &[type='default']{
            background-color: #409EFF;
        }
        &[type='warn']{
            background-color: #E6A23C;
        }
        &[type='success']{
            background-color: #67C23A;
        }
        &[type='info']{
            background-color: #909399;
        }
        &[type='error']{
            background-color: #F56C6C;
        }
    }
</style>