blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

fix search

Browse Source
This commit is contained in:
cookfront 2017-03-16 14:37:11 +08:00
parent 0cd2fc1824
commit 4daac8bc1d
3 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,16 +1,22 @@
<template> <template>
<div class="zan-search" :class="{ 'is-focus' : isFocus }"> <div class="zan-search" :class="{ 'zan-search--focus' : isFocus }">
<div class="zan-search__input-wrap"> <div class="zan-search__input-wrap">
<zan-icon name="search"></zan-icon>
<input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch"> <input type="text" :placeholder="placeholder" v-model="value" v-refocus="focusStatus" @focus="handleFocus" @keyup.enter="handleSearch">
<span class="zan-icon zan-icon-close" @click="handleClean"></span> <zan-icon name="clear" @click="handleClean"></zan-icon>
</div> </div>
<div class="zan-search__cancel" :class="{ 'is-focus' : isFocus }" @click="handleBack">取消</div> <div class="zan-search__cancel" :class="{ 'zan-search__cancel--focus' : isFocus }" @click="handleBack">取消</div>
</div> </div>
</template> </template>
<script> <script>
import ZanIcon from 'packages/icon';
export default { export default {
name: 'zan-search', name: 'zan-search',
components: {
ZanIcon
},
props: { props: {
placeholder: { placeholder: {
type: String type: String

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

@ -10,14 +10,16 @@
box-sizing: border-box; box-sizing: border-box;
padding: 4px 15px; padding: 4px 15px;
background-color: #F2F2F2; background-color: #F2F2F2;
@when focus {
@m focus {
.zan-search__input-wrap { .zan-search__input-wrap {
width: 82%; width: 82%;
} }
span { .zan-icon-clear {
display: inline-block; display: inline-block;
} }
} }
@e input-wrap { @e input-wrap {
position: relative; position: relative;
width: 90%; width: 90%;
@ -25,12 +27,7 @@
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;
span {
display: none;
position: absolute;
right: 5px;
top: 8px;
}
input { input {
width: 100%; width: 100%;
height: 14px; height: 14px;
@ -40,14 +37,33 @@
outline: none; outline: none;
} }
} }
@e cancel { @e cancel {
display: none; display: none;
color: #44BB00; color: #44BB00;
font-size: 14px; font-size: 14px;
white-space: nowrap; white-space: nowrap;
@when focus { margin-left: 5px;
@m focus {
display: block; display: block;
} }
} }
.zan-icon-search {
color: $c-gray-darker;
position: absolute;
top: 9px;
left: 10px;
font-size: 16px;
}
.zan-icon-clear {
display: none;
position: absolute;
right: 5px;
top: 8px;
color: #888;
}
} }
} }

10
src/mixins/popup/popup-manager.js
View File

@ -2,13 +2,15 @@ import Vue from 'vue';
import { addClass } from 'src/utils/dom'; import { addClass } from 'src/utils/dom';
const getModal = function() { const getModal = function() {
let modalDom = PopupManager.modalDom; let modalDom = window.popupContext && window.popupContext.modalDom;
if (modalDom) { if (modalDom) {
PopupManager.popupContext.hasModal = true; window.popupContext.hasModal = true;
} else { } else {
PopupManager.popupContext.hasModal = false; window.popupContext.hasModal = false;
modalDom = document.createElement('div'); modalDom = document.createElement('div');
PopupManager.modalDom = modalDom; window.popupContext.modalDom = modalDom;
modalDom.addEventListener('touchmove', function(event) { modalDom.addEventListener('touchmove', function(event) {
event.preventDefault(); event.preventDefault();