vue3 CSSProperties使用

最新推荐文章于 2025-06-02 09:18:06 发布

原创最新推荐文章于 2025-06-02 09:18:06 发布 · 4.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript

Vue3 专栏收录该内容

22 篇文章

订阅专栏

本文介绍了如何在Vue项目中，利用TypeScript的CSSProperties类型定义CSS属性，通过父组件传递size属性给子组件，展示如何控制子组件元素的样式。CSSProperties接口提供了丰富的CSS属性类型支持。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在开发Web应用程序时，我们经常使用CSS样式来定义和布局网页的元素。在TypeScript中，我们可以使用CSSProperties类型来定义CSS属性的类型。

一、使用案例

父组件

<template>
  <div>home</div>
  <ChildComponent ref="refChild" :size="imgSize"/>

</template>

<script setup lang="ts">
import {ref} from "vue";

import ChildComponent from "@/views/ChildComponent/ChildComponent.vue";
const refChild = ref<InstanceType<typeof ChildComponent>>(null);
interface IImgSize{
  width:number,
  height:number
}
const imgSize = ref<IImgSize>(null)
imgSize.value = {
  width:200,
  height:50
}
</script>
<style scoped></style>

父组件我们传递一个size属性，size属性很简单，就宽度和高度

子组件

<template>
  <div :style="getStyle"></div>

</template>

<script setup lang="ts">
import { ref, onMounted,CSSProperties,computed } from "vue";
interface IImgSize{
  size:{
    width:number,
    height:number
  }
}
const props = withDefaults(defineProps<IImgSize>(),{
  size:{
    width:200,
    height:20
  }
})
const getStyle = computed(
    (): CSSProperties => {
      const { size } = props;
      return {
        width: size.width + 'px',
        height: size.height + 'px',
      };
    }
);

</script>
<style scoped>
div{
  background-color: red;
}
</style>

在子组件中我们接受到size,并用于控制div的大小。在这个，针对css类型定义我们就用到了CSSProperties

二、CSSProperties 介绍

CSSProperties 是TypeScript中定义的一个接口，用于描述CSS属性的类型。它包含了大多数常用的CSS属性，比如颜色、字体、边框、布局等。我们可以根据需要添加或修改这些属性。

以下是CSSProperties接口的一部分定义：

interface CSSProperties {
  color?: string;
  fontSize?: string;
  margin?: string;
  // ...
}