!65 通知栏提交

Merge pull request !65 from cool314156/next

package/component/src/component/noticeBar/index.ts

@@ -0,0 +1,8 @@
+import type { App } from "vue";
+import Component from "./index.vue";
+
+Component.install = (app: App) => {
+  app.component(Component.name, Component);
+};
+
+export default Component;

package/component/src/component/noticeBar/index.vue

@@ -0,0 +1,257 @@
+<template>
+  <div
+    class="layui-notice-bar"
+    :style="{ background, height: `${height}px` }"
+    v-show="!isMode"
+  >
+    <div class="layui-notice-bar-warp" :style="{ color, fontSize: `${size}px` }">
+      <lay-icon
+        v-if="leftIcon"
+        class="layui-notice-bar-warp-left-icon"
+        :type="leftIcon"
+      ></lay-icon>
+      <div class="layui-notice-bar-warp-text-box" ref="noticeBarWarpRef" :style="'--textWidth--:'+ text.length+'em'">
+        <div
+          class="layui-notice-bar-warp-text"
+          ref="noticeBarTextRef"
+          v-if="!scrollable"
+        >{{ text }}
+        </div>
+			<div class="layui-notice-bar-warp-slot " v-else> 
+        <lay-carousel v-model="active" indicator="none" anim="updown" arrow="none"  :style="{height:`40px`}">
+              <lay-carousel-item v-for="(item) in textlist" :key="item.id" :id="item.id" class="layui-anim layui-anim-up">
+              {{item.text}}
+              </lay-carousel-item>  
+        </lay-carousel>  
+                <!-- <slot />   -->
+				</div>             
+      </div>
+      <lay-icon
+        :type="rightIcon"
+        v-if="rightIcon"
+        class="layui-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 LayCarousel from '../carousel/index.vue'
+export default defineComponent({
+  name: "LayNoticeBar",
+    components: {
+    LayCarousel,
+  },
+  props: {
+    mode: {
+      type: String,
+      default: () => "",
+    },
+    text: {
+      type: String,
+      default: () => "",
+    },
+    textlist: {
+      type: Array,
+      default: [],
+    },
+    // 通知文本颜色
+    color: {
+      type: String,
+      default: () => "var(--color-warning)",
+    },
+    // 通知背景色
+    background: {
+      type: String,
+      default: () => "var(--color-warning-light-9)",
+    },
+    // 字体大小，单位px
+    size: {
+      type: [Number, String],
+      default: () => 14,
+    },
+    // 通知栏高度，单位px
+    height: {
+      type: Number,
+      default: () => 40,
+    },
+    // 动画延迟时间 (s)
+    delay: {
+      type: Number,
+      default: () => 1,
+    },
+    // 滚动速率 (px/s)
+    speed: {
+      type: Number,
+      default: () => 100,
+    },
+    // 是否开启垂直滚动
+    scrollable: {
+      type: Boolean,
+      default: () => false,
+    },
+    // 自定义左侧图标
+    leftIcon: {
+      type: String,
+      default: () => "",
+    },
+    // 自定义右侧图标
+    rightIcon: {
+      type: String,
+      default: () => "",
+    },
+  },
+  setup(props, { emit }) {
+    const noticeBarWarpRef = ref();
+    const noticeBarTextRef = ref();
+	//@ts-ignore	
+        const active = ref(props.textlist[0]?.id)
+    const state = reactive({
+      order: 1,
+      oneTime: 0,
+      twoTime: 0,
+      warpOWidth: 0,
+      textOWidth: 0,
+      isMode: false,
+      height : 40,
+    });
+    // 初始化 animation 各项参数
+    const initAnimation = () => {
+      nextTick(() => {
+        state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
+        state.textOWidth = noticeBarTextRef.value.offsetWidth;
+        computeAnimationTime();
+        setTimeout(() => {
+          changeAnimation();
+        }, props.delay * 1000);
+      });
+    };
+    // 计算 animation 滚动时长
+    const computeAnimationTime = () => {
+      state.oneTime = state.textOWidth / props.speed;
+      state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
+    };
+    // 改变 animation 动画调用
+    const changeAnimation = () => {
+      if (state.order === 1) {
+        //noticeBarTextRef.value.style.cssText = `animation: oneAnimation ${state.oneTime}s linear; opactity: 1;}`;
+        noticeBarTextRef.value.style.cssText = `animation: around1 ${state.oneTime}s  linear; opactity: 1;`;
+        state.order = 2;
+      } else {
+        noticeBarTextRef.value.style.cssText = `animation: around2 ${state.twoTime}s linear  ; opactity: 1;`;
+        state.order = 1;
+      }
+    };
+    // 监听 animation 动画的结束
+    const listenerAnimationend = () => {
+      noticeBarTextRef.value.addEventListener(
+        "animationend",
+        () => {
+          changeAnimation();
+        },
+        false
+      );
+    };
+    // 右侧 icon 图标点击
+    const onRightIconClick = () => {
+      if (!props.mode) return false;
+      if (props.mode === "closeable") {
+        state.isMode = true;
+        emit("close");
+      } else if (props.mode === "link") {
+        emit("link");
+      }
+    };
+    // 页面加载时
+    onMounted(() => {
+      if (props.scrollable) return false;
+      initAnimation();
+      listenerAnimationend();
+    });
+    return {
+      noticeBarWarpRef,
+      noticeBarTextRef,
+      onRightIconClick,
+      ...toRefs(state),
+      active
+    };
+  },
+});
+</script>
+
+<style>
+.layui-notice-bar {
+  padding: 0 15px;
+  width: 100%;
+  border-radius: 4px;
+}
+.layui-notice-bar .layui-notice-bar-warp {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  height: inherit;
+}
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box {
+  flex: 1;
+  height: inherit;
+  display: flex;
+  align-items: center;
+  overflow: hidden;
+  position: relative;
+}
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-text {
+  white-space: nowrap;
+  position: absolute;
+  left: 0;
+}
+
+@keyframes around1 {
+	from {
+		left: 0;
+	}
+	to {
+		left: calc(0px - var(--textWidth--));
+		/* left: -100%; */
+	}
+}
+@keyframes around2 {
+	from {
+		left: calc(var(--textWidth--));
+		/* left: 100%; */
+	}
+	to {
+    /* left: calc(0px - var(--textWidth--) - 10px); */
+		left: 0;
+	}
+}
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-slot {
+  width: 100%;
+  white-space: nowrap;
+}
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-text-box .layui-notice-bar-warp-slot  .layui-carousel  >[carousel-item] * {
+  display: flex;
+  align-items: center;
+}
+
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-left-icon {
+  width: 24px;
+  font-size: inherit !important;
+}
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-right-icon {
+  width: 24px;
+  text-align: right;
+  font-size: inherit !important;
+}
+.layui-notice-bar .layui-notice-bar-warp .layui-notice-bar-warp-right-icon:hover {
+  cursor: pointer;
+}
+</style>

