<template> <view class="serach"> <view class="content" :style="{'border-radius':radius+'px'}"> <!-- HM修改 增加进入输入状态的点击范围 --> <view class="content-box" :class="{'center':mode === 2}"> <text class="icon search"></text> <!-- HM修改 增加placeholder input confirm-type confirm--> <input :placeholder="placeholder" @input="inputChange" confirm-type="search" @confirm="triggerConfirm" class="input" :class="{'center':!active && mode === 2}" :focus="isFocus" v-model="inputVal" @focus="focus" @blur="blur" /> <!-- <view v-if="!active && mode === 2" class="input sub" @click="getFocus">请输入搜索内容</view> --> <!-- HM修改 @click换成@click.stop阻止冒泡 --> <text v-if="isDelShow" class="icon shanchu" @click.stop="clear"></text> </view> <view v-show="(active&&show&&button === 'inside')||(isDelShow && button === 'inside')" class="serachBtn" @click="search"> 搜索 </view> </view> <view v-if="button === 'outside'" class="button" :class="{'active':show||active}" @click="search"> <view class="button-item">{{!show?searchName:'搜索'}}</view> </view> </view> </template> <script> export default { props: { mode: { value: Number, default: 1 }, //HM修改 定义默认搜索关键词(水印文字) placeholder: { value: String, default: '请输入搜索内容' }, value: { type: String, default: false }, button: { value: String, default: 'outside' }, show: { value: Boolean, default: true }, radius: { value: String, default: 60 } }, data() { return { active: false, inputVal: '', searchName: '取消', isDelShow: false, isFocus: true }; }, methods: { //HM修改 触发组件confirm事件 triggerConfirm() { this.$emit('confirm', false); }, //HM修改 触发组件input事件 inputChange(event) { var keyword = event.detail.value; this.$emit('input', keyword); if (this.inputVal) { this.isDelShow = true; } }, focus() { this.active = true; //HM修改 增加获取焦点判断 if (this.inputVal) { this.isDelShow = true; } }, blur() { this.isFocus = false; if (!this.inputVal) { this.active = false; } }, clear() { //HM修改 收起键盘 uni.hideKeyboard(); this.isFocus = false; this.inputVal = ''; this.active = false; //HM修改 清空内容时候触发组件input this.$emit('input', ''); //this.$emit('search', '');//HM修改 清空内容时候不进行搜索 }, getFocus() { if (!this.isFocus) { this.isFocus = true; } }, search() { //HM修改 增加点击取消时候退出输入状态,内容为空时,输入默认关键字 if (!this.inputVal) { if (!this.show && this.searchName == '取消') { uni.hideKeyboard(); this.isFocus = false; this.active = false; return; } } this.$emit('search', this.inputVal ? this.inputVal : this.placeholder); } }, watch: { inputVal(newVal) { if (newVal) { this.searchName = '搜索'; //this.isDelShow = true; //HM修改 直接点击页面预设关键字样式异常,注销 } else { this.searchName = '取消'; this.isDelShow = false; } }, //HM修改 双向绑定 value(val) { this.inputVal = val; }, } }; </script> <style lang="scss"> .serach { display: flex; width: 100%; //border-bottom: 1px #f5f5f5 solid; //HM修改 去掉边框 box-sizing: border-box; font-size: $uni-font-size-base; .content { display: flex; align-items: center; width: 100%; height: 60upx; //border: 1px #ccc solid; //HM修改 去掉边框 background: #fff; overflow: hidden; transition: all 0.2s linear; border-radius: 30px; .content-box { width: 100%; display: flex; align-items: center; &.center { justify-content: center; } .icon { padding: 0 15upx; &.icon-shanchu1 { font-size: 38upx; &:before { content: "\e63c"; } } &.icon-shanchu11:before { content: "\e67d"; } } .input { width: 100%; max-width: 100%; line-height: 60upx; height: 60upx; transition: all 0.2s linear; &.center { width: 200upx; } &.sub { // position: absolute; width: auto; color: grey; } } } .serachBtn { height: 100%; flex-shrink: 0; padding: 0 30upx; //HM修改 按钮背景色 background: linear-gradient(to right, #ff9801, #ff570a); //background: $uni-color-success; line-height: 60upx; color: #fff; //border-left: 1px #ccc solid; //HM修改 去掉边框 transition: all 0.3s; } } .button { display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; width: 0; transition: all 0.2s linear; white-space: nowrap; overflow: hidden; &.active { padding-left: 15upx; width: 100upx; } } } //HM修改 把字体改成本地加载 @font-face { font-family: "iconfont"; src: url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOsAAsAAAAACEQAAANgAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqEJIM/ATYCJAMMCwgABCAFhG0HPhsNB1GU7UmJ7GuoApfOQUpYrKcJIgBWAcDFERMCvGHHmPjox3uPwQ0A4uG//Wj3zcyfVUu7STWKk9WaSikkiKRA59AJkWwS2t//tZ1iIZL2Oh5Jpkn7yf6J74ZYpGVSIkRIVHqCZwgQbMARBJjzGCg+NLcQ92SS9RpLbB21jtfXzdu7d759qqI5cg2+3jI2f0EJhGhi9RqdUM0+VTGbhBCZ/Z/DpU2Q5fNblssck6NeFMeBbB5jWLQ10AI5IL9leK1L4aBPE+g2pUY+ObPaSiUFmRSIxw8cQyplNEpDfugUasXKIt5pdKY36TPJ2+D38UsnOkmajMw8e3dsS72vO1/Lt7vpIXCnM0FeR8YySSFuV1quUqPIMlW3KdGa06sipKn8bUvAsWR1o/94iahIbi+YB3G6KC6nE3yNDVLXb6MOiH3A7ieMHU2urCoReeSE6SFd75ksp092tix8ZZUJcsqxZEoJe++le1+ujWSjLS/1Ut7hB32bZz2bL90cq6u228vIpfvGhY5DsSRFZHNXcnllV7DSkifvx23wlkbKyOy+AsCw+CkmfEDs3xNHN5qELq/Peg7SgwmA6XegqDLBDIsX+Bm86IL/x5SGIHRbp5sxG02DiKv0cQsoUSi4Cl4u2EegQhHLh5Ws/CGAFXuiy4MKmpjM69rzEEdHTnCsA9HfRSNCQUVMMHe2mKT/BVf+/UpBuWuBC0g9sbAHsGoXECeiRFWFQWoewqyyCyS0W0V+HcR2cpvpx/6Nx7uP350B39lTwJctVIHfXafztq3Bb+R2LCsWn2hzMTic43izG35VOKHbMmjBMew7XDbWOZfQaSyBpMMkZJ2mkQW7DI0e21B12oduS6bre4wgqihdWPREEAa9IOn3EbJBb2TBfqAx7g/VYGTodjnYscdsPOjuJRqMNpgX8KwkFkzPlTB/jc4hNCjND0h7pNzzQ3t1PR+fYow0xZz86HSYBQhKIpig8zAME0gp8dHihsucdptrd6tu1LCSSKo4RpCBIRswXQCPJRETXm1WKXx/DTkOQgZqKGky7iGS85oHbQ2tDsipJO5UcivX5I4cHYwJQCCJCJggEwppJAHS6mE+ZGEN7oBQqquJK4muksbysuj91kE3ckGOFDmKzlf3jdhyD+1yaG6TAA=='); } .icon { font-family: iconfont; font-size: 32upx; font-style: normal; color: #999; } </style>