uview-plus 3.5.5 → 3.5.15

package/components/u-search/props.js

@@ -1,138 +1,156 @@
 import { defineMixin } from '../../libs/vue'
 import defProps from '../../libs/config/props.js'
+
 export const props = defineMixin({
-    props: {
-        // 搜索框形状，round-圆形，square-方形
-        shape: {
-            type: String,
-            default: () => defProps.search.shape
-        },
-        // 搜索框背景色，默认值#f2f2f2
-        bgColor: {
-            type: String,
-            default: () => defProps.search.bgColor
-        },
-        // 占位提示文字
-        placeholder: {
-            type: String,
-            default: () => defProps.search.placeholder
-        },
-        // 是否启用清除控件
-        clearabled: {
-            type: Boolean,
-            default: () => defProps.search.clearabled
-        },
-        // 是否自动聚焦
-        focus: {
-            type: Boolean,
-            default: () => defProps.search.focus
-        },
-        // 是否在搜索框右侧显示取消按钮
-        showAction: {
-            type: Boolean,
-            default: () => defProps.search.showAction
-        },
-        // 右边控件的样式
-        actionStyle: {
-            type: Object,
-            default: () => defProps.search.actionStyle
-        },
-        // 取消按钮文字
-        actionText: {
-            type: String,
-            default: () => defProps.search.actionText
-        },
-        // 输入框内容对齐方式，可选值为 left|center|right
-        inputAlign: {
-            type: String,
-            default: () => defProps.search.inputAlign
-        },
-        // input输入框的样式，可以定义文字颜色，大小等，对象形式
-        inputStyle: {
-            type: Object,
-            default: () => defProps.search.inputStyle
-        },
-        // 是否启用输入框
-        disabled: {
-            type: Boolean,
-            default: () => defProps.search.disabled
-        },
-        // 边框颜色
-        borderColor: {
-            type: String,
-            default: () => defProps.search.borderColor
-        },
-        // 搜索图标的颜色，默认同输入框字体颜色
-        searchIconColor: {
-            type: String,
-            default: () => defProps.search.searchIconColor
-        },
-        // 输入框字体颜色
-        color: {
-            type: String,
-            default: () => defProps.search.color
-        },
-        // placeholder的颜色
-        placeholderColor: {
-            type: String,
-            default: () => defProps.search.placeholderColor
-        },
-        // 左边输入框的图标，可以为uView图标名称或图片路径
-        searchIcon: {
-            type: String,
-            default: () => defProps.search.searchIcon
-        },
-        searchIconSize: {
-            type: [Number, String],
-            default: () => defProps.search.searchIconSize
-        },
-        // 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"、"30px 20px"等写法
-        margin: {
-            type: String,
-            default: () => defProps.search.margin
-        },
-        // 开启showAction时，是否在input获取焦点时才显示
-        animation: {
-            type: Boolean,
-            default: () => defProps.search.animation
-        },
-        // 输入框的初始化内容
-        modelValue: {
-            type: String,
-            default: () => defProps.search.value
-        },
+	props: {
+		// #ifdef VUE3
+		// 绑定的值
+		modelValue: {
+			type: [String, Number],
+			default: () => defProps.search.value
+		},
+		// #endif
+		// #ifdef VUE2
+		// 绑定的值
 		value: {
-		    type: String,
-		    default: () => defProps.search.value
-		},
-        // 输入框最大能输入的长度，-1为不限制长度(来自uniapp文档)
-        maxlength: {
-            type: [String, Number],
-            default: () => defProps.search.maxlength
-        },
-        // 搜索框高度，单位px
-        height: {
-            type: [String, Number],
-            default: () => defProps.search.height
-        },
-        // 搜索框左侧文本
-        label: {
-            type: [String, Number, null],
-            default: () => defProps.search.label
-        },
-        // 键盘弹起时，是否自动上推页面	
-        adjustPosition: {
-            type: Boolean,
-            default: () => true
-        },
-        // 键盘收起时，是否自动失去焦点	
-        autoBlur: {
-            type: Boolean,
-            default: () => false
-        },
-        iconPosition: {
-            type: String,
-            default: () => defProps.search.iconPosition
-        }
-    }
-})
+			type: [String, Number],
+			default: () => defProps.search.value
+		},
+		// #endif
+		// 搜索框形状，round-圆形，square-方形
+		shape: {
+			type: String,
+			default: () => defProps.search.shape
+		},
+		// 搜索框背景色
+		bgColor: {
+			type: String,
+			default: () => defProps.search.bgColor
+		},
+		// 占位提示文字
+		placeholder: {
+			type: String,
+			default: () => defProps.search.placeholder
+		},
+		// 是否启用清除控件
+		clearabled: {
+			type: Boolean,
+			default: () => defProps.search.clearabled
+		},
+		// 是否仅聚焦时显示清除控件
+		onlyClearableOnFocused: {
+			type: Boolean,
+			default: true
+		},
+		// 是否自动聚焦
+		focus: {
+			type: Boolean,
+			default: () => defProps.search.focus
+		},
+		// 是否在搜索框右侧显示取消按钮
+		showAction: {
+			type: Boolean,
+			default: () => defProps.search.showAction
+		},
+		// 右侧取消按钮文字
+		actionText: {
+			type: String,
+			default: () => defProps.search.actionText
+		},
+		// 搜索框左侧文本
+		label: {
+			type: [String, Number, null],
+			default: () => defProps.search.label
+		},
+		// 输入框内容对齐方式，可选值为：left|center|right
+		inputAlign: {
+			type: String,
+			default: () => defProps.search.inputAlign
+		},
+		// 是否启用输入框
+		disabled: {
+			type: Boolean,
+			default: () => defProps.search.disabled
+		},
+		// 开启showAction时，是否在input获取焦点时才显示
+		animation: {
+			type: Boolean,
+			default: () => defProps.search.animation
+		},
+		// 边框颜色，只要配置了颜色，才会有边框
+		borderColor: {
+			type: String,
+			default: () => defProps.search.borderColor
+		},
+		// 搜索图标的颜色，默认同输入框字体颜色
+		searchIconColor: {
+			type: String,
+			default: () => defProps.search.searchIconColor
+		},
+		// 搜索图标的大小
+		searchIconSize: {
+			type: [Number, String],
+			default: () => defProps.search.searchIconSize
+		},
+		// 输入框字体颜色
+		color: {
+			type: String,
+			default: () => defProps.search.color
+		},
+		// placeholder的颜色
+		placeholderColor: {
+			type: String,
+			default: () => defProps.search.placeholderColor
+		},
+		// 左边输入框的图标，可以为uView图标名称或图片路径
+		searchIcon: {
+			type: String,
+			default: () => defProps.search.searchIcon
+		},
+		// 组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"
+		margin: {
+			type: String,
+			default: () => defProps.search.margin
+		},
+		// 应该是uView-plus版本新增的，用于控制搜索图标的插槽位置
+		iconPosition: {
+			type: String,
+			default: () => defProps.search.iconPosition
+		},
+		// 输入框最大能输入的长度，-1为不限制长度
+		maxlength: {
+			type: [String, Number],
+			default: () => defProps.search.maxlength
+		},
+		// 输入框高度，单位px
+		height: {
+			type: [String, Number],
+			default: () => defProps.search.height
+		},
+		// 键盘弹起时，是否自动上推页面
+		adjustPosition: {
+			type: Boolean,
+			default: () => defProps.search.adjustPosition
+		},
+		// 键盘收起时，是否自动失去焦点
+		autoBlur: {
+			type: Boolean,
+			default: () => defProps.search.autoBlur
+		},
+		// 输入框的样式，对象形式
+		inputStyle: {
+			type: Object,
+			default: () => defProps.search.inputStyle
+		},
+		// 右侧控件的样式，对象形式
+		actionStyle: {
+			type: Object,
+			default: () => defProps.search.actionStyle
+		},
+		// 自定义样式，对象形式
+		customStyle: {
+			type: Object,
+			default: () => defProps.search.customStyle
+		}
+	}
+})

