blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-10-27 01:32:10 +08:00
Code Issues Projects Releases Wiki Activity

fix search

Browse Source
This commit is contained in:
cookfront 2017-03-31 15:35:45 +08:00
parent ec8232c171
commit 8a806a7ccf
2 changed files with 24 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/search/src/search.vue
View File

@ -5,13 +5,14 @@
<input <input
type="text" type="text"
:placeholder="placeholder" :placeholder="placeholder"
class="zan-search__input"
v-model="value" v-model="value"
v-refocus="focusStatus" v-refocus="focusStatus"
@focus="handleFocus" @focus="handleFocus"
@keyup.enter="handleSearch"> @keyup.enter="handleSearch">
<zan-icon name="clear" @click="handleClean"></zan-icon> <zan-icon name="clear" @click="handleClean" v-show="isFocus"></zan-icon>
</div> </div>
<div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div> <div class="zan-search__cancel" v-show="isFocus" @click="handleBack">取消</div>
</div> </div>
</template> </template>

39
packages/zanui-css/src/search.css
View File

@ -3,33 +3,25 @@
@component-namespace zan { @component-namespace zan {
@b search { @b search {
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
padding: 4px 15px; padding: 4px 15px;
background-color: #F2F2F2; background-color: #F2F2F2;
@m focus { @m focus {
.zan-search__input-wrap { padding-right: 50px;
width: 82%;
}
.zan-icon-clear {
display: inline-block;
}
} }
@e input-wrap { @e input-wrap {
position: relative; position: relative;
width: 90%;
padding: 8px 24px 8px 35px; padding: 8px 24px 8px 35px;
border: 1px solid $c-gray-light; border: 1px solid $c-gray-light;
border-radius: 4px; border-radius: 4px;
background-color: $c-white; background-color: $c-white;
}
input { @e input {
display: block;
width: 100%; width: 100%;
height: 14px; height: 14px;
font-size: 14px; font-size: 14px;
@ -37,33 +29,32 @@
border: none; border: none;
outline: none; outline: none;
} }
}
@e cancel { @e cancel {
display: none; position: absolute;
color: #44BB00; line-height: 34px;
padding: 4px 0;
top: 0;
right: 10px;
font-size: 14px; font-size: 14px;
white-space: nowrap; color: $c-green;
margin-left: 5px;
@m focus {
display: block;
}
} }
.zan-icon-search { .zan-icon-search {
color: $c-gray-darker; color: $c-gray-darker;
position: absolute; position: absolute;
top: 9px; top: 8px;
left: 10px; left: 10px;
font-size: 16px; font-size: 16px;
line-height: 1;
} }
.zan-icon-clear { .zan-icon-clear {
display: none; font-size: 14px;
line-height: 1;
position: absolute; position: absolute;
right: 5px; right: 5px;
top: 8px; top: 9px;
color: #888; color: #888;
} }
} }