sookie/blog-web
1
0
Fork 0
Code Issues 12 Pull Requests Projects Releases Wiki Activity

搜索框bug修复

Browse Source
This commit is contained in:
结发受长生 2019-05-18 09:45:55 +08:00
parent 093f3d2dfa
commit fedaac2d9f
5 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
themes/yilia/layout/_partial/tools.ejs
View File

@ -23,14 +23,14 @@
<div class="tools-wrap"> <div class="tools-wrap">
<%if(hasInnerArchive){%> <%if(hasInnerArchive){%>
<section class="tools-section tools-section-all" v-show="innerArchive"> <section class="tools-section tools-section-all" v-show="innerArchive">
<div class="search-wrap" @click="$refs.searchIpt.focus()"> <div class="search-wrap" >
<span :class="'search-item'" v-for="(searchItem,index) in searchItems" :key="index"> <span :class="'search-item'" v-for="(searchItem,index) in searchItems" :key="index">
<i class="icon icon-book" v-if="searchItem.type === 'category'"></i> <i class="icon icon-book" v-if="searchItem.type === 'category'"></i>
<i class="icon icon-price-tags" v-if="searchItem.type === 'tag'"></i> <i class="icon icon-price-tags" v-if="searchItem.type === 'tag'"></i>
{{searchItem.query}} {{searchItem.query}}
<i class="icon icon-close" @click="searchItems.splice(index,1)"></i> <i class="icon icon-close" @click="searchItems.splice(index,1)"></i>
</span> </span>
<input class="search-ipt" ref="searchIpt" v-model="search" @blur="addSearchItem(search)" @keydown="searchKeydown" type="text" placeholder="<%=__('search') %>…"> <input class="search-ipt" v-model="search" @blur="addSearchItem(search)" @keydown="searchKeydown" type="text" placeholder="<%=__('search') %>…">
<i class="icon icon-search" @click="addSearchItem(search)"></i> <i class="icon icon-search" @click="addSearchItem(search)"></i>
</div> </div>
<div class="widget tagcloud search-tag"> <div class="widget tagcloud search-tag">

2
themes/yilia/source-src/css/core/_animation.scss
View File

@ -256,7 +256,7 @@
} }
%anmCommon { %anmCommon {
animation-duration: .3s; animation-duration: .5s;
animation-fill-mode: both; animation-fill-mode: both;
animation-timing-function: ease-in-out; animation-timing-function: ease-in-out;
} }

6
themes/yilia/source-src/css/grid.scss
View File

@ -40,15 +40,15 @@ html, body, #container {
min-height:100%; min-height:100%;
background:$colorBodyBg; background:$colorBodyBg;
left: 300px; left: 300px;
width: auto; width: auto;
@extend %trans; @extend %trans;
&.show { &.show {
background: none; background: none;
opacity: .9; opacity: .9;
@extend %anmLeftIn; @extend %anmLeftIn;
.article { .article {
@extend %trans; transition: opacity .5s ease-in, background-color .2s ease-in;
background: rgba(255,255,255,.3); opacity: 0.6;
} }
} }
&.hide { &.hide {

3
themes/yilia/source-src/css/tools.scss
View File

@ -38,7 +38,6 @@
border-bottom: 2px solid $colorF; border-bottom: 2px solid $colorF;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
cursor: text;
.search-ipt { .search-ipt {
color: $colorF; color: $colorF;
background: none; background: none;
@ -64,6 +63,8 @@
border-radius: 20px; border-radius: 20px;
background-color: #076773; background-color: #076773;
white-space: nowrap; white-space: nowrap;
font-size: 14px;
line-height: 25px;
>.icon-close { >.icon-close {
color: darken($colorF, 15%); color: darken($colorF, 15%);
font-size: 12px; font-size: 12px;

2
themes/yilia/source-src/js/slider.js
View File

@ -77,7 +77,7 @@ new Vue({
console.log(event.keyCode) console.log(event.keyCode)
if(event.keyCode == 13){ // 回车键 if(event.keyCode == 13){ // 回车键
this.addSearchItem(this.search) this.addSearchItem(this.search)
} else if(event.keyCode == 8) { // 退格键 } else if(event.keyCode == 8 && !this.search) { // 退格键
this.searchItems.pop() this.searchItems.pop()
} }
}, },