gfwleak/nezha-nezha-fronted
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 统一搜索框的横向滚动条

Browse Source
This commit is contained in:
陈劲松
2020-03-17 19:43:18 +08:00
parent 3a4d62ff2b
commit 7ab9e62d8e
1 changed files with 9 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
nezha-fronted/src/components/common/searchInput.vue
View File

@@ -27,6 +27,7 @@
</div> </div>
<!-- 搜索框--> <!-- 搜索框-->
<div class="input-center-box" id="input-center-box"> <div class="input-center-box" id="input-center-box">
<el-scrollbar style="height: 100%">
<ul class="sreach_fixe_left" id="search-ul"> <ul class="sreach_fixe_left" id="search-ul">
<li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)"> <li class="selectinfo_box" v-if="select_list.length>0" v-for="(val,ind) in select_list" :key="ind" @click="update_sreach(ind,$event)">
<div class="select_condition"> <div class="select_condition">
@@ -99,8 +100,8 @@
<li class="select_input" v-if="change_sreach_show"> <li class="select_input" v-if="change_sreach_show">
<input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" id="one-input" @keydown="clear_search_list" > <input type="text" @click="read_input" v-model="no_condition" @keyup="enter_one" id="one-input" @keydown="clear_search_list" >
</li> </li>
</ul> </ul>
</el-scrollbar>
</div> </div>
<div v-show="clearSearchShow" class="clear-search" @click="clear_input"> <div v-show="clearSearchShow" class="clear-search" @click="clear_input">
<i class="el-icon-circle-close"></i> <i class="el-icon-circle-close"></i>
@@ -1051,6 +1052,7 @@
}, },
//点击搜索框 显示搜索类型 //点击搜索框 显示搜索类型
read_input(e) { read_input(e) {
console.info(1)
e.cancelBubble = true; e.cancelBubble = true;
e.stopPropagation(); e.stopPropagation();
this.getHeight() this.getHeight()
@@ -1251,23 +1253,22 @@
.search-input-all .input-center-box{ .search-input-all .input-center-box{
flex: 1; flex: 1;
height: 100%; height: 100%;
overflow-x: auto; overflow: hidden;
overflow-y: hidden;
} }
.input-center-box::-webkit-scrollbar {/*滚动条整体样式*/ /*.input-center-box::-webkit-scrollbar {
width: 4px; /*高宽分别对应横竖滚动条的尺寸*/ width: 4px;
height: 6px; height: 6px;
} }
.input-center-box::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ .input-center-box::-webkit-scrollbar-thumb {
border-radius: 3px; border-radius: 3px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: rgba(0,0,0,0.2); background: rgba(0,0,0,0.2);
} }
.input-center-box::-webkit-scrollbar-track {/*滚动条里面轨道*/ .input-center-box::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2); -webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 0; border-radius: 0;
background: rgba(0,0,0,0.1); background: rgba(0,0,0,0.1);
} }*/
.search-input-all .clear-search{ .search-input-all .clear-search{
padding: 0 5px; padding: 0 5px;
text-align: center; text-align: center;