<template> <view class="u-search"> <view class="u-search-input"> <van-search :value="searchKeyword" :placeholder="placeholder" use-action-slot class="van-search" @change="query" @search="onClickSearch"> <view class="u-search-text" slot="action" @tap="onClickSearch">搜索</view> </van-search> </view> </view> </template> <script> import VanSearch from '@/wxcomponents/vant/search/index' export default { options: { styleIsolation: 'shared' }, components: { VanSearch }, props: { value: String, placeholder: { type: String, default: '' } }, computed: {}, watch: { searchKeyword(val) { this.$emit('input', val) }, value(val) { this.searchKeyword = this.value } }, data() { return { searchKeyword: '' } }, created() { this.searchKeyword = this.value }, mounted() {}, methods: { query(val) { this.searchKeyword = val this.$emit('input', this.searchKeyword) this.$emit('change', { detail: this.searchKeyword }) }, onClickSearch() { this.$emit('search') } } } </script> <style lang="scss"> .u-search { .u-search-input { height: 64rpx; border-radius: 50rpx; background-color: #FFFFFF; box-shadow: 0 4rpx 4rpx 0 rgba(0, 0, 0, 0.15); border: 2rpx solid #D9D9D9; padding: 4rpx; overflow: hidden; .van-field__placeholder { font-size: $fontSize2; } .van-cell__left-icon-wrap { height: 50rpx; } .van-field__control { font-size: $fontSize2; height: 50rpx; } } .van-search { --search-padding: 0rpx; --search-input-height: 34rpx; --search-background-color: #FFFFFF; padding-right: 24rpx; font-size: $fontSize2; } .u-search-text { font-size: $fontSize2; } .van-search__action { color: #333333; } .van-icon { color: #D4D4D6; } .van-cell { padding: 2rpx 0rpx 2rpx !important; } } </style>