!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,
 };