package/components/u-search/u-search.vue

@@ -55,7 +55,7 @@
 			/>
 			<view
 			    class="u-search__content__icon u-search__content__close"
-			    v-if="keyword && clearabled && focused"
+			    v-if="isShowClear"
 			    @click="clear"
 			>
 				<up-icon
@@ -111,6 +111,7 @@
 	 * @property {String | Number}	label				搜索框左边显示内容
 	 * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面
 	 * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点
+	 * @property {Boolean}	        onlyClearableOnFocused	是否仅在聚焦时显示清除控件（默认 true ）
 	 * @property {Object}			customStyle			定义需要用到的外部样式
 	 *
 	 * @event {Function} change 输入框内容发生变化时触发
@@ -125,7 +126,6 @@
 		data() {
 			return {
 				keyword: '',
-				showClear: false, // 是否显示右边的清除图标
 				show: false,
 				// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
 				focused: this.focus
@@ -165,6 +165,18 @@
 		computed: {
 			showActionBtn() {
 				return !this.animation && this.showAction
+			},
+			// 是否显示清除控件
+			isShowClear() {
+				const { clearabled, focused, keyword, onlyClearableOnFocused } = this;
+				if (!clearabled) {
+					return false;
+				}
+				if (onlyClearableOnFocused) {
+					return !!focused && keyword !== "";
+				} else {
+					return keyword !== "";
+				}
 			}
 		},
 		emits: ['clear', 'search', 'custom', 'focus', 'blur', 'click', 'clickIcon', 'update:modelValue', 'change'],