uview-plus组件库全面升级更新，订单结算判断支付方式是否可用代码调整，公众号关注二维码修改

2025-10-21 10:44:31 +08:00
parent 5d98b7efc2
commit 5f3a307fec
395 changed files with 31264 additions and 2477 deletions
--- a/uni_modules/uview-plus/components/u-search/props.js
+++ b/uni_modules/uview-plus/components/u-search/props.js
@@ -1,134 +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
-        },
-		value: {
-		    type: String,
-		    default: () => defProps.search.value
+	props: {
+		// #ifdef VUE3
+		// 绑定的值
+		modelValue: {
+			type: [String, Number],
+			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
-        }
-    }
-})
+		// #endif
+		// #ifdef VUE2
+		// 绑定的值
+		value: {
+			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
+		}
+	}
+})
--- a/uni_modules/uview-plus/components/u-search/search.js
+++ b/uni_modules/uview-plus/components/u-search/search.js
@@ -7,17 +7,18 @@
 * @lastTime     : 2021-08-20 17:19:45
 * @FilePath     : /u-view2.0/uview-ui/libs/config/props/search.js
 */
+import { t } from '../../libs/i18n'
 export default {
    // search
    search: {
        shape: 'round',
        bgColor: '#f2f2f2',
-        placeholder: '请输入关键字',
+        placeholder: t("up.search.placeholder"),
        clearabled: true,
        focus: false,
        showAction: true,
        actionStyle: {},
-        actionText: '搜索',
+        actionText: t("up.common.search"),
        inputAlign: 'left',
        inputStyle: {},
        disabled: false,
@@ -27,6 +28,7 @@ export default {
        color: '#606266',
        placeholderColor: '#909399',
        searchIcon: 'search',
+        iconPosition: 'left',
        margin: '0',
        animation: false,
        value: '',
--- a/uni_modules/uview-plus/components/u-search/u-search.vue
+++ b/uni_modules/uview-plus/components/u-search/u-search.vue
@@ -1,6 +1,7 @@
 <template>
 	<view
 	    class="u-search"
+		:class="[iconPosition === 'right' && 'u-search__reverse']"
 	    @tap="clickHandler"
 	    :style="[{
 			margin: margin,
@@ -20,12 +21,12 @@
 				</slot>
 			</template>
 			<view class="u-search__content__icon">
-				<u-icon
+				<up-icon
 					@tap="clickIcon"
 				    :size="searchIconSize"
 				    :name="searchIcon"
 				    :color="searchIconColor ? searchIconColor : color"
-				></u-icon>
+				></up-icon>
 			</view>
 			<input
 			    confirm-type="search"
@@ -54,16 +55,17 @@
 			/>
 			<view
 			    class="u-search__content__icon u-search__content__close"
-			    v-if="keyword && clearabled && focused"
+			    v-if="isShowClear"
 			    @click="clear"
 			>
-				<u-icon
+				<up-icon
 				    name="close"
 				    size="11"
 				    color="#ffffff"
 					customStyle="line-height: 12px"
-				></u-icon>
+				></up-icon>
 			</view>
+            <slot name="inputRight"></slot>
 		</view>
 		<text
 		    :style="[actionStyle]"
@@ -100,14 +102,16 @@
 	 * @property {String}			color				输入框字体颜色（默认 '#606266' ）
 	 * @property {String}			placeholderColor	placeholder的颜色（默认 '#909399' ）
 	 * @property {String}			searchIcon			输入框左边的图标，可以为uView图标名称或图片路径  (默认 'search' )
+	 * @property {String}			iconPosition		输入框图标位置，left-左边, right-右边  (默认 'left' )
 	 * @property {String}			margin				组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
 	 * @property {Boolean} 			animation			是否开启动画，见上方说明（默认 false ）
 	 * @property {String}			value				输入框初始值
 	 * @property {String | Number}	maxlength			输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )
 	 * @property {String | Number}	height				输入框高度，单位px（默认 64 ）
 	 * @property {String | Number}	label				搜索框左边显示内容
-	 * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面	
-	 * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点		
+	 * @property {Boolean}	        adjustPosition	    键盘弹起时，是否自动上推页面
+	 * @property {Boolean}	        autoBlur	        键盘收起时，是否自动失去焦点
+	 * @property {Boolean}	        onlyClearableOnFocused	是否仅在聚焦时显示清除控件（默认 true ）
 	 * @property {Object}			customStyle			定义需要用到的外部样式
 	 *
 	 * @event {Function} change 输入框内容发生变化时触发
@@ -122,7 +126,6 @@
 		data() {
 			return {
 				keyword: '',
-				showClear: false, // 是否显示右边的清除图标
 				show: false,
 				// 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
 				focused: this.focus
@@ -162,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'],
@@ -231,7 +246,6 @@
 </script>

 <style lang="scss" scoped>
-@import "../../libs/css/components.scss";
 $u-search-content-padding: 0 10px !default;
 $u-search-label-color: $u-main-color !default;
 $u-search-label-font-size: 14px !default;
@@ -328,5 +342,13 @@ $u-search-action-margin-left: 5px !default;
 			margin-left: $u-search-action-margin-left;
 		}
 	}
+
+	&__reverse &__content__icon {
+		order: 3;
+	}
+
+	&__reverse &__content__close {
+		order: 2;
+	}
 }
 </style>