uni-app中uni-easyinput插件在app端设置输入字体颜色值无效

uni-app中uni-easyinput插件在app端设置输入字体颜色值无效

示例代码：

<template>  
    <view>  
        <view class="search">  
            <uni-easyinput   
                prefixIcon="search"   
                placeholder="十月星座运势"  
                placeholderStyle="color: #999999"  
                :clearable="false"  
                :inputBorder="false"  
                :styles="{'color':'#FFFFFF'}">  
            </uni-easyinput>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  

        }  
    }  
</script>  

<style>  
    .search{  
        background-color: #333333;  
        padding: 16rpx 16rpx;  
        margin: 20rpx 0;  
        width: 710rpx;  
        border-radius: 48rpx;  
    }  
</style>

操作步骤：

将“代码示例”中的代码贴进nvue页面执行即可

预期结果：

输入字体为白色（颜色值：#FFFFFF）

实际结果：

输入字体为黑色。该效果在H5端能正常呈现为白色，但是在APP端输入的字体颜色始终为黑色。

bug描述：

使用uni-easyinput插件，设置输入字体颜色无效。（H5端能正常呈现效果，APP端输入字体颜色无法改变）

手机型号 手机系统版本
MI 8（小米手机） Android 10
Mi 10 Lite Zoom Android 11
环境 环境版本参数
PC系统 windows 10（家庭中文版） 64位操作系统
Hbuilderx版本 3.2.12.20211029
其他调试信息
页面类型 nvue
vue版本 2

Image Image


更多关于uni-app中uni-easyinput插件在app端设置输入字体颜色值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

4 回复

同问，uni-easyinput如何修改占位文字颜色和输入文字颜色

更多关于uni-app中uni-easyinput插件在app端设置输入字体颜色值无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


请问解决了吗，在小程序端也不生效

解决方案参考这篇帖子 https://ask.dcloud.net.cn/question/142132?item_id=297248&rf=false

在 uni-app 的 nvue 页面中，uni-easyinput 组件通过 styles 属性设置字体颜色在 App 端可能无法生效，这是因为 nvue 的渲染机制与 vue 页面不同。nvue 基于原生渲染，部分样式属性的支持方式存在差异。

针对你的问题，可以通过以下方式解决：

  1. 使用 inputStyle 属性：
    uni-easyinput 在 nvue 中推荐使用 inputStyle 来设置输入框的样式，而不是 styles。将代码修改为：

    <uni-easyinput 
    prefixIcon="search" 
    placeholder="十月星座运势"
    placeholderStyle="color: #999999"
    :clearable="false"
    :inputBorder="false"
    :inputStyle="{ color: '#FFFFFF' }">
</uni-easyinput>

  2. 检查 nvue 样式支持：
    nvue 中样式属性可能需要使用平台特定的写法。例如，字体颜色可以尝试使用 color 或 text-color，并确保值符合 CSS 标准。

  3. 使用原生输入框替代：
    如果上述方法仍无效，可以考虑在 nvue 页面中使用原生的 <input> 标签，并通过内联样式或类名控制样式。例如：

    <input class="custom-input" placeholder="十月星座运势" />

    .custom-input {
    color: #FFFFFF;
    placeholder-color: #999999;
}
回到顶部