JView UI

Appearance

Alert 组件，用于展示需要关注的信息。

基本展示 ​

通过message配置提示信息文本，也可以通过插槽定制。

我是一个 Info 提示
展开查看代码
vue
<template>
    <j-alert message="我是一个 Info 提示" />
</template>
<template>
    <j-alert message="我是一个 Info 提示" />
</template>

四种类型 ​

通过type配置提示信息类型，支持"info", "success", "warning", "error"。

我是一个 Info 提示
我是一个 Success 提示
我是一个 Warning 提示
我是一个 Error 提示
展开查看代码
vue
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" />
        <j-alert type="success" message="我是一个 Success 提示" />
        <j-alert type="warning" message="我是一个 Warning 提示" />
        <j-alert type="error" message="我是一个 Error 提示" />
    </j-space>
</template>
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" />
        <j-alert type="success" message="我是一个 Success 提示" />
        <j-alert type="warning" message="我是一个 Warning 提示" />
        <j-alert type="error" message="我是一个 Error 提示" />
    </j-space>
</template>

简单样式 ​

启用plain属性展示简单样式，无边框和圆角。可用于网站顶部 Banner 区域。

我是一个 Info 提示
我是一个 Success 提示
我是一个 Warning 提示
我是一个 Error 提示
展开查看代码
vue
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" plain />
        <j-alert type="success" message="我是一个 Success 提示" plain />
        <j-alert type="warning" message="我是一个 Warning 提示" plain />
        <j-alert type="error" message="我是一个 Error 提示" plain />
    </j-space>
</template>
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" plain />
        <j-alert type="success" message="我是一个 Success 提示" plain />
        <j-alert type="warning" message="我是一个 Warning 提示" plain />
        <j-alert type="error" message="我是一个 Error 提示" plain />
    </j-space>
</template>

可关闭 ​

通过closable控制 Alert 组件是否可关闭。

可以使用closeIcon自定义关闭图标，也可以使用文本，不局限于图标。

我是一个 Info 提示
我是一个 Success 提示
我是一个 Warning 提示
我是一个 Error 提示
我是一个 Warning 提示
我是一个 Error 提示
Close
展开查看代码
vue
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" closable />
        <j-alert type="success" message="我是一个 Success 提示" closable />
        <j-alert type="warning" message="我是一个 Warning 提示" closable />
        <j-alert type="error" message="我是一个 Error 提示" closable />
        <j-alert type="warning" message="我是一个 Warning 提示" closable>
            <template #closeIcon>
                <Delete />
            </template>
        </j-alert>
        <j-alert type="error" message="我是一个 Error 提示" closable closeIcon="Close" />
    </j-space>
</template>

<script setup>
import { Delete } from '@jview/icons'
</script>
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" closable />
        <j-alert type="success" message="我是一个 Success 提示" closable />
        <j-alert type="warning" message="我是一个 Warning 提示" closable />
        <j-alert type="error" message="我是一个 Error 提示" closable />
        <j-alert type="warning" message="我是一个 Warning 提示" closable>
            <template #closeIcon>
                <Delete />
            </template>
        </j-alert>
        <j-alert type="error" message="我是一个 Error 提示" closable closeIcon="Close" />
    </j-space>
</template>

<script setup>
import { Delete } from '@jview/icons'
</script>

辅助描述信息 ​

通过description添加辅助性的描述信息，支持插槽。

我是一个 Info 提示
这是一段描述信息，用作辅助介绍
description 也支持插槽
数据库查询慢
展开查看代码
vue
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" closable description="这是一段描述信息，用作辅助介绍" />
        <j-alert message="description 也支持插槽" type="warning" closable>
            <template #description>
                <div style="display: flex; align-items: center"><Database style="margin-right: 4px" />数据库查询慢</div>
            </template>
        </j-alert>
    </j-space>
</template>

