关于样式权重问题

[Tyh2001]

各位注意一个原则哈：能使用 css 解决的，优先使用 css 解决，因为使用 css 解决样式的性能一定比 js 要好。

而且还要注意一下权重的问题，比如这里原有的 f-footer 组件中，可以通过 height 属性设置一个高度，设置了一个默认值，直接作用在行内：

<template>
  <footer class="f-footer" :style="{ height }">
    <slot />
  </footer>
</template>

<script setup lang="ts">
  defineProps({
    height: {
      type: String,
      default: (): string => '60px',
    },
  })
</script>

因为 props 直接就作用在行内了，行内样式的权重比 css 要大，所以用户在使用的时候使用 css 修改样式就会很麻烦，所以对于这种的默认值，优先使用 css 来解决：

<template>
  <footer class="f-footer" :style="{ height }">
    <slot />
  </footer>
</template>

<script setup lang="ts">
  defineProps({
    height: {
      type: String,
      default: (): string => '',
    },
  })
</script>

<style scoped>
  .f-footer {
    height: 60pc;
  }
</style>