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

<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>