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

<template>
    <view class="flex items-center justify-between px-12 mt-11 relative zi-10 mb-10">
        <view class="scs-search w-283 h-34">
            <view class="search-input" @click="onSearchClick">
                <image class="icon-search" src="https://cdn.his.cdwjyyh.com/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 colorf lh-30" @click.stop="onSearch">搜索</button>
            </view>
        </view>
        <view class="w-24 h-24 relative">
            <image class="w-all h-all" src="https://cdn.his.cdwjyyh.com/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="https://cdn.his.cdwjyyh.com/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)
            },
            onSearchClick() {
                this.$emit('onSearchClick')
            }
        }
    }
</script>