Vue3基础(十ba)___在css中使用props或者计算属性的变量,来实现动态样式

简介: 本文介绍了如何在Vue3中通过CSS变量和props或计算属性来实现动态样式。

主要使用到了css3中var

<template >
  <div class="container">
    <p
      class="p1"
      :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"
    >obj2====={
   {
   obj2}}</p>
  </div>
</template>
<script>
import {
    ref, computed } from "vue";
export default {
   
  props: {
   
    width: {
    type: String, default: "300px" }, // 宽度
    height: {
    type: String, default: "100px" }, // 高度
    bgc: {
    type: String, default: "#ccc" } //北京颜色
  },
  setup(p, {
    emit }) {
   
    const obj = ref({
    obj1: "obj111", obj2: "obj222", obj3: "obj333" });
    let objStyle = computed(() => {
   
      return {
    "--fontSize": "22px" };
    });
    return {
    ...obj.value, objStyle};
  }
};
</script>
<style  scoped>
.p1 {
   
  width: var(--width);
  height: var(--height);
  background-color: var(--background);
  color: var(--main-bg-color);
  font-size: var(--fontSize);
}
.container {
   
  color: var(--main-bg-color);
  font-size: var(--main-padding);
}
</style>
AI 代码解读

1:
通过props接受变量:然后在页面上使用:只有传入style中才能使用,核心代码:

  props: {
   
    width: {
    type: String, default: "300px" }, // 宽度
    height: {
    type: String, default: "100px" }, // 高度
    bgc: {
    type: String, default: "#ccc" } //北京颜色
  },

 <p class="p1"
    :style="{'--width':width,'--height':height,'--background':bgc,...objStyle}"
    ></p>

CSS:
.p1 {
   
  width: var(--width);
  height: var(--height);
  background-color: var(--background);
  color: var(--main-bg-color);
}
AI 代码解读

2:使用computed计算属性,核心代码:
我们可以直接使用computed中返回的对象 --fontSize ==》 22px

let objStyle = computed(() => {
   
      return {
    "--fontSize": "22px" };
    });
.p1 {
   
  font-size: var(--fontSize);
}
AI 代码解读
目录
打赏
0
0
0
0
95
分享
相关文章
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
84 5
CSS 浮动属性讲解和使用
本文介绍了CSS中的浮动(float)属性,包括其基本功能、属性选项及其在网页布局中的应用。浮动使元素脱离文档流,向左或右排列,周围元素随之调整。文章还详细讲解了清除浮动的方法,如使用clear属性、设置父元素高度、利用overflow属性、伪元素等,以解决因浮动导致的布局问题。最后,强调了浮动在创建复杂布局时的作用,并预告后续内容。
71 2
CSS transition过渡属性详解
本文介绍了CSS中`transition`属性的作用、用法及实例。`transition`用于在元素属性变化时添加平滑过渡动画,通过设置`transition-property`、`transition-duration`、`transition-timing-function`和`transition-delay`等属性值,可以精细控制过渡效果。文末提供了HTML示例代码,展示了如何使用`transition`实现鼠标悬停时背景颜色的平滑变化。
116 1
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
124 12
如何在 CSS 变量中使用函数?
【10月更文挑战第28天】虽然CSS变量本身不能像传统编程语言中的函数那样直接进行复杂的运算和逻辑处理,但通过CSS预处理器、`calc()` 函数以及与JavaScript的结合,可以在很大程度上实现类似函数的功能,提高CSS样式的灵活性和可维护性,满足各种不同的页面设计和交互需求。
CSS 变量的作用域和 JavaScript 变量的作用域有什么不同?
【10月更文挑战第28天】CSS变量和JavaScript变量虽然都有各自的作用域概念,但由于它们所属的语言和应用场景不同,其作用域的定义、范围、覆盖规则以及与其他语言特性的交互方式等方面都存在明显的差异。理解这些差异有助于更好地在Web开发中分别运用它们来实现预期的页面效果和功能逻辑。
CSS权重计算
【10月更文挑战第28天】CSS权重计算是CSS样式应用中的一个重要概念,了解和掌握权重计算规则有助于更好地控制页面的样式表现,避免样式冲突和意外的显示效果,从而提高网页开发的效率和质量。
CSS 变量的作用域是什么?
【10月更文挑战第28天】理解CSS变量的作用域规则对于有效地使用CSS变量来组织和管理页面样式非常重要。通过合理地利用全局作用域和局部作用域,以及掌握变量的覆盖和继承规则,可以创建更具可维护性、灵活性和可扩展性的CSS样式表,实现各种复杂的页面设计和样式需求。

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等