You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.2 KiB
102 lines
2.2 KiB
<template> |
|
<!-- 搜索框 --> |
|
<view class="weui-search-bar"> |
|
<view class="weui-search-bar__form"> |
|
<!-- 搜索框 --> |
|
<view class="weui-search-bar__box"> |
|
<icon class="weui-icon-search_in-box" type="search" size="14"></icon> |
|
<input type="text" class="weui-search-bar__input" bindblur="handleInput" placeholder="站点名称" /> |
|
</view> |
|
</view> |
|
<!-- 搜索按钮,调用搜索查询方法 --> |
|
<view class="weui-search-bar__cancel-btn" @click="handleConfirm">搜索</view> |
|
</view> |
|
|
|
</template> |
|
|
|
<script> |
|
export default { |
|
props: ['searchBar'], |
|
methods: { |
|
// 用户输入触发 |
|
handleInput: function(e) { |
|
this.setData({ |
|
inputValue: e.detail.value |
|
}) |
|
}, |
|
// 点击清空输入框icon |
|
handleDeleteClick: function() { |
|
this.setData({ |
|
inputValue: '' |
|
}) |
|
}, |
|
// 点击取消触发 |
|
handleTextbtnClick() { |
|
// 触发父组件中的方法 |
|
this.setData({ |
|
inputValue: '' |
|
}) |
|
}, |
|
// 用户点击确定触发 |
|
handleConfirm() { |
|
this.triggerEvent('handleSearch', this.data.inputValue) |
|
} |
|
} |
|
|
|
} |
|
</script> |
|
|
|
<style lang="scss"> |
|
/* 搜索框样式 */ |
|
.weui-search-bar { |
|
position: relative; |
|
padding: 8px 10px; |
|
display: -webkit-box; |
|
display: -webkit-flex; |
|
display: flex; |
|
box-sizing: border-box; |
|
background-color: #EFEFF4; |
|
border-top: 1rpx solid #D7D6DC; |
|
border-bottom: 1rpx solid #D7D6DC; |
|
} |
|
|
|
/* 搜索框前的放大镜图标 */ |
|
.weui-icon-search_in-box { |
|
position: absolute; |
|
left: 10px; |
|
top: 7px; |
|
} |
|
|
|
.weui-search-bar__form { |
|
position: relative; |
|
-webkit-box-flex: 1; |
|
-webkit-flex: auto; |
|
flex: auto; |
|
border-radius: 5px; |
|
background: #FFFFFF; |
|
border: 1rpx solid #E6E6EA; |
|
} |
|
|
|
.weui-search-bar__box { |
|
position: relative; |
|
padding-left: 30px; |
|
padding-right: 30px; |
|
width: 100%; |
|
box-sizing: border-box; |
|
z-index: 1; |
|
} |
|
/* 输入框高度与字体大小 */ |
|
.weui-search-bar__input { |
|
height: 28px; |
|
line-height: 28px; |
|
font-size: 14px; |
|
} |
|
|
|
/* 搜索 */ |
|
.weui-search-bar__cancel-btn { |
|
margin-left: 10px; |
|
line-height: 28px; |
|
color: #09BB07; |
|
white-space: nowrap; |
|
} |
|
</style>
|
|
|