Alert 提示 ​

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" />
</template>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" />
</template>

<template>
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="success"
    effect="light"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="warning"
    effect="light"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="error"
    effect="light"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="info"
    effect="light"
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="success"
    effect="light"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="warning"
    effect="light"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="error"
    effect="light"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="info"
    effect="light"
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" effect="outset" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" effect="inset" />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    effect="dark"
    type="success"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    effect="light"
    type="success"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    effect="plain"
    type="success"
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" effect="outset" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" effect="inset" />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    effect="dark"
    type="success"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    effect="light"
    type="success"
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    effect="plain"
    type="success"
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" :closable="false" />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    close-text="关闭"
    @close="close"
  />
</template>

<script lang="ts" setup>
const close = () => {
  console.log('close');
};
</script>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" :closable="false" />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    close-text="关闭"
    @close="close"
  />
</template>

<script lang="ts" setup>
const close = () => {
  console.log('close');
};
</script>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="success"
    effect="light"
    showIcon
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="warning"
    effect="light"
    showIcon
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="error"
    effect="light"
    showIcon
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="info"
    effect="light"
    showIcon
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="success"
    effect="light"
    showIcon
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="warning"
    effect="light"
    showIcon
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="error"
    effect="light"
    showIcon
  />
  <tu-alert
    title="渭城朝雨浥轻尘，客舍青青柳色新。"
    type="info"
    effect="light"
    showIcon
  />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert
    title="送元二使归西"
    description="渭城朝雨浥轻尘，客舍青青柳色新。"
  />
  <tu-alert title="送元二使归西">
    <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
    <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
  </tu-alert>
</template>

<template>
  <tu-alert
    title="送元二使归西"
    description="渭城朝雨浥轻尘，客舍青青柳色新。"
  />
  <tu-alert title="送元二使归西">
    <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
    <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="送元二使归西" type="success" effect="light" showIcon>
    <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
    <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="送元二使归西" type="success" effect="light" showIcon>
    <p style="line-height: 1">渭城朝雨浥轻尘，客舍青青柳色新。</p>
    <p style="line-height: 1">劝君更尽一杯酒，西出阳关无故人。</p>
  </tu-alert>
</template>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" size="mini" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" size="small" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" size="large" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>

<template>
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" size="mini" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" size="small" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" />
  <tu-alert title="渭城朝雨浥轻尘，客舍青青柳色新。" size="large" />
</template>

<style>
.tu-alert:not(:last-child) {
  margin-bottom: 20px;
}
</style>