Alert 警告提示

头像组件

基础用法

基础用法

徐然

<template>
    <LiRow style="width: 600px;display: flex;" :gutter="50">
        <LiCol>
            <LiAlert>徐然</LiAlert>
        </LiCol>
    </LiRow>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

类型

使用type属性

徐然

徐然

徐然

徐然

徐然

徐然

<template>
    <LiRow style="width: 600px;display: flex;" :gutter="50">
        <LiCol>
            <LiAlert>徐然</LiAlert>
        </LiCol>
        <LiCol>
            <LiAlert type="primary">徐然</LiAlert>
        </LiCol>
        <LiCol>
            <LiAlert type="danger">徐然</LiAlert>
        </LiCol>
        <LiCol>
            <LiAlert type="success">徐然</LiAlert>
        </LiCol>
        <LiCol>
            <LiAlert type="info">徐然</LiAlert>
        </LiCol>
        <LiCol>
            <LiAlert type="warning">徐然</LiAlert>
        </LiCol>
    </LiRow>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

关闭按钮

使用closable属性

徐然

<template>
    <LiRow style="width: 600px;display: flex;" :gutter="50">
        <LiCol>
            <LiAlert closable>徐然</LiAlert>
        </LiCol>
    </LiRow>
</template>
<script setup lang="ts">

</script>
<style scope lang="scss"></style>

关闭事件

使用on-close属性

徐然

<template>
    <LiRow style="width: 600px;display: flex;" :gutter="50">
        <LiCol>
            <LiAlert closable @on-close="handleClose">徐然</LiAlert>
        </LiCol>
    </LiRow>
</template>
<script setup lang="ts">
    const handleClose = () => {
        alert("关闭")
    }
</script>
<style scope lang="scss"></style>

alert Attributes

参数	说明	类型	可选值	默认值
type	类型	string	default / primary / success / warning / info / danger	default
closable	显示关闭按钮	boolean

alert Events

事件	参数	说明
on-close		关闭时触发的事件