Alert 提示 ​

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

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

const effect = ref('light')
</script>

<style scoped>
.w3-alert + .w3-alert {
  margin-top: 20px;
}
</style>

<template>
  <div style="max-width: 600px">
    <w-alert
      show-icon
      scroll
      title="WinDesign 是一套专为医疗行业打造的标准化解决方案，遵循协同、便捷、高效的设计理念，适用于快速构建医疗行业中后台系统。"
      type="success"
    />
    <w-alert
      show-icon
      scroll
      effect="dark"
      title="标题文字超出容器宽度时会自动从右向左滚动，鼠标悬停时暂停滚动，移出后继续滚动，短标题保持静止。"
    />
    <w-alert show-icon scroll title="短标题不会滚动" type="warning" />
  </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" bold-title />
    <w-alert
      title="带辅助性文字时同样加粗"
      description="辅助性文字保持常规字重"
      bold-title
      show-icon
    />
  </div>
</template>

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

<template>
  <div>
    <w-alert banner show-icon type="success">
      <template #title>
        通栏提示：系统将于今晚 22:00 - 23:00 进行维护
      </template>
    </w-alert>
    <w-alert banner show-icon type="warning">
      <template #title> 通栏提示：本次维护期间门诊工作站将短暂不可用 </template>
    </w-alert>
    <w-alert banner show-icon type="error">
      <template #title>
        WinDesign
        是一套专为医疗行业打造的标准化解决方案，遵循协同、便捷、高效的设计理念。技术上基于
        Vue.js，由卫宁UED团队开发维护，拥有 80+
        组件，与医疗业务深度绑定，支持国际化项目、动态换肤和响应式设计，具备良好的文档和社区支持等，适用于快速构建医疗行业中后台系统或复杂的前端应用。
      </template>
    </w-alert>
    <w-alert banner show-icon type="info" closable>
      <template #title> 通栏提示：新版本已发布，建议阅读升级说明 </template>
    </w-alert>
  </div>
</template>

<style scoped>
.w3-alert + .w3-alert {
  margin: 20px 0 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 />
    <w-alert title="自定义图标" type="error" show-icon>
      <template #icon>
        <Search />
      </template>
    </w-alert>
  </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" 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>