<template> <view class="u-search" @tap="clickHandler" :style="{ margin: margin, }"> <view class="u-content" :style="{ backgroundColor: bgColor, borderRadius: shape == 'round' ? '100rpx' : '10rpx', border: borderStyle, height: height + 'rpx' }" > <view class="u-icon-wrap"> <u-icon class="u-clear-icon" :size="30" :name="searchIcon" :color="searchIconColor ? searchIconColor : color"></u-icon> </view> <input confirm-type="search" @blur="blur" :value="valueCom" @confirm="search" @input="inputChange" :disabled="disabled" @focus="getFocus" :focus="focus" :maxlength="maxlength" placeholder-class="u-placeholder-class" :placeholder="placeholder" :placeholder-style="`color: ${placeholderColor}`" class="u-input" type="text" :style="[{ textAlign: inputAlign, color: color, backgroundColor: bgColor, }, inputStyle]" /> <view class="u-close-wrap" v-if="keyword && clearabled && focused" @tap="clear"> <u-icon class="u-clear-icon" name="close-circle-fill" size="34" color="#c0c4cc"></u-icon> </view> </view> <view :style="[actionStyle]" class="u-action" :class="[showActionBtn || show ? 'u-action-active' : '']" @tap.stop.prevent="custom" >{{ actionText }}</view> </view> </template> <script> /** * search 搜索框 * @description 搜索组件,集成了常见搜索框所需功能,用户可以一键引入,开箱即用。 * @tutorial https://www.uviewui.com/components/search.html * @property {String} shape 搜索框形状,round-圆形,square-方形(默认round) * @property {String} bg-color 搜索框背景颜色(默认#f2f2f2) * @property {String} border-color 边框颜色,配置了颜色,才会有边框 * @property {String} placeholder 占位文字内容(默认“请输入关键字”) * @property {Boolean} clearabled 是否启用清除控件(默认true) * @property {Boolean} focus 是否自动获得焦点(默认false) * @property {Boolean} show-action 是否显示右侧控件(默认true) * @property {String} action-text 右侧控件文字(默认“搜索”) * @property {Object} action-style 右侧控件的样式,对象形式 * @property {String} input-align 输入框内容水平对齐方式(默认left) * @property {Object} input-style 自定义输入框样式,对象形式 * @property {Boolean} disabled 是否启用输入框(默认false) * @property {String} search-icon-color 搜索图标的颜色,默认同输入框字体颜色 * @property {String} color 输入框字体颜色(默认#606266) * @property {String} placeholder-color placeholder的颜色(默认#909399) * @property {String} search-icon 输入框左边的图标,可以为uView图标名称或图片路径 * @property {String} margin 组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx" * @property {Boolean} animation 是否开启动画,见上方说明(默认false) * @property {String} value 输入框初始值 * @property {String | Number} maxlength 输入框最大能输入的长度,-1为不限制长度 * @property {Boolean} input-style input输入框的样式,可以定义文字颜色,大小等,对象形式 * @property {String | Number} height 输入框高度,单位rpx(默认64) * @event {Function} change 输入框内容发生变化时触发 * @event {Function} search 用户确定搜索时触发,用户按回车键,或者手机键盘右下角的"搜索"键时触发 * @event {Function} custom 用户点击右侧控件时触发 * @event {Function} clear 用户点击清除按钮时触发 * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search> */ export default { name: "u-search", emits: ["update:modelValue", "input", "change", "search", "custom", "clear", "focus", "blur"], props: { // 输入框的初始化内容 value: { type: String, default: '' }, modelValue: { type: String, default: '' }, // 搜索框形状,round-圆形,square-方形 shape: { type: String, default: 'round' }, // 搜索框背景色,默认值#f2f2f2 bgColor: { type: String, default: '#f2f2f2' }, // 占位提示文字 placeholder: { type: String, default: '请输入关键字' }, // 是否启用清除控件 clearabled: { type: Boolean, default: true }, // 是否自动聚焦 focus: { type: Boolean, default: false }, // 是否在搜索框右侧显示取消按钮 showAction: { type: Boolean, default: true }, // 右边控件的样式 actionStyle: { type: Object, default() { return {}; } }, // 取消按钮文字 actionText: { type: String, default: '搜索' }, // 输入框内容对齐方式,可选值为 left|center|right inputAlign: { type: String, default: 'left' }, // 是否启用输入框 disabled: { type: Boolean, default: false }, // 开启showAction时,是否在input获取焦点时才显示 animation: { type: Boolean, default: false }, // 边框颜色,只要配置了颜色,才会有边框 borderColor: { type: String, default: 'none' }, // 搜索框高度,单位rpx height: { type: [Number, String], default: 64 }, // input输入框的样式,可以定义文字颜色,大小等,对象形式 inputStyle: { type: Object, default() { return {} } }, // 输入框最大能输入的长度,-1为不限制长度(来自uniapp文档) maxlength: { type: [Number, String], default: '-1' }, // 搜索图标的颜色,默认同输入框字体颜色 searchIconColor: { type: String, default: '' }, // 输入框字体颜色 color: { type: String, default: '#606266' }, // placeholder的颜色 placeholderColor: { type: String, default: '#909399' }, // 组件与其他上下左右元素之间的距离,带单位的字符串形式,如"30rpx"、"30rpx 20rpx"等写法 margin: { type: String, default: '0' }, // 左边输入框的图标,可以为uView图标名称或图片路径 searchIcon: { type: String, default: 'search' } }, data() { return { keyword: '', showClear: false, // 是否显示右边的清除图标 show: false, // 标记input当前状态是否处于聚焦中,如果是,才会显示右侧的清除控件 focused: this.focus // 绑定输入框的值 // inputValue: this.value }; }, watch: { keyword(nVal) { // 双向绑定值,让v-model绑定的值双向变化 this.$emit('input', nVal); this.$emit("update:modelValue", nVal); // 触发change事件,事件效果和v-model双向绑定的效果一样,让用户多一个选择 this.$emit('change', nVal); }, valueCom: { immediate: true, handler(nVal) { this.keyword = nVal; } } }, computed: { valueCom() { // #ifdef VUE2 return this.value; // #endif // #ifdef VUE3 return this.modelValue; // #endif }, showActionBtn() { if (!this.animation && this.showAction) return true; else return false; }, // 样式,根据用户传入的颜色值生成,如果不传入,默认为none borderStyle() { if (this.borderColor) return `1px solid ${this.borderColor}`; else return 'none'; }, }, methods: { // 目前HX2.6.9 v-model双向绑定无效,故监听input事件获取输入框内容的变化 inputChange(e) { this.keyword = e.detail.value; }, // 清空输入 // 也可以作为用户通过this.$refs形式调用清空输入框内容 clear() { this.keyword = ''; // 延后发出事件,避免在父组件监听clear事件时,value为更新前的值(不为空) this.$nextTick(() => { this.$emit('clear'); }) }, // 确定搜索 search(e) { this.$emit('search', e.detail.value); try{ // 收起键盘 uni.hideKeyboard(); }catch(e){} }, // 点击右边自定义按钮的事件 custom() { this.$emit('custom', this.keyword); try{ // 收起键盘 uni.hideKeyboard(); }catch(e){} }, // 获取焦点 getFocus() { this.focused = true; // 开启右侧搜索按钮展开的动画效果 if (this.animation && this.showAction) this.show = true; this.$emit('focus', this.keyword); }, // 失去焦点 blur() { // 最开始使用的是监听图标@touchstart事件,自从hx2.8.4后,此方法在微信小程序出错 // 这里改为监听点击事件,手点击清除图标时,同时也发生了@blur事件,导致图标消失而无法点击,这里做一个延时 setTimeout(() => { this.focused = false; }, 100) this.show = false; this.$emit('blur', this.keyword); }, // 点击搜索框,只有disabled=true时才发出事件,因为禁止了输入,意味着是想跳转真正的搜索页 clickHandler() { if(this.disabled) this.$emit('click'); } } }; </script> <style lang="scss" scoped> @import "../../libs/css/style.components.scss"; .u-search { @include vue-flex; align-items: center; flex: 1; } .u-content { @include vue-flex; align-items: center; padding: 0 18rpx; flex: 1; } .u-clear-icon { @include vue-flex; align-items: center; } .u-input { flex: 1; font-size: 28rpx; line-height: 1; margin: 0 10rpx; color: $u-tips-color; } .u-close-wrap { width: 40rpx; height: 100%; @include vue-flex; align-items: center; justify-content: center; border-radius: 50%; } .u-placeholder-class { color: $u-tips-color; } .u-action { font-size: 28rpx; color: $u-main-color; width: 0; overflow: hidden; transition: all 0.3s; white-space: nowrap; text-align: center; } .u-action-active { width: 80rpx; margin-left: 10rpx; } </style>