ww664853070
2 years ago
4 changed files with 141 additions and 13 deletions
@ -0,0 +1,56 @@ |
|||||
|
/* |
||||
|
* 输入框筛选选择器 |
||||
|
*/ |
||||
|
import React, { useState, useEffect } from 'react' |
||||
|
import { View, Picker, Image, Input, Text } from '@tarojs/components' |
||||
|
import arrowIcon from '../../../static/img/patrol/arrow-down.svg' |
||||
|
import './index.scss' |
||||
|
|
||||
|
export default function InputPicker(props) { |
||||
|
const { title, placeholder, selector, value, onInput, isView } = props |
||||
|
const [curSelector, setCurSelector] = useState([]) |
||||
|
|
||||
|
useEffect(() => { |
||||
|
setCurSelector(selector) |
||||
|
}, []) |
||||
|
|
||||
|
useEffect(()=>{ |
||||
|
handleInput({ detail: { value: value } }) |
||||
|
},[value]) |
||||
|
|
||||
|
function handleInput({ detail: { value: v } }) { |
||||
|
onInput(v) |
||||
|
if (v) { |
||||
|
setCurSelector(selector.filter(item => item && item.includes(v))) |
||||
|
} else { |
||||
|
setCurSelector(selector) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
const handlePickerChange = (e) => { |
||||
|
onInput(curSelector[e.detail.value]) |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<View className='input-picker'> |
||||
|
<View className='input-box'> |
||||
|
<View className='title'>{title}</View> |
||||
|
<Input |
||||
|
className='input' |
||||
|
type='text' |
||||
|
placeholder={placeholder} |
||||
|
border={false} |
||||
|
value={value} |
||||
|
onInput={handleInput} |
||||
|
disabled={isView} |
||||
|
/> |
||||
|
</View> |
||||
|
{ |
||||
|
!isView && |
||||
|
<Picker mode='selector' range={curSelector} onChange={handlePickerChange}> |
||||
|
<Image src={arrowIcon} className='img' /> |
||||
|
</Picker> |
||||
|
} |
||||
|
</View> |
||||
|
) |
||||
|
} |
@ -0,0 +1,30 @@ |
|||||
|
.input-picker { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
height: 96px; |
||||
|
align-items: center; |
||||
|
background-color: #fff; |
||||
|
margin-bottom: 5px; |
||||
|
|
||||
|
.input-box { |
||||
|
padding: 12px 0; |
||||
|
flex-grow: 1; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
|
||||
|
.title { |
||||
|
margin-left: 12px; |
||||
|
} |
||||
|
|
||||
|
.input { |
||||
|
margin-left: 20px; |
||||
|
flex-grow: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.img { |
||||
|
width: 24px; |
||||
|
height: 14px; |
||||
|
margin: 0 30px; |
||||
|
} |
||||
|
} |
Loading…
Reference in new issue