本文介绍在 Taro H5 环境中，针对现有组件库无法满足特定 UI 需求的情况，手动实现一个支持自定义样式的输入框组件。通过结合 JavaScript 与 SCSS，利用 contenteditable 属性解决 placeholder 样式修改难题，提供完整的组件代码与样式实现方案。
本文分享手动实现输入框组件的具体代码，供读者参考。
背景
在 Taro H5 开发中，需要实现如图所示的输入框效果：
问题
Taro 原生组件及 Taro UI 均不提供此类样式的组件，且 Taro H5 暂不支持直接修改 placeholder 样式。因此，尝试自行实现一个 input 组件，以便更灵活地定义内部样式。
实现
JavaScript 代码实现如下：
import Taro, { Component } from '@tarojs/taro';
import { View } from '@tarojs/components';
import { AtIcon } from 'taro-ui';
import './index.scss';
/**
* @description 手动实现一个输入框组件
* @param placeholder：String 自定义输入框中的占位符
* @param onClickSearch：Function 获取输入内容回调
*/
class BaseInput extends Component {
componentDidMount() {
//输入框聚焦
document.querySelector('.search').focus();
}
handleSearch = () => {
//获取输入框的内容
const value = document.querySelector('.search').innerText;
this.props.onClickSearch && this.props.onClickSearch(value);
};
render() {
const { placeholder = '请输入' } = this.props;
return (
<View className="base_input">
<View className="my_search">
<AtIcon
value="search"
color="#999"
className="search_icon"
onClick={this.handleSearch}
/>
{/* contenteditable可以控制一个div是否可以编辑 */}
<View
className="search"
contenteditable
placeholder={placeholder}
></View>
</View>
</View>
);
}
}
export default BaseInput;SCSS 样式代码如下：
.base_input {
.my_search {
box-sizing: border-box;
width: 690px;
height: 56px;
line-height: 56px;
border-radius: 28px;
margin: 12px auto;
background: #f8f8f8;
display: flex;
.search_icon {
width: 30px;
height: 30px;
margin-left: 20px;
margin-right: 18px;
}
.search {
width: 560px;
padding: 0px 18px;
background: #f8f8f8;
height: 56px;
color: #999;
font-size: 28px;
font-weight: 400;
&:empty::after {
content: attr(placeholder);
}
}
}
}以上为本文全部内容，希望能为读者的学习提供帮助，欢迎支持本站。