♻️重构: 使用 setup script 重构 notice-bar 通告栏

package/component/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "1.0.4",
+  "version": "1.0.5-dev.4",
   "author": "就眠儀式",
   "license": "MIT",
   "description": "a component library for Vue 3 base on layui-vue",
@@ -43,7 +43,7 @@
     "vue-i18n": "^9.2.0-beta.34"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.8",
+    "@babel/core": "^7.17.9",
     "@babel/preset-env": "^7.15.8",
     "@babel/preset-typescript": "^7.15.0",
     "@rollup/plugin-babel": "^5.3.0",

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

@@ -56,6 +56,12 @@
 </template>
 
 <script lang="ts">
+export default {
+  name: "LayNoticeBar",
+};
+</script>
+
+<script lang="ts" setup>
 import {
   toRefs,
   reactive,
@@ -67,78 +73,41 @@ import {
 import LayCarousel from "../carousel/index.vue";
 import LayCarouselItem from "../carouselItem/index.vue";
 import { LayIcon } from "@layui/icons-vue";
-export default defineComponent({
+
-  name: "LayNoticeBar",
+export interface LayNoticeBarProps {
-  components: {
+  mode?: string;
-    LayCarousel,
+  text?: string;
-    LayCarouselItem,
+  textlist?: string[];
-    LayIcon,
+  color?: Function;
-  },
+  background?: Function;
-  props: {
+  size?: number | string;
-    mode: {
+  height?: number | string;
-      type: String,
+  delay?: number;
-      default: () => "",
+  speed?: number;
-    },
+  scrollable?: boolean;
-    text: {
+  leftIcon?: string;
-      type: String,
+  rightIcon?: string;
-      default: () => "",
+}
-    },
+
-    textlist: {
+const props = withDefaults(defineProps<LayNoticeBarProps>(), {
-      type: Array,
+  color: () => "var(--color-warning)",
-      default: [],
+  background: () => "var(--color-warning-light-9)",
-    },
+  text: "",
-    // 通知文本颜色
+  textlist: () => [],
-    color: {
+  size: 14,
-      type: String,
+  height: 40,
-      default: () => "var(--color-warning)",
+  delay: 1,
-    },
+  speed: 100,
-    // 通知背景色
+  scrollable: false,
-    background: {
+});
-      type: String,
+
-      default: () => "var(--color-warning-light-9)",
+const emit = defineEmits(["close", "link"]);
-    },
+
-    // 字体大小，单位px
+const noticeBarWarpRef = ref();
-    size: {
+const noticeBarTextRef = ref();
-      type: [Number, String],
+//@ts-ignore
-      default: () => 14,
+const active = ref(props.textlist[0]?.id);
-    },
+const state = reactive({
-    // 通知栏高度，单位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,
@@ -146,9 +115,9 @@ export default defineComponent({
   textOWidth: 0,
   isMode: false,
   height: 40,
-    });
+});
-    // 初始化 animation 各项参数
+// 初始化 animation 各项参数
-    const initAnimation = () => {
+const initAnimation = () => {
   nextTick(() => {
     state.warpOWidth = noticeBarWarpRef.value.offsetWidth;
     state.textOWidth = noticeBarTextRef.value.offsetWidth;
@@ -157,14 +126,14 @@ export default defineComponent({
       changeAnimation();
     }, props.delay * 1000);
   });
-    };
+};
-    // 计算 animation 滚动时长
+// 计算 animation 滚动时长
-    const computeAnimationTime = () => {
+const computeAnimationTime = () => {
   state.oneTime = state.textOWidth / props.speed;
   state.twoTime = (state.textOWidth + state.warpOWidth) / props.speed;
-    };
+};
-    // 改变 animation 动画调用
+// 改变 animation 动画调用
-    const changeAnimation = () => {
+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;`;
@@ -173,9 +142,9 @@ export default defineComponent({
     noticeBarTextRef.value.style.cssText = `animation: around2 ${state.twoTime}s linear  ; opactity: 1;`;
     state.order = 1;
   }
-    };
+};
-    // 监听 animation 动画的结束
+// 监听 animation 动画的结束
-    const listenerAnimationend = () => {
+const listenerAnimationend = () => {
   noticeBarTextRef.value.addEventListener(
     "animationend",
     () => {
@@ -183,9 +152,9 @@ export default defineComponent({
     },
     false
   );
-    };
+};
-    // 右侧 icon 图标点击
+// 右侧 icon 图标点击
-    const onRightIconClick = () => {
+const onRightIconClick = () => {
   if (!props.mode) return false;
   if (props.mode === "closeable") {
     state.isMode = true;
@@ -193,21 +162,12 @@ export default defineComponent({
   } else if (props.mode === "link") {
     emit("link");
   }
-    };
+};
-    // 页面加载时
+// 页面加载时
-    onMounted(() => {
+onMounted(() => {
   if (props.scrollable) return false;
   initAnimation();
   listenerAnimationend();
-    });
-    return {
-      noticeBarWarpRef,
-      noticeBarTextRef,
-      onRightIconClick,
-      ...toRefs(state),
-      active,
-    };
-  },
 });
 </script>
 

package/component/src/component/select/index.vue

@@ -36,6 +36,7 @@ export interface LaySelectProps {
 
 const selectRef = ref<null | HTMLElement>(null);
 
+// @ts-ignore
 onClickOutside(selectRef, (event) => {
   openState.value = false;
 });