feat(PasswordInput): add focus item className (#6739)

This commit is contained in:
Aaron 2020-07-10 21:18:17 +08:00 committed by GitHub
parent 1824389276
commit c5d860df4b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 23 deletions

View File

@ -40,7 +40,10 @@ function PasswordInput(
} }
Points.push( Points.push(
<li class={{ [BORDER_LEFT]: showBorder }} style={style}> <li
class={[{ [BORDER_LEFT]: showBorder }, bem('item', { focus: showCursor })]}
style={style}
>
{mask ? ( {mask ? (
<i style={{ visibility: char ? 'visible' : 'hidden' }} /> <i style={{ visibility: char ? 'visible' : 'hidden' }} />
) : ( ) : (

View File

@ -5,14 +5,14 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-password-input"> <div class="van-password-input">
<ul class="van-password-input__security van-hairline--surround"> <ul class="van-password-input__security van-hairline--surround">
<li class=""><i style="visibility: visible;"></i></li> <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="van-hairline--left"><i style="visibility: visible;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="van-hairline--left"><i style="visibility: visible;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="van-hairline--left"><i style="visibility: hidden;"></i> <li class="van-hairline--left van-password-input__item van-password-input__item--focus"><i style="visibility: hidden;"></i>
<div class="van-password-input__cursor"></div> <div class="van-password-input__cursor"></div>
</li> </li>
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
</ul> </ul>
<div class="van-password-input__info">密码为 6 位数字</div> <div class="van-password-input__info">密码为 6 位数字</div>
</div> </div>
@ -42,34 +42,34 @@ exports[`renders demo correctly 1`] = `
<div> <div>
<div class="van-password-input"> <div class="van-password-input">
<ul class="van-password-input__security"> <ul class="van-password-input__security">
<li class=""><i style="visibility: visible;"></i></li> <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="" style="margin-left: 15px;"><i style="visibility: visible;"></i></li> <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
<li class="" style="margin-left: 15px;"><i style="visibility: visible;"></i></li> <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: visible;"></i></li>
<li class="" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li> <li class="van-password-input__item" style="margin-left: 15px;"><i style="visibility: hidden;"></i></li>
</ul> </ul>
</div> </div>
</div> </div>
<div> <div>
<div class="van-password-input"> <div class="van-password-input">
<ul class="van-password-input__security van-hairline--surround"> <ul class="van-password-input__security van-hairline--surround">
<li class="">1</li> <li class="van-password-input__item">1</li>
<li class="van-hairline--left">2</li> <li class="van-hairline--left van-password-input__item">2</li>
<li class="van-hairline--left">3</li> <li class="van-hairline--left van-password-input__item">3</li>
<li class="van-hairline--left"></li> <li class="van-hairline--left van-password-input__item"></li>
<li class="van-hairline--left"></li> <li class="van-hairline--left van-password-input__item"></li>
<li class="van-hairline--left"></li> <li class="van-hairline--left van-password-input__item"></li>
</ul> </ul>
</div> </div>
</div> </div>
<div> <div>
<div class="van-password-input"> <div class="van-password-input">
<ul class="van-password-input__security van-hairline--surround"> <ul class="van-password-input__security van-hairline--surround">
<li class=""><i style="visibility: visible;"></i></li> <li class="van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="van-hairline--left"><i style="visibility: visible;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="van-hairline--left"><i style="visibility: visible;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: visible;"></i></li>
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
<li class="van-hairline--left"><i style="visibility: hidden;"></i></li> <li class="van-hairline--left van-password-input__item"><i style="visibility: hidden;"></i></li>
</ul> </ul>
</div> </div>
</div> </div>