refactor(projects): 添加exportDefaults替换defineProps

2025-11-14 12:43:42 +08:00 · 2021-11-07 01:23:01 +08:00
parent 43b832bee0
commit e61ee32a88
42 changed files with 886 additions and 970 deletions
--- a/src/components/custom/BetterScroll/index.vue
+++ b/src/components/custom/BetterScroll/index.vue
@@ -1,28 +1,30 @@
 <template>
  <div ref="scrollbar" class="wh-full text-left">
-    <div ref="scrollbarContent" class="inline-block" :class="{ 'h-full': !options.scrollY }">
+    <div ref="scrollbarContent" class="inline-block" :class="{ 'h-full': !isScrollY }">
      <slot></slot>
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import { ref, onMounted, watch } from 'vue';
-import type { PropType } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import BScroll from '@better-scroll/core';
 import type { Options } from '@better-scroll/core';
 import { useElementSize } from '@vueuse/core';

-const props = defineProps({
-  options: {
-    type: Object as PropType<Options>,
-    required: true
-  }
+interface Props {
+  /** better-scroll的配置: https://better-scroll.github.io/docs/zh-CN/guide/base-scroll-options.html */
+  options?: Options;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  options: undefined
 });

 const scrollbar = ref<HTMLElement | null>(null);
 const bsInstance = ref<BScroll | null>(null);
 const scrollbarContent = ref<HTMLElement | null>(null);
+const isScrollY = computed(() => Boolean(props.options?.scrollY));

 function initBetterScroll() {
  bsInstance.value = new BScroll(scrollbar.value!, props.options);
--- a/src/components/custom/ButtonTab/index.vue
+++ b/src/components/custom/ButtonTab/index.vue
@@ -5,11 +5,10 @@
      flex-center
      h-30px
      pl-14px
-      border-1px
+      border-1px border-[#e5e7eb]
+      dark:border-[#ffffff3d]
      rounded-2px
      cursor-pointer
-      border-[#e5e7eb]
-      dark:border-[#ffffff3d]
    "
    :class="[closable ? 'pr-6px' : 'pr-14px']"
    :style="buttonStyle"
@@ -31,25 +30,27 @@ import { useBoolean } from '@/hooks';
 import { IconClose } from '@/components';
 import { addColorAlpha } from '@/utils';

-const props = defineProps({
-  isActive: {
-    type: Boolean,
-    default: false
-  },
-  primaryColor: {
-    type: String,
-    default: '#409EFF'
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  },
-  darkMode: {
-    type: Boolean,
-    default: false
-  }
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 是否显示关闭图标 */
+  closable?: boolean;
+  /** 暗黑模式 */
+  darkMode?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false,
+  primaryColor: '#409EFF',
+  closable: true,
+  darkMode: false
 });
-const emit = defineEmits(['close']);
+const emit = defineEmits<{
+  /** 点击关闭图标 */
+  (e: 'close'): void;
+}>();

 const { bool: isHover, setTrue, setFalse } = useBoolean();

--- a/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
+++ b/src/components/custom/ChromeTab/components/SvgRadiusBg.vue
@@ -11,17 +11,11 @@
        <rect width="100%" height="100%" x="0"></rect>
      </clipPath>
    </defs>
-    <svg width="50%" height="100%">
-      <use xlink:href="#geometry-left" width="214" height="36" :fill="foregorund"></use>
-    </svg>
-    <svg width="50%" height="100%">
+    <svg width="52%" height="100%">
      <use xlink:href="#geometry-left" width="214" height="36" :fill="fill"></use>
    </svg>
    <g transform="scale(-1, 1)">
-      <svg width="50%" height="100%" x="-100%" y="0">
-        <use xlink:href="#geometry-right" width="214" height="36" :fill="foregorund"></use>
-      </svg>
-      <svg width="50%" height="100%" x="-100%" y="0">
+      <svg width="52%" height="100%" x="-100%" y="0">
        <use xlink:href="#geometry-right" width="214" height="36" :fill="fill"></use>
      </svg>
    </g>
@@ -30,34 +24,33 @@

 <script setup lang="ts">
 import { computed } from 'vue';
-import { addColorAlpha } from '@/utils';
+import { mixColor } from '@/utils';
+
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 鼠标悬浮状态 */
+  isHover?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 暗黑模式 */
+  darkMode?: boolean;
+}

 /** 填充的背景颜色： [默认颜色, 暗黑主题颜色] */
 type FillColor = [string, string];

-const props = defineProps({
-  isActive: {
-    type: Boolean,
-    default: false
-  },
-  isHover: {
-    type: Boolean,
-    default: false
-  },
-  primaryColor: {
-    type: String,
-    default: '#409EFF'
-  },
-  darkMode: {
-    type: Boolean,
-    default: false
-  }
+const props = withDefaults(defineProps<Props>(), {
+  isActive: false,
+  isHover: false,
+  primaryColor: '#409EFF',
+  darkMode: false
 });

 const defaultColor: FillColor = ['#fff', '#18181c'];
 const hoverColor: FillColor = ['#dee1e6', '#3f3c37'];
+const mixColors: FillColor = ['#ffffff', '#000000'];

-const foregorund = computed(() => defaultColor[Number(props.darkMode)]);
 const fill = computed(() => {
  const index = Number(props.darkMode);
  let color = defaultColor[index];
@@ -65,8 +58,8 @@ const fill = computed(() => {
    color = hoverColor[index];
  }
  if (props.isActive) {
-    const alpha = props.darkMode ? 0.15 : 0.1;
-    color = addColorAlpha(props.primaryColor, alpha);
+    const alpha = props.darkMode ? 0.1 : 0.15;
+    color = mixColor(mixColors[index], props.primaryColor, alpha);
  }
  return color;
 });
--- a/src/components/custom/ChromeTab/index.vue
+++ b/src/components/custom/ChromeTab/index.vue
@@ -30,26 +30,27 @@ import { useBoolean } from '@/hooks';
 import IconClose from '../IconClose/index.vue';
 import { SvgRadiusBg } from './components';

-defineProps({
-  isActive: {
-    type: Boolean,
-    default: false
-  },
-  primaryColor: {
-    type: String,
-    default: '#409EFF'
-  },
-  closable: {
-    type: Boolean,
-    default: true
-  },
-  darkMode: {
-    type: Boolean,
-    default: false
-  }
-});
+interface Props {
+  /** 激活状态 */
+  isActive?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 是否显示关闭图标 */
+  closable?: boolean;
+  /** 暗黑模式 */
+  darkMode?: boolean;
+}

-const emit = defineEmits(['close']);
+withDefaults(defineProps<Props>(), {
+  isActive: false,
+  primaryColor: '#409EFF',
+  closable: true,
+  darkMode: false
+});
+const emit = defineEmits<{
+  /** 点击关闭图标 */
+  (e: 'close'): void;
+}>();

 const { bool: isHover, setTrue, setFalse } = useBoolean();

--- a/src/components/custom/CountTo/index.vue
+++ b/src/components/custom/CountTo/index.vue
@@ -6,85 +6,54 @@ import { ref, computed, onMounted, watch, watchEffect } from 'vue';
 import { useTransition, TransitionPresets } from '@vueuse/core';
 import { isNumber } from '@/utils';

-const props = defineProps({
-  startValue: {
-    type: Number,
-    default: 0
-  },
-  endValue: {
-    type: Number,
-    default: 2021
-  },
-  duration: {
-    type: Number,
-    default: 1500
-  },
-  autoplay: {
-    type: Boolean,
-    default: true
-  },
-  decimals: {
-    type: Number,
-    default: 0,
-    validator(value: number) {
-      return value >= 0;
-    }
-  },
-  prefix: {
-    type: String,
-    default: ''
-  },
-  suffix: {
-    type: String,
-    default: ''
-  },
-  separator: {
-    type: String,
-    default: ','
-  },
-  decimal: {
-    type: String,
-    default: '.'
-  },
-  useEasing: {
-    type: Boolean,
-    default: true
-  },
-  transition: {
-    type: String,
-    default: 'linear'
-  }
-});
-const emit = defineEmits(['on-started', 'on-finished']);
-
-const source = ref(props.startValue);
-const disabled = ref(false);
-let outputValue = useTransition(source);
-const value = computed(() => formatNumber(outputValue.value));
-
-watchEffect(() => {
-  source.value = props.startValue;
-});
-watch([() => props.startValue, () => props.endValue], () => {
-  if (props.autoplay) {
-    start();
-  }
-});
-onMounted(() => {
-  if (props.autoplay) {
-    start();
-  }
-});
-
-function start() {
-  run();
-  source.value = props.endValue;
+interface Props {
+  /** 初始值 */
+  startValue?: number;
+  /** 结束值 */
+  endValue?: number;
+  /** 动画时长 */
+  duration?: number;
+  /** 自动动画 */
+  autoplay?: boolean;
+  /** 进制 */
+  decimals?: number;
+  /** 前缀 */
+  prefix?: string;
+  /** 后缀 */
+  suffix?: string;
+  /** 分割符号 */
+  separator?: string;
+  /** 小数点 */
+  decimal?: string;
+  /** 使用缓冲动画函数 */
+  useEasing?: boolean;
+  /** 缓冲动画函数类型 */
+  transition?: string;
 }

-// function reset() {
-//   source.value = props.startValue;
-//   run();
-// }
+const props = withDefaults(defineProps<Props>(), {
+  startValue: 0,
+  endValue: 2021,
+  duration: 1500,
+  autoplay: true,
+  decimals: 0,
+  prefix: '',
+  suffix: '',
+  separator: ',',
+  decimal: '.',
+  useEasing: true,
+  transition: 'linear'
+});
+
+const emit = defineEmits<{
+  (e: 'on-started'): void;
+  (e: 'on-finished'): void;
+}>();
+
+const source = ref(props.startValue);
+let outputValue = useTransition(source);
+const value = computed(() => formatNumber(outputValue.value));
+const disabled = ref(false);

 function run() {
  outputValue = useTransition(source, {
@@ -96,6 +65,11 @@ function run() {
  });
 }

+function start() {
+  run();
+  source.value = props.endValue;
+}
+
 function formatNumber(num: number | string) {
  if (!num) {
    return '';
@@ -115,4 +89,18 @@ function formatNumber(num: number | string) {
  }
  return prefix + x1 + x2 + suffix;
 }
+
+watch([() => props.startValue, () => props.endValue], () => {
+  if (props.autoplay) {
+    start();
+  }
+});
+watchEffect(() => {
+  source.value = props.startValue;
+});
+onMounted(() => {
+  if (props.autoplay) {
+    start();
+  }
+});
 </script>
--- a/src/components/custom/IconClose/index.vue
+++ b/src/components/custom/IconClose/index.vue
@@ -15,19 +15,19 @@
 <script lang="ts" setup>
 import { useBoolean } from '@/hooks';

-defineProps({
-  isPrimary: {
-    type: Boolean,
-    default: false
-  },
-  primaryColor: {
-    type: String,
-    default: '#409EFF'
-  },
-  defaultColor: {
-    type: String,
-    default: '#9ca3af'
-  }
+interface Props {
+  /** 激活状态 */
+  isPrimary?: boolean;
+  /** 主题颜色 */
+  primaryColor?: string;
+  /** 默认颜色 */
+  defaultColor?: string;
+}
+
+withDefaults(defineProps<Props>(), {
+  isPrimary: false,
+  primaryColor: '#409EFF',
+  defaultColor: '#9ca3af'
 });

 const { bool: isHover, setTrue, setFalse } = useBoolean();