♻️重构: 使用 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,73 +73,36 @@ import {
 import LayCarousel from "../carousel/index.vue";
 import LayCarouselItem from "../carouselItem/index.vue";
 import { LayIcon } from "@layui/icons-vue";
-export default defineComponent({
-  name: "LayNoticeBar",
-  components: {
-    LayCarousel,
-    LayCarouselItem,
-    LayIcon,
-  },
-  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 }) {
+
+export interface LayNoticeBarProps {
+  mode?: string;
+  text?: string;
+  textlist?: string[];
+  color?: Function;
+  background?: Function;
+  size?: number | string;
+  height?: number | string;
+  delay?: number;
+  speed?: number;
+  scrollable?: boolean;
+  leftIcon?: string;
+  rightIcon?: string;
+}
+
+const props = withDefaults(defineProps<LayNoticeBarProps>(), {
+  color: () => "var(--color-warning)",
+  background: () => "var(--color-warning-light-9)",
+  text: "",
+  textlist: () => [],
+  size: 14,
+  height: 40,
+  delay: 1,
+  speed: 100,
+  scrollable: false,
+});
+
+const emit = defineEmits(["close", "link"]);
+
 const noticeBarWarpRef = ref();
 const noticeBarTextRef = ref();
 //@ts-ignore
@@ -200,15 +169,6 @@ export default defineComponent({
   initAnimation();
   listenerAnimationend();
 });
-    return {
-      noticeBarWarpRef,
-      noticeBarTextRef,
-      onRightIconClick,
-      ...toRefs(state),
-      active,
-    };
-  },
-});
 </script>
 
 <style>

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;
 });