package/component/src/index.ts

@@ -82,6 +82,7 @@ import LayDatePicker from "./component/datePicker/index";
 import LayTransition from "./component/transition/index";
 import LayUpload from "./component/upload/index";
 import LayRipple from "./component/ripple/index";
+import LayNoticeBar from "./component/noticeBar/index";
 import LayConfigProvider from "./provider";
 import { InstallOptions } from "./types";
 
@@ -162,6 +163,7 @@ const components: Record<string, Component> = {
   LayTransition,
   LayUpload,
   LayRipple,
+  LayNoticeBar
 };
 
 const install = (app: App, options?: InstallOptions): void => {
@@ -250,6 +252,7 @@ export {
   LayTransition,
   LayUpload,
   LayRipple,
+  LayNoticeBar,
   install,
 };
 

package/document/src/document/zh-CN/components/noticeBar.md

@@ -0,0 +1,132 @@
+::: 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="最好的爱是两个人彼此做个伴，不要束缚，不要缠绕，不要占有，不渴望从对方那里得到，只是并肩站在一起，看看这个世界。"></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" background="#ecf5ff"	></lay-notice-bar>
+</template>
+
+<script>
+import { ref } from "vue"
+
+export default {
+  setup() {
+
+    const visible = ref(true);
+
+    return {
+        visible
+    }
+  }
+}
+</script>
+
+:::
+
+::: title 垂直滚动
+:::
+
+::: demo
+<template>
+    <lay-notice-bar   :scrollable="true" leftIcon="layui-icon-mute" :textlist="list"   >
+    </lay-notice-bar>
+</template>
+
+<script>
+import { ref,reactive } from "vue"
+
+export default {
+  setup() {
+
+    const   list = reactive([
+      { id: '1', text: '条目一' },
+      { id: '2', text: '条目二' },
+      { id: '3', text: '条目三' },
+      { id: '4', text: '条目四' },
+    ])
+    return {
+       
+        list,
+        
+    }
+  }
+}
+</script>
+
+:::
+
+::: title Notice Bar 属性
+:::
+
+::: table
+
+| 事件 | 描述     | 参数                  |
+| ---- | -------- | --------------------- |
+| mode | 模式 | 'link' 'closeable' |
+| text | 内容 | 滚动内容 |
+| leftIcon | 左侧图标 | -- |
+| rightIcon | 右侧图标 | -- |
+| scrollable | 是否开启垂直滚动|true,false|
+|  textlist  | 垂直滚动内容| Array|
+:::
+
+ 
+
+::: previousNext transfer
+:::

package/document/src/router/zh-CN.ts

@@ -382,6 +382,11 @@ const zhCN = [
             component: () => import("../document/zh-CN/components/ripple.md"),
             meta: { title: "水波纹" },
           },
+          {
+            path: "/zh-CN/components/noticeBar",
+            component: () => import("../document/zh-CN/components/noticeBar.md"),
+            meta: { title: "通告栏" },
+          },
         ],
       },
     ],

package/document/src/view/utils/menus.ts

@@ -351,6 +351,12 @@ const menus = [
         subTitle: "scroll",
         path: "/zh-CN/components/scroll",
       },
+      {
+        id: 114,
+        title: "通告栏",
+        subTitle: "noticeBar",
+        path: "/zh-CN/components/noticeBar",
+      },
     ],
   },
   {