<template> <view class="container"> <view class="input-search"> <image class="wh30 mr20" @click="skipSearch" :src="search"></image> <input @click="skipSearch" v-model="searchValue" class="input" type="text" :placeholder="placeholder" @change="search_change"> <uni-icons @click="emit('camera')" class="icon" type="camera" size="30"></uni-icons> </view> <view @click="search_change(searchValue)" class="search wsn">搜索</view> </view> </template> <script setup> import { ref, defineEmits } from 'vue' import search from '@/static/search.png' const props = defineProps({ disabled: { type: Boolean, default: true }, placeholder: { type: String, default: '请输入搜索内容' } }) const searchValue = ref('') const emit = defineEmits(["search", "camera"]) //改变内容 const updateSearch = (val) => { searchValue.value = val search_change(val) } const search_change = (val) => { //搜索 console.log(val) //通知父组建改变 emit('search', val) } const skipSearch = () => { if (!props.disabled) { return } //跳转搜索 传递参数 uni.navigateTo({ url: '/pages/shop/search/index' }) } defineExpose({ updateSearch }) </script> <style lang="scss" scoped> .container { display: flex; justify-content: space-between; align-items: center; top: 10px; padding: 10rpx 20rpx; background-color: $uni-bg-color; //圆角 border-radius: 30rpx; .input-search { display: flex; flex-direction: row; align-items: center; width: 100%; padding-right: 10rpx; .icon { padding-right: 10rpx; } .overlay { width: calc(100% - 280rpx); position: absolute; height: 60rpx; opacity: 0; z-index: 2; } .input { width: 100%; } } .search { border-radius: 30rpx; opacity: 1; width: fit-content; padding: 14rpx 20rpx; font-size: 24rpx; line-height: 24rpx; color: #333333; /* 外部/按钮 */ background: linear-gradient(180deg, #FDDC85 -3%, #FFCE4F 100%); } } </style>