feat: 新增 notice-bar 组件

example/docs/zh-CN/components/noticeBar.md

@@ -0,0 +1,81 @@
+::: anchor
+:::
+
+::: title 基本介绍
+:::
+
+::: describe 全局展示操作反馈信息。
+:::
+
+::: title 基础使用
+:::
+
+::: demo
+
+<template>
+    <lay-notice-bar text="要不要作为我的家人，搬来我家。" mode="link"></lay-notice-bar>
+</template>
+
+<script>
+import { layer } from "@layui/layer-vue"
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 使用图标
+:::
+
+::: demo
+
+<template>
+    <lay-notice-bar leftIcon="layui-icon-mute" text="要不要作为我的家人, 搬来我家" mode="closeable"></lay-notice-bar>
+</template>
+
+<script>
+import { ref } from "vue"
+
+export default {
+  setup() {
+
+    return {
+    }
+  }
+}
+</script>
+
+:::
+
+
+::: title 允许关闭
+:::
+
+::: demo
+
+<template>
+    <lay-notice-bar leftIcon="layui-icon-mute" rightIcon="layui-icon-close" text="多的是你不知道的事" mode="closeable"></lay-notice-bar>
+</template>
+
+<script>
+import { ref } from "vue"
+
+export default {
+  setup() {
+
+    const visible = ref(true);
+
+    return {
+        visible
+    }
+  }
+}
+</script>
+
+:::

example/src/router/zh-CN.ts

@@ -356,13 +356,20 @@ const zhCN = [
             path: "/zh-CN/components/fullscreen",
             component: () =>
               import("../../docs/zh-CN/components/fullscreen.md"),
-            meta: { title: "结果" },
+            meta: { title: "全屏" },
-          },          {
+          },
+          {
             path: "/zh-CN/components/scroll",
             component: () =>
               import("../../docs/zh-CN/components/scroll.md"),
             meta: { title: "虚拟滚动" },
           },
+          {
+            path: "/zh-CN/components/noticeBar",
+            component: () =>
+              import("../../docs/zh-CN/components/noticeBar.md"),
+            meta: { title: "通知栏" },
+          },
         ],
       },
     ],

example/src/view/utils/menus.ts

@@ -330,9 +330,15 @@ const menus = [
       {
         id: 100,
         title: "虚拟滚动",
-        subTitle: "result",
+        subTitle: "scroll",
         path: "/zh-CN/components/scroll",
       },
+      {
+        id: 100,
+        title: "通知栏",
+        subTitle: "noticeBar",
+        path: "/zh-CN/components/noticeBar",
+      },
     ],
   },
   {

src/component/noticeBar/index.ts

@@ -5,4 +5,4 @@ Component.install = (app: App) => {
   app.component(Component.name, Component);
 };
 
-export default Component;
+export default Component;

src/component/noticeBar/index.vue

@@ -14,9 +14,9 @@
 <script lang="ts">
 import { toRefs, reactive, defineComponent, ref, onMounted, nextTick } from 'vue';
 export default defineComponent({
-	name: 'noticeBar',
+	name: 'LayNoticeBar',
 	props: {
-		// 通知栏模式，可选值为 closeable link
+		// 选值为 closeable link
 		mode: {
 			type: String,
 			default: () => '',
@@ -61,7 +61,7 @@ export default defineComponent({
 			type: Boolean,
 			default: () => false,
 		},
-        		// 自定义左侧图标
+        // 自定义左侧图标
 		leftIcon: {
 			type: String,
 			default: () => '',

src/index.ts

@@ -155,7 +155,7 @@ const components: Record<string, Component> = {
   LayFullscreen,
   LayConfigProvider,
   LayDatePicker,
-  LayNoticeBar
+  LayNoticeBar,
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -240,7 +240,7 @@ export {
   LayFullscreen,
   LayConfigProvider,
   LayDatePicker,
-  LayNoticeBar
+  LayNoticeBar,
 };
 
 export { layer };