效果图
代码如下
1. 子组件中
<view class="search-box-component">
<view class="search-content">
<view class="search-left">
<view class="search-icon" style="width:30rpx;height:30.3rpx;margin: 0 20rpx 0 28rpx;"></view>
<input class="input" placeholder="请输入关键词" bindinput="handleInputTxt" bindconfirm="search" value="{{inputValue}}"></input>
</view>
<view class="search-right" bindtap="handleClickSearch" >
搜索
</view>
</view>
<view wx:if="{{isShowShare}}" class="share-btn share-icon" bindtap="handleShare"></view>
</view>
.search-box-component {
display: flex;
align-items: center;
padding: 28rpx 52rpx 26rpx 46rpx;
background-color: var(--themeColor);
}
.search-content {
flex: 1;
display: flex;
border-radius: 44rpx;
padding: 6rpx 6rpx 4rpx 0;
background-color:
align-items: center;
}
.search-content .search-left {
flex: 1;
height: 100%;
display: flex;
align-items: center;
}
.search-content .search-right {
font-size: 24rpx;
color:
width: 116rpx;
border-radius: 34rpx;
padding: 16rpx 32rpx 14rpx 34rpx;
background-color: var(--themeColor);
}
input { /* 光标颜色 */
caret-color: var(--themeColor);
}
.share-btn {
width: 44rpx;
height:44rpx;
margin-left: 44rpx;
}
.search-icon { /* 搜索 icon 图标 */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAYAAADhAJiYAAAAAXNSR0IArs4c6QAABN1JREFUWEfNl2uIVVUUx3/rzOOcO9pzwkjLpD5IKRSWpQVClmZJThraBymDxHykkb0sdc4+vkqKpiRTyMBKQuhhWagpVjRQWpJGlll9SCnJUEZJvefMOGfFOfdo87j3nntHYdwfz1577d/5r7XXXls4x4acYzyUDaRTqKKPPQq1RiE6GLgKOJ+Qk1j8g7IHpZFK/UDmB3vL/eGSgdRQiWVPRqUe5bLUjQQlZDPSOkdMy65U+8SgJCA1NYMgfBfoH69TWrH4mpBNWOEe1GpCtAqkNyo3gY4BLk/2CIFVXOzPklkEaWCpQOplxqPhapAaiBzKCqqsF2Tu8YPFnKtxhiMsQbk5sdsGFWPFHP+72LqiQGoyE0DXAoLojyjjxAS/p/1l23l17amIvApUA3vBHyKGI4V8FATKham1MVFmE/jjxXCsHJhTtmqcYah+ish5CJ+x2x8t79Gaz1deoDiBcXbHORMrE9zSVZjTUJ59DyofARais8UNGkoHWmBPJZQVuZzRgeWGqZCKauylIE8Dh3H8q2UORzvadlIoV2ecfbmjLa+IyT7elTDlW6PPcAEZJ8rBSwBPjG/SgXLSro+PdnVFn7TTVC6sGieCcFH2ief3SwcymeWg0xEaxfWHlbthmr0uqLqOsCIplOEAMc0/t13TOWSe8y3KYJS54vlL0jboyrwa5y+gNzBJjP92GtAhlFokHCdu8zo1WOAMp4f/jTzF8a4AdFyjxtkKRIXTE7d9HnVWyDgtEB17bhPjf6mePROVZcCbYvzJZwfIfh/kPlQbxAtmF1fIdU4gZBAdKW6wRY39JMiLwDYx/tCzBPQxyBiEheL69Wkh+wPlSoSHxPXfUi9zP6prUZoQv5cYTp4plBrnO+BG0JligteKAxlnIzAK5HUx2RlqevZCTh5AqQC9S0yw6UyA1FCD2ocQyaA6WrxgQ1rInkNYDPwpxr8iMlbjbAZGADv4yR9S6B4qBVRN9b1grQOawa/teCV1TuqFdn9Cibq+aO52Mf7nuqBmMGG4Pb71kWViso+Vsnneam3sD0HGAlvF+HekFsZYEdfZhHAnwnZx/SHxN89ZFNWmxME74M8q1kbkh8lEzdu23I9pnZhgfWlAuWr6fXwzq04TL1ipkWKe8wbwcOLkMCqrIdyM6H6ubf5NJuRvKXJhxwGnMUnmXZhgUERVElCiyEqUR3KxZoQY/6vcd3sGyiKQCzs42yDGH10olOo6axAmxv4qrVtl3okd+WwLN2gzsal1vgCGovovFhPFDT6JoZ6lFseZAtShXA/YIOvFZOs6V2Uc1FmVwETRekJM9uVC4MVb2MVcSksMdQ0Qgr5ENlgiS9v3Mfo8FxFwVExk8/9QE+fM8lyYkiFs4YhfJw1ky1LolHHSw0QvjruTb4eA5Vit66S+5Yc8itRA9UiQB5LTFPXjR8FaAzo1rmdFoFJfHUlCWmBPB5kP9GoDcQD4BbQJoRKVPqgOiIteNKK3mbIRZZp4/n71nEnRnVgMqiSg02oZeqLOo1g8iMZhLDQiFTditTZIfcvOdmFMgSoLqJ1j1+mLFd5Aq/TDkh6oHsOyDiLyK+GJnR3zqVSoLgMVUaekqXbha3NCuw0oqXW5nAo5IJ7fN5d23TzUVA+ksqJJ5mWjtrb7gTrq0e0KnfNA/wGmFP80PnQWigAAAABJRU5ErkJggg==');
background-size: cover;
}
.share-icon { /* 分享 icon 图标 */
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACwAAAAsCAYAAAAehFoBAAAAAXNSR0IArs4c6QAAA89JREFUWEfVmW/onmMUxz9fYs0mik2xQjOWRCgzCiPLvyy0Vytrq8UL4Q3N5I20qZE/8WKUKLU3yL9ITf7EhFKmpfmbGC2zIbMp9tXRuef+bc9z/+7n/t3P/fx23jxPXde5zuc+97nOua5zi4NMdJDxMjJg20cBG4BjgOWS3q7jvJ7Ats8GLsrFmj7Ur8CTkn7vBWL7OuCFHPsTuEbSW+NBj4GxfSzwDHDVeIo1x9dJurkP8JHAJ8Apg0DvA7Z9BLAROKsmTJ1pj0q6rd9E27OA8Gpt6DLwXcDqXPxv4FlgM7C3DlmPOTuB9ZL2VOkPCl0G/gw4IxdfJunphqADqw0CXQYOT0wBwrvTJf01sOUJKNSFLgM77e2WFPHcudSBHjmw7UOBk4DZwHHAuUB5o0bKu7rI050DZ8G4IvP8fOD0DMWqN7pVUmSU/yud7aGFhO1DwkvATcDlwOEDxtvHks7rBDgr2hrgtD6Qscm/Bb4EfgTmABeX5n4NLJD0/VCBbc8EnkrPlln/Ad4DXgXej2pXZCTbC4BXgGmpMAZ2aMC2zwReB44vkW4HHgeiXP+0v7frwA4F2PY5wJvA0QkVlfJh4F5Jv/UKi7qwrQPbPgH4EIjfkCjPiyXFA/QU25dkePQNg7Jiq2nN9hvAwjTwC3CppE1twbbqYdtL8sAU68bOX1h1vrUdheLTqg3W60Fb8XBWq88zJYWdtZLurMq1tiMvR6YIOSAb9NNtC/gG4Lk08jNwsqRd4wCH7cjPEe8rJW2tml+MtQX8EnBtLnqPpPvqGG8yZ8LAtqcDscGi3EYKO1HSD01gQsf2VOAhIE6Mt0va0WqWsH0l8Fou+oGkC5rCJvBSoLg8rJIUYbNP2vBwvP67c8XVkor/jbht3wo8ksr3S4qrW6vALwKLcsVFkl5uRJpKXQBvAU5Ne3MkfTXZgf/I5B8bboqkKBqNZageth3NkKKzs13SjMakXYREXhr/O1gDWyTNnezAcR4oYnaTpAl3jYYdEnGd+SK9ulHShZPdw3G5fAc4H7hF0rpJDVzARTmVtHuisKE/SEhEWorKt0dS1PORiO1oosSVKmSNpFVlkHJpjmNh9IdDZkv6ZhTEtp8AVqTtOyQ90A/4eeD6HHwXuFHSd11B2z4s7n958In/IfMkfdQPeF72CaLXVUhUsaIjNGz26JyWO0IbJEWXaIzs/8kg2vuPAWXoYYP2Wj8a6ZdJ2lYJHIO2I0WtzHZR0VvoAjrOIHG3Ww88KCne7gFS+YUoL5ddwIaNvZLGDb+mn7S6eojBPDwyqgrD/wKXbApLTtTD8QAAAABJRU5ErkJggg==');
background-size: cover;
}
Component({
/**
* 组件的属性列表
*/
properties: {
// 是否显示分享 按钮
isShowShare: {
type: Boolean,
value: false
}
},
/**
* 组件的初始数据
*/
data: {
inputValue: ''
},
/**
* 组件的方法列表
*/
methods: {
search(e) {
this.triggerEvent('handleSearch',e.detail.value)
},
handleClickSearch() {
this.triggerEvent('handleSearch',this.data.inputValue)
},
handleInputTxt(e) {
this.setData({ inputValue: e.detail.value })
},
handleShare() {
this.triggerEvent('handleShare','')
}
}
})
{
"component": true,
"usingComponents": {}
}
2. 父组件中
<!-- 没有分享按钮 -->
<search bind:handleSearch="handleSearch"></search>
<!-- 有分享按钮 -->
<search bind:handleSearch="handleSearch" bind:handleShare="handleShare" isShowShare="{{true}}"></search>
Page({
/**
* 页面的初始数据
*/
data: {
showPopup: false
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {}
handleSearch(e) {
console.log('点击了搜索',e.detail)
},
handleShare() {
console.log('点击了分享')
}
})
{
"usingComponents": {
"search": "/component/search/index"
},
"navigationBarTitleText": "search"
}