JavaScript實現(xiàn)一個輸入框組件
更新時間:2021年09月12日 10:11:53 作者:Aaron_1127
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)一個輸入框組件,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了手動實現(xiàn)一個輸入框組件的具體代碼,供大家參考,具體內(nèi)容如下
背景
taro h5中想要實現(xiàn)一個樣式如下的輸入框:
問題:
taro組件和taro-ui組件中都沒有這種樣式的組件,taro h5 中還不支持修改placeholder的樣式,自己嘗試著實現(xiàn)一個input組件,更能靈活的定義其中的樣式。
實現(xiàn)
js代碼
import Taro, { Component } from '@tarojs/taro'; import { View } from '@tarojs/components'; import { AtIcon } from 'taro-ui'; import './index.scss'; /** * @description 手動實現(xiàn)一個輸入框組件 * @param placeholder:String 自定義輸入框中的占位符 * @param onClickSearch:Function 獲取輸入內(nèi)容回調(diào) */ class BaseInput extends Component { componentDidMount() { //輸入框聚焦 document.querySelector('.search').focus(); } handleSearch = () => { //獲取輸入框的內(nèi)容 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); } } } }
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JS基于ES6新特性async await進行異步處理操作示例
這篇文章主要介紹了JS基于ES6新特性async await進行異步處理操作,結(jié)合實例形式分析了async await進行異步處理操作的相關(guān)原理、步驟與注意事項,需要的朋友可以參考下2019-02-02