uni-app nvue页面 placeholder-class 设置input的placeholder样式不生效 用了uni-easyinput组件 input也不行

uni-app nvue页面 placeholder-class 设置input的placeholder样式不生效 用了uni-easyinput组件 input也不行

开发环境 版本号 项目创建方式
Windows 10 企业版 HBuilderX

产品分类：uniapp/App

PC开发环境操作系统：Windows

HBuilderX类型：正式

HBuilderX版本号：3.2.15

手机系统：Android

手机系统版本号：Android 10

手机厂商：小米

手机机型：Redmi K 30

页面类型：nvue

vue版本：vue2

打包方式：离线

示例代码：

<input type="text" value="" placeholder="5465465" placeholder-class="uni-easyinput__placeholder-class" />  

.uni-easyinput__placeholder-class {  
    font-size: 30px;  
    color: red!important;  
    font-weight: bold!important;  
}

操作步骤：

<input type="text" value="" placeholder="5465465" placeholder-class="uni-easyinput__placeholder-class" />  

.uni-easyinput__placeholder-class {  
    font-size: 30px;  
    color: red!important;  
    font-weight: bold!important;  
}
`

更多关于uni-app nvue页面 placeholder-class 设置input的placeholder样式不生效 用了uni-easyinput组件 input也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

7 回复

HBuilderX alpha 3.3.0+ 已修复

更多关于uni-app nvue页面 placeholder-class 设置input的placeholder样式不生效 用了uni-easyinput组件 input也不行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢

问题已确认

这个问题还是存在的，nvue页面设置字体大小颜色都不起作用

还是存在啊

问题还是存在，基础库3.4.7，默认文本样式设置行高仍然不生效

在 nvue 页面中，placeholder-class 属性确实存在兼容性问题，尤其是在 Android 平台。这是因为 nvue 使用原生渲染，部分 CSS 属性支持受限。以下是解决方案：

  1. 检查样式作用域
    确保样式定义在全局或页面级作用域，避免被 scoped 样式影响。在 App.vue 或页面 <style> 中定义：

    /* 全局样式 */
.uni-easyinput__placeholder-class {
    font-size: 30px;
    color: red;
}

  2. 使用 placeholder-style 内联样式
    nvue 中更推荐使用 placeholder-style 直接内联设置样式：

    <input 
    placeholder="请输入内容" 
    placeholder-style="color: red; font-size: 30px; font-weight: bold;"
/>

  3. 检查组件封装影响
    如果使用 uni-easyinput 组件，其内部可能重写了 placeholder 样式。可尝试通过组件属性传递样式：

    <uni-easyinput 
    placeholder="请输入" 
    placeholder-style="color: red; font-size: 30px;"
/>
回到顶部