Alert 提示

响应式提示组件。

行内 Tailwind/UnoCSS 用法

使用行内的tailwind/unocss样式构建，复制组件的代码即可使用

这是一条信息提示 详情

操作成功

这是一条警告提示

这是一条错误提示

查看代码

<template>
  <div class="flex flex-col gap-4">
    <!-- 基础提示 -->
    <div class="flex min-w-[300px] max-w-[80%] items-center rounded-md bg-blue-50 p-4 text-sm">
      <svg class="size-[18px] text-blue-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path fill="none"
          d="M16 8a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 16 8m4 13.875h-2.875v-8H13v2.25h1.875v5.75H12v2.25h8Z" />
        <path fill="currentColor"
          d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m0 6a1.5 1.5 0 1 1-1.5 1.5A1.5 1.5 0 0 1 16 8m4 16.125h-8v-2.25h2.875v-5.75H13v-2.25h4.125v8H20Z" />
      </svg>
      <span class="ml-3 flex-1 font-medium text-blue-700">
        这是一条信息提示
      </span>
      <a href="#" class="mr-3 whitespace-nowrap font-medium text-blue-700 hover:text-blue-600">详情</a>

      <button type="button" class="-m-1.5 inline-flex rounded-md p-1.5 text-gray-400 hover:bg-[#ffffff99] focus:outline-none">
        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- 成功提示 -->
    <div class="flex min-w-[300px] max-w-[80%] items-center rounded-md bg-green-50 p-4 text-sm">
      <svg class="size-[18px] text-green-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2m-2 19.59l-5-5L10.59 15L14 18.41L21.41 11l1.596 1.586Z" />
        <path fill="none" d="m14 21.591l-5-5L10.591 15L14 18.409L21.41 11l1.595 1.585z" />
      </svg>
      <span class="ml-3 flex-1 text-sm font-medium text-green-800">
        操作成功
      </span>

      <button type="button" class="-m-1.5 inline-flex rounded-md p-1.5 text-gray-400 hover:bg-[#ffffff99] focus:outline-none">
        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- 警告提示 -->
    <div class="flex min-w-[300px] max-w-[80%] items-center rounded-md bg-yellow-50 p-4 text-sm">
      <svg class="size-[18px] text-yellow-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14s14-6.3 14-14S23.7 2 16 2m-1.1 6h2.2v11h-2.2zM16 25c-.8 0-1.5-.7-1.5-1.5S15.2 22 16 22s1.5.7 1.5 1.5S16.8 25 16 25" />
      </svg>
      <span class="ml-3 flex-1 text-sm font-medium text-yellow-800">
        这是一条警告提示
      </span>

      <button type="button" class="-m-1.5 inline-flex rounded-md p-1.5 text-gray-400 hover:bg-[#ffffff99] focus:outline-none">
        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </button>
    </div>

    <!-- 错误提示 -->
    <div class="flex min-w-[300px] max-w-[80%] items-center rounded-md bg-red-50 p-4 text-sm">
      <svg class="size-[18px] text-red-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
        <path fill="currentColor"
          d="M16 2C8.2 2 2 8.2 2 16s6.2 14 14 14s14-6.2 14-14S23.8 2 16 2m5.4 21L16 17.6L10.6 23L9 21.4l5.4-5.4L9 10.6L10.6 9l5.4 5.4L21.4 9l1.6 1.6l-5.4 5.4l5.4 5.4z" />
      </svg>
      <span class="ml-3 flex-1 text-sm font-medium text-red-800">
        这是一条错误提示
      </span>

      <button type="button" class="-m-1.5 inline-flex rounded-md p-1.5 text-gray-400 hover:bg-[#ffffff99] focus:outline-none">
        <svg class="size-5" viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd"
            d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
            clip-rule="evenodd" />
        </svg>
      </button>
    </div>
  </div>
</template>

CSS 类用法

使用预定义的CSS类。复制index.css的样式即可使用

这是一条信息提示

详情

操作成功

这是一条警告提示

这是一条错误提示

查看代码

html

<template>
  <div class="alert-container">
    <!-- 基础提示 -->
    <div class="alert alert-info">
      <div class="alert-icon">
        <svg viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
      </div>
      <p class="alert-message">
        这是一条信息提示
      </p>
      <a href="#" class="alert-action">详情</a>
      <div class="alert-close">
        <button type="button" class="close-button">
          <svg viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 成功提示 -->
    <div class="alert alert-success">
      <div class="alert-icon">
        <svg viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
        </svg>
      </div>
      <p class="alert-message">
        操作成功
      </p>
      <div class="alert-close">
        <button type="button" class="close-button">
          <svg viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 警告提示 -->
    <div class="alert alert-warning">
      <div class="alert-icon">
        <svg viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
      </div>
      <p class="alert-message">
        这是一条警告提示
      </p>
      <div class="alert-close">
        <button type="button" class="close-button">
          <svg viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>

    <!-- 错误提示 -->
    <div class="alert alert-error">
      <div class="alert-icon">
        <svg viewBox="0 0 20 20" fill="currentColor">
          <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
        </svg>
      </div>
      <p class="alert-message">
        这是一条错误提示
      </p>
      <div class="alert-close">
        <button type="button" class="close-button">
          <svg viewBox="0 0 20 20" fill="currentColor">
            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="css" scoped>
  @import './index.css';
</style>

index.css

.alert-container {
  @apply flex flex-col gap-4;
}

.alert {
  @apply flex rounded-md p-4 text-sm;

  .alert-icon {
    @apply shrink-0;

    svg {
      @apply h-5 w-5;
    }
  }

  .alert-message {
    @apply ml-3 flex-1 font-medium;
  }

  .alert-action {
    @apply mr-3 whitespace-nowrap font-medium hover:text-blue-600;
  }

  .alert-close {
    @apply -mx-1.5 -my-1.5;

    .close-button {
      @apply inline-flex rounded-md p-1.5 text-gray-400 hover:bg-white/60 focus:outline-none;

      svg {
        @apply h-5 w-5;
      }
    }
  }

  /* 信息提示样式 */
  &.alert-info {
    @apply bg-blue-50;

    .alert-icon svg {
      @apply text-blue-400;
    }

    .alert-message {
      @apply text-blue-700;
    }

    .alert-action {
      @apply text-blue-700;
    }
  }

  /* 成功提示样式 */
  &.alert-success {
    @apply bg-green-50;

    .alert-icon svg {
      @apply text-green-400;
    }

    .alert-message {
      @apply text-green-800;
    }
  }

  /* 警告提示样式 */
  &.alert-warning {
    @apply bg-yellow-50;

    .alert-icon svg {
      @apply text-yellow-400;
    }

    .alert-message {
      @apply text-yellow-800;
    }
  }

  /* 错误提示样式 */
  &.alert-error {
    @apply bg-red-50;

    .alert-icon svg {
      @apply text-red-400;
    }

    .alert-message {
      @apply text-red-800;
    }
  }
}