<template> <view> <view class="search-content pr"> <view class="search-icon pa" @click="search_input_event"> <view class="search icon icon-color icon-font"></view> </view> <input type="text" :disabled="disableInput" confirm-type="search" class="round " :placeholder="propPlaceholder" :placeholder-class="propPlaceholderClass" v-model="keywords" @confirm="search_input_event" style="color:#666;background:#ffffff;"> </view> </view> </template> <script> const app = getApp(); export default { data() { return { keywords:"", }; }, components: {}, props: { propPlaceholder: { type: String, default: '输入商品名称搜索' }, propPlaceholderClass: { type: String, default: 'cr-grey' }, propIsRequired: { type: Boolean, default: true }, disableInput:{ type: Boolean, default: false } }, // watch:{ // propKeyWords:{ // handler(n,o){ // this.keywords = n; // }, // immediate:true // } // }, methods: { // 搜索事件 search_input_event() { this.keywords = this.keywords || null; // 是否验证必须要传值 if (this.propIsRequired && this.keywords == null) { uni.showToast({ icon: 'none', title: "请输入搜索关键字", duration: 1000 }); return false; } this.$emit('onsearch', this.keywords);//回调 }, }, destroyed() { this.keywords = "" } }; </script> <style> .cr-grey{ display: flex; flex-direction: column; justify-content: center; } .round{ border-radius: 50rpx ; } .pr{ position: relative; } .pa{ position: absolute; } .dis-inline-block{ display: inline-block; } .search-content .search-icon { text-align: center; height: 40px; line-height: 40px; width: 30px; } .search-content .search-icon .icon-color{ color: #666; } .search-content .search-icon .icon-font{ font-size:20px ; } .search-content .round { font-size: 16px; padding: 0 15px 0 30px; box-sizing: border-box; height: 40px; line-height: 40px; } </style>