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.
103 lines
2.2 KiB
103 lines
2.2 KiB
9 months ago
|
<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>
|