docs: update

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

@@ -79,3 +79,18 @@ export default {
 </script>
 
 :::
+
+
+::: title Notice Bar 事件
+:::
+
+::: table
+
+| 事件 | 描述     | 参数                  |
+| ---- | -------- | --------------------- |
+| mode | 模式 | { current: 当前页面 } |
+| text | 内容 | 滚动内容 |
+| leftIcon | 左侧图标 | { current: 当前页面 } |
+| rightIcon | 右侧图标 | 滚动内容 |
+
+:::

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

@@ -271,6 +271,7 @@ export default {
 
 | 属性        | 描述         | 默认值  |
 | ----------- | ------------ | ------- |
+| v-model     | 当前页       | --      |
 | limit       | 每页数量     | --      |
 | total       | 总条数       | --      |
 | showCount   | 显示总数     | `false` |

example/docs/zh-CN/guide/changelog.md

@@ -16,6 +16,7 @@
       <li> 
         <h3>0.4.0 <span class="layui-badge-rim">2022-03-17</span></h3> 
         <ul>
+          <li>[新增] notice-bar 通告栏。</li>
           <li>[新增] scroll 虚拟滚动组件。</li> 
           <li>[新增] water-marker 水印组件。</li>
           <li>[新增] table 表格组件 excel 导出工具栏。</li>

src/component/noticeBar/index.vue

@@ -1,40 +1,66 @@
 <template>
-	<div class="notice-bar" :style="{ background, height: `${height}px` }" v-show="!isMode">
+  <div
+    class="notice-bar"
+    :style="{ background, height: `${height}px` }"
+    v-show="!isMode"
+  >
     <div class="notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
-			<lay-icon v-if="leftIcon" class="notice-bar-warp-left-icon" :type="leftIcon"></lay-icon>
+      <lay-icon
+        v-if="leftIcon"
+        class="notice-bar-warp-left-icon"
+        :type="leftIcon"
+      ></lay-icon>
       <div class="notice-bar-warp-text-box" ref="noticeBarWarpRef">
-				<div class="notice-bar-warp-text" ref="noticeBarTextRef" v-if="!scrollable">{{ text }}</div>
+        <div
+          class="notice-bar-warp-text"
+          ref="noticeBarTextRef"
+          v-if="!scrollable"
+        >
+          {{ text }}
+        </div>
         <div class="notice-bar-warp-slot" v-else><slot /></div>
       </div>
-             <lay-icon :type="rightIcon" v-if="rightIcon" class="notice-bar-warp-right-icon" @click="onRightIconClick"></lay-icon>
+      <lay-icon
+        :type="rightIcon"
+        v-if="rightIcon"
+        class="notice-bar-warp-right-icon"
+        @click="onRightIconClick"
+      ></lay-icon>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { toRefs, reactive, defineComponent, ref, onMounted, nextTick } from 'vue';
+import {
+  toRefs,
+  reactive,
+  defineComponent,
+  ref,
+  onMounted,
+  nextTick,
+} from "vue";
 export default defineComponent({
-	name: 'LayNoticeBar',
+  name: "LayNoticeBar",
   props: {
     // 选值为 closeable link
     mode: {
       type: String,
-			default: () => '',
+      default: () => "",
     },
     // 通知文本内容
     text: {
       type: String,
-			default: () => '',
+      default: () => "",
     },
     // 通知文本颜色
     color: {
       type: String,
-			default: () => 'var(--color-warning)',
+      default: () => "var(--color-warning)",
     },
     // 通知背景色
     background: {
       type: String,
-			default: () => 'var(--color-warning-light-9)',
+      default: () => "var(--color-warning-light-9)",
     },
     // 字体大小，单位px
     size: {
@@ -64,12 +90,12 @@ export default defineComponent({
     // 自定义左侧图标
     leftIcon: {
       type: String,
-			default: () => '',
+      default: () => "",
     },
     // 自定义右侧图标
     rightIcon: {
       type: String,
-			default: () => '',
+      default: () => "",
     },
   },
   setup(props, { emit }) {
@@ -88,8 +114,12 @@ export default defineComponent({
       nextTick(() => {
         state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
         state.textOWidth = noticeBarTextRef.value.offsetWidth;
-				document.styleSheets[0].insertRule(`@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`);
+        document.styleSheets[0].insertRule(
-				document.styleSheets[0].insertRule(`@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`);
+          `@keyframes oneAnimation {0% {left: 0px;} 100% {left: -${state.textOWidth}px;}}`
+        );
+        document.styleSheets[0].insertRule(
+          `@keyframes twoAnimation {0% {left: ${state.warpOWidth}px;} 100% {left: -${state.textOWidth}px;}}`
+        );
         computeAnimationTime();
         setTimeout(() => {
           changeAnimation();
@@ -113,7 +143,7 @@ export default defineComponent({
     // 监听 animation 动画的结束
     const listenerAnimationend = () => {
       noticeBarTextRef.value.addEventListener(
-				'animationend',
+        "animationend",
         () => {
           changeAnimation();
         },
@@ -123,11 +153,11 @@ export default defineComponent({
     // 右侧 icon 图标点击
     const onRightIconClick = () => {
       if (!props.mode) return false;
-			if (props.mode === 'closeable') {
+      if (props.mode === "closeable") {
         state.isMode = true;
-				emit('close');
+        emit("close");
-			} else if (props.mode === 'link') {
+      } else if (props.mode === "link") {
-				emit('link');
+        emit("link");
       }
     };
     // 页面加载时
@@ -175,7 +205,11 @@ export default defineComponent({
   width: 100%;
   white-space: nowrap;
 }
-.notice-bar .notice-bar-warp .notice-bar-warp-text-box .notice-bar-warp-slot ::v-deep(.el-carousel__item) {
+.notice-bar
+  .notice-bar-warp
+  .notice-bar-warp-text-box
+  .notice-bar-warp-slot
+  ::v-deep(.el-carousel__item) {
   display: flex;
   align-items: center;
 }