动态修改el-input 中的placeholder样式；

会跑酷的鱼

已于 2024-10-20 10:30:57 修改

阅读量839

点赞数 4

文章标签： vue.js javascript 前端

于 2024-10-20 10:30:37 首次发布

本文链接：https://blog.csdn.net/m0_57454691/article/details/143089038

版权

1.原先修改el-input 中的placeholder样式

<style lang="scss" scoped>

:deep(.el-input__inner::placeholder) {
        color: black;
      }

</style>

2. 给placeholder样式添加CSS变量

<style lang="scss" scoped>


:deep(.el-input__inner::placeholder) {
        color: var(--inputColor) //使用css变量 注意变量前需要加 --
      }

</style>

3. 声明一个修改颜色的变量 colorVal

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

const colorVal=ref('#a8abb2')

</script>

4. el-input 标签中给 --inputColor变量赋值，并添加点击事件

<template>
    <div>
        <el-input placeholder="你好" :style="{ '--inputColor': colorVal}"></el-input>
        <el-button @click="changeColor">更改placeholder颜色</el-button>
    </div>
</template>

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

const colorVal=ref('#a8abb2')

const changeColor=()=>{
    colorVal.value='black'
}

</script>

完整代码如下:

<template>
    <div>
        <el-input placeholder="你好" :style="{ '--inputColor': colorVal}"></el-input>
        <el-button @click="changeColor">更改颜色</el-button>
    </div>
</template>

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

const colorVal=ref('#a8abb2')

const changeColor=()=>{
    colorVal.value='black'
}

</script>

<style lang="scss" scoped>

:deep(.el-input__inner::placeholder) {
        color: var(--inputColor)
      }

</style>