feat: alert

Signed-off-by: ZTL-UwU <zhangtianli2006@163.com>
ZTL-UwU · May 22, 2024 · 1ba2c1b · 1ba2c1b
1 parent bb098ba
commit 1ba2c1b
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 9 deletions.
diff --git a/components/content/Alert.vue b/components/content/Alert.vue
@@ -1,5 +1,5 @@
 <template>
-  <UiAlert class="[&:not(:first-child)]:mt-4">
+  <UiAlert class="[&:not(:first-child)]:mt-4" :class="[typeTwClass[type]]">
     <Icon v-if="icon && title" :name="icon" />
     <UiAlertTitle v-if="title">
       {{ title }}
@@ -16,12 +16,16 @@
 </template>
 
 <script setup lang="ts">
-defineProps({
-  title: {
-    type: String,
-  },
-  icon: {
-    type: String,
-  },
-});
+defineProps<{
+  title: string;
+  icon: string;
+  type: 'info' | 'warning' | 'success' | 'danger';
+}>();
+
+const typeTwClass = {
+  info: '',
+  warning: 'border-amber-600 text-amber-600 [&>svg]:text-amber-600',
+  success: 'border-green-600 text-green-600 [&>svg]:text-green-600',
+  danger: 'border-red-600 text-red-600 [&>svg]:text-red-600',
+};
 </script>
diff --git a/content/index.md b/content/index.md
@@ -12,6 +12,30 @@ to: https://nuxt.studio/themes/docs
 Use this template on Nuxt Studio and start your documentation in seconds.
 ::
 
+::alert{type="success"}
+关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+::
+
+::alert{type="info"}
+关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+::
+
+::alert{type="danger"}
+关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+::
+
+::alert{type="danger" icon="tabler:check"}
+关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+::
+
+::alert{type="danger" icon="tabler:check" title="asd"}
+关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+::
+
+::alert{type="warning"}
+关于 Composables 的更多信息，请参阅 [Vue 官方文档](https://cn.vuejs.org/guide/reusability/composables.html)、[Nuxt 文档](https://nuxt.com/docs/guide/directory-structure/composables)
+::
+
 ## Quick Start
 
 You can start a fresh new project with: