青岛建设局网站林云seo博客

以分页器为例

上述是一个简单的elementUI的带有背景的分页器、页面渲染、代码、以及样式
假如我们想要修改页码的的背景、选中状态的背景应该怎么做呢？很简单

<template><div><el-paginationbackgroundclass="myPagination"layout="prev, pager, next":total="1000"></el-pagination></div></template><script>
</script><style lang="less" scoped>
::v-deep .myPagination{.el-pager {.number{background: #61879db5;}.active {background: #0f64af;}}
}
</style>

只需要在css中进行deep深度绑定，就可以修改其展示颜色，如下所示

动态修改样式

上述我们静态修改样式实现了，如果把这个组件作为一个低代码的组件库，并且给用户提供操作面板让其自己控制样式，如下

这种情况下，思考怎么动态修改背景与选中状态的背景色呢？

1. 实现思路

   1、可以在js的script进行操作的变量
   2、变量传入到css的style中
   

2. 实现示例
   a、为最外侧的组件绑定:style 计算属性
   b、使用:style 通过–numberbgdColor的形式往css中传递变量

   <template><div><el-paginationbackgroundclass="myPagination"layout="prev, pager, next":style="paginationStyle":total="1000"></el-pagination></div>
   </template>
   <script>
   export default {data() {return {bgdColor:'#61879db5'}	},computed: {paginationStyle() {return {'--numberbgdColor': bgdColor}}}
   }
   </script>
   

   
   css变量使用var(–numberbgdColor)即可捕获到js中传递过来的变量numberbgdColor

   	<style lang="less" scoped>::v-deep .myPagination{.el-pager {.number{background: var(--numberbgdColor);}.active {}}}</style>
   

   
   我们发现页码的背景颜色就被我们传递的变量替代了，然后我们就可以通过对data中的bgdColor值改变，来改变组件内部页码的背景颜色了

思路解析

1、css有一个伪类:root,在 CSS 中，:root 是一个特殊的伪类，表示文档的根元素（通常是 元素）。我们通常在 :root 中定义全局变量，因为它是作用域最大的位置。其定义格式如下：

/* 定义 CSS 变量 */
:root {--primary-color: #3498db;--secondary-color: #2ecc71;--font-size: 16px;
}

我们通过对分页器组件绑定:style仿照root的形式传递全局变量

2、css中一样存在作用域
var() 函数是用于访问和使用已经定义的 CSS 变量的关键函数，分层级去寻找变量，在此不做具体介绍

总结

通过在 Vue 中使用 :style 动态绑定样式和 CSS 变量，通过 Vue 的计算属性来确保样式随数据变化自动更新，从而提供更好的用户体验和更清晰的代码结构。