动态修改el-input样式,css变量形式外层修改input样式
背景:正常我们在修改样式的时候,直接在样式表里写死,但是如果我们想要动态的修改样式,例如el-input字体颜色时,我们需要修改的实际是.el-input__inner这个样式的color,既然是动态,我们就不能在样式表里写死了,而是使用CSS变量修改。
一、CSS变量是什么?
1.css变量
注意:
- 1.声明变量的时候,变量名前面要加两根连词线“--”
- 2.变量使用var()函数包裹,还可以使用弟二个参数,表示变量的默认值。如果变量不存在,就会使用这个默认值。
以下代码中声明了两个变量:--shadow、--size
div { font-size: var(--size, 18px); box-shadow: var(--shadow); }
二、修改el-input字体颜色
1.静态方式修改,无法动态改变样式
/deep/ .el-input__inner { color: red }
2.动态修改el-input字体颜色
思路:给css引入一个变量
--inputColor
/deep/ .el-input__inner { color: var(--inputColor); // 使用css变量,注意变量前需要加"--" }
vue声明一个变量颜色
colorVal
, 例如: "#cccccc"
data() { return { colorVal: '#cccccc' } }
需要修改的地方,为--inputColor变量赋值
<el-input v-model="valueStr" :style="{'--inputColor': colorVal}"></el-input>
动态JS修改
colorVal
即可
this.colorVal = 'red'
需要注意:--inputColor
是css变量,帮助引导的,colorVal
才是设置的样式值
三、示例代码
<template> <div> <el-input v-model="valueStr" :style="{ '--inputColor': colorVal}" @input="change1"></el-input> </div> </template> <script> export default { data () { return { valueStr: '', colorVal: '#606266', } }, created () { }, methods: { change1 () { var r = Math.floor(Math.random() * 256) var g = Math.floor(Math.random() * 256) var b = Math.floor(Math.random() * 256) // 设置随机色 var color = '#' + r.toString(16) + g.toString(16) + b.toString(16) this.colorVal = color }, }, } </script> <style lang="less" scoped> /deep/ .el-input__inner { color: var(--inputColor); //使用css变量 注意变量前需要加 -- } </style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 20250116 支付宝出现重大事故 有感
· 一个基于 Roslyn 和 AvalonEdit 的跨平台 C# 编辑器
· 推荐一款非常好用的在线 SSH 管理工具
· 聊一聊 操作系统蓝屏 c0000102 的故障分析
· .NET周刊【1月第1期 2025-01-05】