fanghuayuexuan/pages/home/components/home-search.vue

<template>
    <view class="flex items-center justify-between px-12 mt-11 relative zi-10">
        <view class="scs-search w-283 h-34">
            <view class="search-input">
                <image class="icon-search" src="/static/images/search.png" mode="aspectFit"></image>
                <input class="input-value" type="text" v-model="keyword" placeholder="搜索商品" confirm-type="search"
                    @confirm="onSearch" />
                <button class="w-60 h-30 rounded-15 fs-14 color-white lh-30" @click="onSearch">搜索</button>
            </view>
        </view>
        <view class="w-24 h-24 relative">
            <image class="w-all h-all" src="/static/images/share_icon.png" mode=""></image>
            <button class="w-all h-all absolute top-0 left-0 opacity-0" open-type="contact"></button>
        </view>
        <view class="w-24 h-24 relative">
            <image class="w-all h-all" src="/static/images/new_hall_icon.png" mode=""></image>
            <button class="w-all h-all absolute top-0 left-0 opacity-0" open-type="contact"></button>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                keyword: '',
            }
        },
        methods: {
            onSearch() {
               this.$emit('onSearch', this.keyword)
            }
        }
    }
</script>