Alert 提示 ​

<template>
  <div class="flex gap-4">
    <div class="flex-1">
      <w-title>默认样式</w-title>
      <w-alert
        show-icon
        title="WinDesign 是一套专为医疗行业打造的标准化解决方案，遵循协同、便捷、高效的设计理念。技术上基于 Vue.js，由卫宁UED团队开发维护，拥有 80+ 组件，与医疗业务深度绑定，支持国际化项目、动态换肤和响应式设计，具备良好的文档和社区支持等，适用于快速构建医疗行业中后台系统或复杂的前端应用。"
        type="success"
      />
      <w-alert title="普通提示内容" type="info" />
      <w-alert title="警告的提示内容" type="warning" />
      <w-alert title="错误的提示内容" type="error" />
      <w-alert title="错误的提示内容" type="danger" />
      <w-alert title="主要的提示内容" type="primary" show-icon>
        <template #icon>
          <Search />
        </template>
      </w-alert>
    </div>
    <div class="flex-1">
      <w-title>通过设置 effect 属性来改变主题，默认为 light。</w-title>
      <w-alert title="成功的提示内容" type="success" effect="dark" />
      <w-alert title="普通提示内容" type="info" effect="dark" />
      <w-alert title="警告的提示内容" type="warning" effect="dark" />
      <w-alert title="错误的提示内容" type="error" effect="dark" />
      <w-alert title="主要的提示内容" type="primary" effect="dark" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@win-design-next/icons-vue'
</script>

<style scoped>
.w3-alert {
  margin: 20px 0 0;
}
.w3-alert:first-child {
  margin: 0;
}
</style>

<template>
  <div style="max-width: 600px">
    <w-alert
      title="Primary alert that appearance after 5000 milliseconds"
      type="primary"
      :show-after="5000"
      show-icon
      @open="console.log('open')"
    >
      <template #icon>
        <Search />
      </template>
    </w-alert>
    <w-alert
      title="Success alert that disappear after 5000 milliseconds"
      type="success"
      :hide-after="5000"
    />
    <w-alert
      title="Info alert that in 5000 milliseconds to be hidden"
      type="info"
      :closable="false"
      :auto-close="5000"
    />
  </div>
</template>

<script lang="ts" setup>
import { Search } from '@win-design-next/icons-vue'
</script>

<style scoped>
.w3-alert {
  margin: 20px 0 0;
}
.w3-alert:first-child {
  margin: 0;
}
</style>

<template>
  <div style="max-width: 600px">
    <w-alert title="不显示关闭按钮" type="success" :closable="false" />
    <w-alert
      title="自定义关闭按钮：文字"
      effect="dark"
      type="info"
      close-text="Gotcha"
    />
    <w-alert title="关闭触发事件" type="warning" @close="hello" />
  </div>
</template>

<script lang="ts" setup>
const hello = () => {
  // eslint-disable-next-line no-alert
  alert('Hello World!')
}
</script>

<style scoped>
.w3-alert {
  margin: 20px 0 0;
}
.w3-alert:first-child {
  margin: 0;
}
</style>

<template>
  <div style="max-width: 600px">
    <w-alert title="成功的提示内容" type="success" show-icon />
    <w-alert title="普通提示内容" type="info" show-icon />
    <w-alert title="警告的提示内容" effect="dark" type="warning" show-icon />
    <w-alert title="错误的提示内容" type="error" show-icon />
    <w-alert title="主要的提示内容" type="primary" show-icon />
  </div>
</template>

<style scoped>
.w3-alert {
  margin: 20px 0 0;
}
.w3-alert:first-child {
  margin: 0;
}
</style>

<template>
  <div style="max-width: 600px">
    <w-alert title="成功的提示内容" type="success" center show-icon />
    <w-alert title="普通提示内容" type="info" center show-icon />
    <w-alert
      title="警告的提示内容"
      effect="dark"
      type="warning"
      center
      show-icon
    />
    <w-alert title="错误的提示内容" type="error" center show-icon />
    <w-alert title="主要的提示内容" type="primary" center show-icon />
  </div>
</template>

<style scoped>
.w3-alert {
  margin: 20px 0 0;
}
.w3-alert:first-child {
  margin: 0;
}
</style>

<template>
  <div style="max-width: 600px">
    <w-alert
      title="成功的提示内容"
      type="primary"
      description="这是一段文字描述"
    />
    <w-alert
      title="成功的提示内容"
      type="success"
      description="这是一段文字描述"
      show-icon
    />
    <w-alert
      title="普通的提示内容"
      type="info"
      effect="dark"
      description="这是一段文字描述"
      show-icon
    />
    <w-alert
      title="警告的提示内容"
      type="warning"
      description="这是一段文字描述"
      show-icon
    />
    <w-alert
      title="错误的提示内容"
      type="error"
      description="这是一段文字描述"
      show-icon
    />
  </div>
</template>

<style scoped>
.w3-alert {
  margin: 20px 0 0;
}
.w3-alert:first-child {
  margin: 0;
}
</style>