Uniapp custom search box adaptation applet alignment capsule

demand ：uniapp Framework development Customize the search bar, compile the wechat applet and align it with the capsule bag on the right ！

<template>
    <view class="navbar">
        <view class="navbar-fixed">
            <!--  Status bar applet support height  -->
            <view :style="{height:statusBarHeight+'px'}"></view>
            <view class="navbar-content" :style="{height:navBarHeight+'px',width:windowWidth+'px'}">
                <view class="navbar-search">
                    <view class="navbar-search_icon">
                       <uni-icons type="search" size="16" color="#999"></uni-icons>
                    </view>
                    <view class="navbar-serach">
                        <input class="navbar-search_text" type="text" v-model="val" placeholder=" Search for good things you want " />
                    </view>
                </view>
            </view>
        </view>
        <!--  Need to add placeholder height    Status bar height + Navigation bar height （ Otherwise, below tab Will collapse ）-->
        <view :style="{height: statusBarHeight+navBarHeight+'px'}"></view>
    </view>
</template>

<script>
    export default {
    
        name: 'navbar',
        data() {
    
            return {
    
                statusBarHeight: 20,/*  Status bar height  */
                navBarHeight: 45,/*  Navigation bar height  */
                windowWidth: 375,/*  Window width  */
               /*  Set the default height of the status bar  */
                val: ''/*  The value of the navigation bar search box  */
            };
        },
        created() {
    
            //  Get mobile system information 
            const info = uni.getSystemInfoSync()
            //  Set the height of the status bar （H5 There is no status bar at the top. The applet has a status bar that needs to be raised ）
            this.statusBarHeight = info.statusBarHeight
            this.windowWidth = info.windowWidth
            //  except h5 app mp-alipay In case of execution 
            // #ifndef H5 || APP-PLUS || MP-ALIPAY
            //  Get the location of the capsule 
            const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
            console.log(menuButtonInfo);
            // ( Capsule bottom height  -  The height of the status bar ) + ( Capsule top height  -  Height in the status bar ) =  The height of the navigation bar 
            this.navBarHeight = (menuButtonInfo.bottom - info.statusBarHeight) + (menuButtonInfo.top - info.statusBarHeight)
            this.windowWidth = menuButtonInfo.left
            // #endif
        }
    }
</script>

<style lang="less">
    @import './../../uni.less';
    .navbar {
    
        .navbar-fixed {
    
            position: fixed;
            top: 0;
            left: 0;
            z-index: 99;
            width: 100%;
            background-color: @mk-base-color;
            .navbar-content {
    
                display: flex;
                justify-content: center;
                align-items: center;
                padding: 0 15px;
                height: 45px;
                box-sizing: border-box;
                .navbar-search {
    
                    display: flex;
                    align-items: center;
                    padding: 0 10px;
                    width: 100%;
                    height: 30px;
                    border-radius: 30px;
                    background-color: #fff;
                    .navbar-search_icon {
    
                        // width: 10px;
                        // height: 10px;
                        margin-right: 10px;
                    }
                    .navbar-search_text {
    
                        width: 100%;
                        font-size: 14px;
                        color: #999;
                    }
                }
                &.search {
    
                   padding-left: 0;
                    .navbar-content__search-icons {
    
                       margin-left: 10px;
                        margin-right: 10px;
                    }
                    .navbar-search {
    
                        border-radius: 5px;
                    }
                }
            }
        }
    }
</style>