脚本宝典收集整理的这篇文章主要介绍了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 = 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); } } } }
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本宝典。
以上是脚本宝典为你收集整理的JavaScript实现一个输入框组件全部内容,希望文章能够帮你解决JavaScript实现一个输入框组件所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。