JavaScript实现一个输入框组件 JavaScript实现一个输入框组件

【JavaScript实现一个输入框组件】本文实例为大家分享了手动实现一个输入框组件的具体代码，供大家参考，具体内容如下
背景 taro h5中想要实现一个样式如下的输入框：

文章图片

问题： taro组件和taro-ui组件中都没有这种样式的组件，taro h5 中还不支持修改placeholder的样式，自己尝试着实现一个input组件，更能灵活的定义其中的样式。
实现 js代码

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 = https://www.it610.com/article/document.querySelector('.search').innerText; this.props.onClickSearch && this.props.onClickSearch(value); }; render() {const { placeholder = '请输入' } = this.props; return ({/* contenteditable可以控制一个div是否可以编辑 */}); }}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); }}}}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。