<script lang="ts" setup>
import { Database } from '@jview/icons'
</script>
<template>
    <j-space direction="column">
        <j-alert message="我是一个 Info 提示" closable description="这是一段描述信息，用作辅助介绍" />
        <j-alert message="description 也支持插槽" type="warning" closable>
            <template #description>
                <div style="display: flex; align-items: center"><Database style="margin-right: 4px" />数据库查询慢</div>
            </template>
        </j-alert>
    </j-space>
</template>

<script lang="ts" setup>
import { Database } from '@jview/icons'
</script>

操作列 ​

通过actions插槽自定义操作列，例如使用按钮执行一些简单的操作。

新订单来了，请及时处理
新订单来了，请及时处理
这是一段描述
展开查看代码
vue
<template>
    <j-space direction="column">
        <j-alert ref="alertRef1" message="新订单来了，请及时处理" closable>
            <template #actions>
                <j-space direction="column">
                    <j-button size="small" @click="handleIgnore">忽略</j-button>
                    <j-button size="small" type="primary">处理</j-button>
                </j-space>
            </template>
        </j-alert>

        <j-alert ref="alertRef2" message="新订单来了，请及时处理" closable description="这是一段描述">
            <template #actions>
                <j-space direction="column">
                    <j-button size="small" @click="handleIgnore2">忽略</j-button>
                    <j-button size="small" type="primary">处理</j-button>
                </j-space>
            </template>
        </j-alert>
    </j-space>
</template>

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

const alertRef1 = ref()
const alertRef2 = ref()

const handleIgnore = () => {
    alertRef1.value.close()
}

const handleIgnore2 = () => {
    alertRef2.value.close()
}
</script>
<template>
    <j-space direction="column">
        <j-alert ref="alertRef1" message="新订单来了，请及时处理" closable>
            <template #actions>
                <j-space direction="column">
                    <j-button size="small" @click="handleIgnore">忽略</j-button>
                    <j-button size="small" type="primary">处理</j-button>
                </j-space>
            </template>
        </j-alert>

        <j-alert ref="alertRef2" message="新订单来了，请及时处理" closable description="这是一段描述">
            <template #actions>
                <j-space direction="column">
                    <j-button size="small" @click="handleIgnore2">忽略</j-button>
                    <j-button size="small" type="primary">处理</j-button>
                </j-space>
            </template>
        </j-alert>
    </j-space>
</template>

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

const alertRef1 = ref()
const alertRef2 = ref()

const handleIgnore = () => {
    alertRef1.value.close()
}

const handleIgnore2 = () => {
    alertRef2.value.close()
}
</script>

信息图标 ​

通过icon插槽自定义信息图标。

如果不需要展示信息图标，也可以通过:show-icon="false"隐藏图标。

今天是多云天气
我是一个 Info 提示，没有图标
展开查看代码
vue
<template>
    <j-space direction="column">
        <j-alert message="今天是多云天气">
            <template #icon>
                <Cloud />
            </template>
        </j-alert>
        <j-alert message="我是一个 Info 提示，没有图标" :show-icon="false" />
    </j-space>
</template>

<script lang="ts" setup>
import { Cloud } from '@jview/icons'
</script>
<template>
    <j-space direction="column">
        <j-alert message="今天是多云天气">
            <template #icon>
                <Cloud />
            </template>
        </j-alert>
        <j-alert message="我是一个 Info 提示，没有图标" :show-icon="false" />
    </j-space>
</template>

<script lang="ts" setup>
import { Cloud } from '@jview/icons'
</script>

属性 ​

参数说明类型默认值必填
actions自定义操作部分VNode无否
plain简单样式，无边框和圆角booleanfalse否
closable是否可关闭，默认不能关闭boolean无否
closeIcon自定义关闭按钮string | VNode无否
showIcon是否显示提示图标，默认显示booleantrue否
icon自定义提示图标VNode无否
message提示内容string | VNode无否
description提示内容的详细描述string | VNode无否
type提示类型"error" | "success" | "warning" | "info"'info'否

事件 ​

事件名说明回调类型
close点击取消() => void

方法 ​

方法名说明签名
close主动关闭 alert() => void

Copyright © 2022-2024 All Rights Reserved by Tusi.