input和textarea组件添加formatter参数

a1035909950 · Nov 11, 2021 · 9c01230 · 9c01230
1 parent da8c75d
commit 9c01230
Show file tree

Hide file tree

Showing 47 changed files with 190 additions and 102 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,4 +1,6 @@
 /unpackage/dist/*
-/node_modules/*
-/.idea/*
-deploy.sh
+/unpackage/cache/*
+/unpackage/release/*
+/node_modules/*
+/.idea/*
+deploy.sh
diff --git a/pages/componentsC/textarea/textarea.nvue b/pages/componentsC/textarea/textarea.nvue
@@ -5,7 +5,7 @@
 			<view class="u-demo-block__content">
 				<u--textarea
 					v-model="value1"
-					placeholder="请输入内容"
+					placeholder="请输入内容"
 				></u--textarea>
 			</view>
 		</view>
@@ -63,7 +63,12 @@
 				value4: '',
 				value5: ''
 			}
-		},
+		},
+		methods: {
+			formatter(value) {
+				return value.replace(/[^0-9]/ig,"")
+			}
+		}
 	}
 </script>
 

diff --git a/uni_modules/uview-v2/components/u--input/u--input.vue b/uni_modules/uview-v2/components/u--input/u--input.vue
@@ -34,7 +34,8 @@
 		:border="border"
 		:readonly="readonly"
 		:shape="shape"
-		:customStyle="customStyle"
+		:customStyle="customStyle"
+		:formatter="formatter"
 		@focus="$emit('focus')"
 		@blur="$emit('blur')"
 		@keyboardheightchange="$emit('keyboardheightchange')"

diff --git a/uni_modules/uview-v2/components/u--textarea/u--textarea.vue b/uni_modules/uview-v2/components/u--textarea/u--textarea.vue
@@ -19,7 +19,8 @@
 		:holdKeyboard="holdKeyboard"
 		:maxlength="maxlength"
 		:border="border"
-		:customStyle="customStyle"
+		:customStyle="customStyle"
+		:formatter="formatter"
 		@focus="$emit('focus')"
 		@blur="$emit('blur')"
 		@linechange="$emit('linechange')"

diff --git a/uni_modules/uview-v2/components/u-action-sheet/props.js b/uni_modules/uview-v2/components/u-action-sheet/props.js
@@ -41,9 +41,9 @@ export default {
 			default: uni.$u.props.actionSheet.openType
 		},
 		// 点击遮罩是否允许关闭 (默认true)
-		closeOnClickOverly: {
+		closeOnClickOverlay: {
 			type: Boolean,
-			default: uni.$u.props.actionSheet.closeOnClickOverly
+			default: uni.$u.props.actionSheet.closeOnClickOverlay
 		},
 		// 是否显示圆角 (默认false)
 		round: {

diff --git a/uni_modules/uview-v2/components/u-action-sheet/u-action-sheet.vue b/uni_modules/uview-v2/components/u-action-sheet/u-action-sheet.vue
@@ -4,7 +4,7 @@
 	    :show="show"
 	    mode="bottom"
 	    @close="close"
-	    :closeOnClickOverly="closeOnClickOverly"
+	    :closeOnClickOverlay="closeOnClickOverlay"
 	    :safeAreaInsetBottom="safeAreaInsetBottom"
 	    :round="round"
 	>
@@ -124,7 +124,7 @@
 	 * @property {Boolean}			closeOnClickAction	点击某个菜单项时是否关闭弹窗 （默认 true ）
 	 * @property {Boolean}			safeAreaInsetBottom	处理底部安全区 （默认 true ）
 	 * @property {String}			openType			小程序的打开方式 (contact | launchApp | getUserInfo | openSetting ｜getPhoneNumber ｜error )
-	 * @property {Boolean}			closeOnClickOverly	点击遮罩是否允许关闭  (默认 true )
+	 * @property {Boolean}			closeOnClickOverlay	点击遮罩是否允许关闭  (默认 true )
 	 * @property {Boolean}			round				是否显示圆角  (默认 false )
 	 * @property {String}			lang				指定返回用户信息的语言，zh_CN 简体中文，zh_TW 繁体中文，en 英文
 	 * @property {String}			sessionFrom			会话来源，openType="contact"时有效
@@ -169,7 +169,7 @@
 		methods: {
 			close() {
 				// 允许点击遮罩关闭时，才发出close事件
-				if(this.closeOnClickOverly) {
+				if(this.closeOnClickOverlay) {
 					this.$emit('close')
 				}
 			},

diff --git a/uni_modules/uview-v2/components/u-calendar/props.js b/uni_modules/uview-v2/components/u-calendar/props.js
@@ -96,9 +96,9 @@ export default {
 			default: uni.$u.props.calendar.show
 		},
 		// 是否允许点击遮罩关闭日历
-		closeOnClickOverly: {
+		closeOnClickOverlay: {
 			type: Boolean,
-			default: uni.$u.props.calendar.closeOnClickOverly
+			default: uni.$u.props.calendar.closeOnClickOverlay
 		},
 		// 是否为只读状态，只读状态下禁止选择日期
 		readonly: {

diff --git a/uni_modules/uview-v2/components/u-calendar/u-calendar.vue b/uni_modules/uview-v2/components/u-calendar/u-calendar.vue
@@ -5,7 +5,7 @@
 		closeable
 		@close="close"
 		round
-		:closeOnClickOverly="closeOnClickOverly"
+		:closeOnClickOverlay="closeOnClickOverlay"
 	>
 		<view class="u-calendar">
 			<uHeader
@@ -91,7 +91,7 @@
 	 * @property {String}				confirmText			确定按钮的文字 (默认 '确定' )
 	 * @property {String}				confirmDisabledText	确认按钮处于禁用状态时的文字 (默认 '确定' )
 	 * @property {Boolean}				show				是否显示日历弹窗 (默认 false )
-	 * @property {Boolean}				closeOnClickOverly	是否允许点击遮罩关闭日历 (默认 false )
+	 * @property {Boolean}				closeOnClickOverlay	是否允许点击遮罩关闭日历 (默认 false )
 	 * @property {Boolean}				readonly	        是否为只读状态，只读状态下禁止选择日期 (默认 false )
 	 * @property {String | Number}		maxRange	        日期区间最多可选天数，默认无限制，mode = range时有效
 	 * @property {String}				rangePrompt	        范围选择超过最多可选天数时的提示文案，mode = range时有效
@@ -122,7 +122,9 @@
 				selected: [],
 				// 如果没有设置最大可选日期，默认为往后推3个月
 				maxMonth: 3,
-				scrollIntoView: ''
+				scrollIntoView: '',
+				// 过滤处理方法
+				innerFormatter: value => value
 			}
 		},
 		watch: {
@@ -171,6 +173,10 @@
 			this.init()
 		},
 		methods: {
+			// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+			setFormatter(e) {
+				this.innerFormatter = e
+			},
 			// month组件内部选择日期后，通过事件通知给父组件
 			monthSelected(e) {
 				this.selected = e
@@ -238,10 +244,8 @@
 								dot: false,
 								month: dayjs(minDate).add(i, "month").month() + 1
 							}
-							if (this.formatter) {
-								config = this.formatter(config)
-							}
-							return config
+							const formatter = this.formatter || this.innerFormatter
+							return formatter(config)
 						}),
 						// 当前所属的月份
 						month: dayjs(minDate).add(i, "month").month() + 1,

diff --git a/uni_modules/uview-v2/components/u-datetime-picker/props.js b/uni_modules/uview-v2/components/u-datetime-picker/props.js
@@ -103,9 +103,9 @@ export default {
 			default: uni.$u.props.datetimePicker.visibleItemCount
 		},
 		// 是否允许点击遮罩关闭选择器
-		closeOnClickOverly: {
+		closeOnClickOverlay: {
 			type: Boolean,
-			default: uni.$u.props.datetimePicker.closeOnClickOverly
+			default: uni.$u.props.datetimePicker.closeOnClickOverlay
 		},
 		// 各列的默认索引
 		defaultIndex: {

diff --git a/uni_modules/uview-v2/components/u-datetime-picker/u-datetime-picker.vue b/uni_modules/uview-v2/components/u-datetime-picker/u-datetime-picker.vue
@@ -2,7 +2,7 @@
 	<u-picker
 		ref="picker"
 		:show="show"
-		:closeOnClickOverly="closeOnClickOverly"
+		:closeOnClickOverlay="closeOnClickOverlay"
 		:columns="columns"
 		:defaultIndex="innerDefaultIndex"
 		@close="close"
@@ -48,7 +48,7 @@
 	 * @property {String}			cancelColor			取消按钮的颜色  ( 默认 '#909193' )
 	 * @property {String}			confirmColor		确认按钮的颜色  ( 默认 '#3c9cff' )
 	 * @property {String | Number}	visibleItemCount	每列中可见选项的数量  ( 默认 5 )
-	 * @property {Boolean}			closeOnClickOverly	是否允许点击遮罩关闭选择器  ( 默认 false )
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器  ( 默认 false )
 	 * @property {Array}			defaultIndex		各列的默认索引
 	 * @event {Function} close 关闭选择器时触发
 	 * @event {Function} confirm 点击确定按钮，返回当前选择的值
@@ -63,9 +63,7 @@
 			return {
 				columns: [],
 				innerDefaultIndex: [],
-				innerFormatter: (type, value) => {
-					return value
-				}
+				innerFormatter: (type, value) => value
 			}
 		},
 		watch: {
@@ -98,7 +96,7 @@
 			},
 			// 关闭选择器
 			close() {
-				if (this.closeOnClickOverly) {
+				if (this.closeOnClickOverlay) {
 					this.$emit('close')
 				}
 			},

diff --git a/uni_modules/uview-v2/components/u-dropdown-item/props.js b/uni_modules/uview-v2/components/u-dropdown-item/props.js
@@ -1,36 +1,36 @@
 export default {
 	props: {
-		// 当前选中项的value值
-		value: {
-			type: [Number, String, Array],
-			default: ''
-		},
-		// 菜单项标题
-		title: {
-			type: [String, Number],
-			default: ''
-		},
-		// 选项数据，如果传入了默认slot，此参数无效
-		options: {
-			type: Array,
-			default () {
-				return []
-			}
-		},
-		// 是否禁用此菜单项
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		// 下拉弹窗的高度
-		height: {
-			type: [Number, String],
-			default: 'auto'
-		},
-		// 点击遮罩是否可以收起弹窗
-		closeOnClickOverly: {
-			type: Boolean,
-			default: true
+		// 当前选中项的value值
+		value: {
+			type: [Number, String, Array],
+			default: ''
+		},
+		// 菜单项标题
+		title: {
+			type: [String, Number],
+			default: ''
+		},
+		// 选项数据，如果传入了默认slot，此参数无效
+		options: {
+			type: Array,
+			default () {
+				return []
+			}
+		},
+		// 是否禁用此菜单项
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		// 下拉弹窗的高度
+		height: {
+			type: [Number, String],
+			default: 'auto'
+		},
+		// 点击遮罩是否可以收起弹窗
+		closeOnClickOverlay: {
+			type: Boolean,
+			default: true
 		}
 	}
 }
diff --git a/uni_modules/uview-v2/components/u-dropdown-item/u-dropdown-item.vue b/uni_modules/uview-v2/components/u-dropdown-item/u-dropdown-item.vue
@@ -3,7 +3,7 @@
 		<u-overlay
 			customStyle="top: 126px"
 			:show="show"
-			:closeOnClickOverly="closeOnClickOverly"
+			:closeOnClickOverlay="closeOnClickOverlay"
 			@click="overlayClick"
 		></u-overlay>
 		<view

diff --git a/uni_modules/uview-v2/components/u-input/u-input.vue b/uni_modules/uview-v2/components/u-input/u-input.vue
@@ -101,7 +101,8 @@ import props from "./props.js";
  * @property {String}			inputAlign				输入框内容对齐方式（ 默认 'left' ）
  * @property {Boolean}			autosize				是否自适应内容高度，只对type=textarea有效，可传入对象,如{ maxHeight: 100, minHeight: 50 } （ 默认 false ）
  * @property {String | Number}	fontSize				输入框字体的大小 （ 默认 '15px' ）
- * @property {String}			color					输入框字体颜色	（ 默认 '#303133' ）
+ * @property {String}			color					输入框字体颜色	（ 默认 '#303133' ）
+ * @property {Function}			formatter			    内容式化函数
  * @property {String}			prefixIcon				输入框前置图标
  * @property {String | Object}	prefixIconStyle			前置图标样式，对象或字符串
  * @property {String}			suffixIcon				输入框后置图标
@@ -125,7 +126,9 @@ export default {
             // value是否第一次变化，在watch中，由于加入immediate属性，会在第一次触发，此时不应该认为value发生了变化
             firstChange: true,
             // value绑定值的变化是由内部还是外部引起的
-            changeFromInner: false,
+            changeFromInner: false,
+			// 过滤处理方法
+			innerFormatter: value => value
         };
     },
     watch: {
@@ -196,12 +199,23 @@ export default {
             return style;
         },
     },
-    methods: {
+    methods: {
+		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+		setFormatter(e) {
+			this.innerFormatter = e
+		},
         // 当键盘输入时，触发input事件
         onInput(event) {
-            const { value = "" } = event.detail || {};
-            this.innerValue = value;
-            this.valueChange();
+            let { value = "" } = e.detail || {};
+            // 格式化过滤方法
+            const formatter = this.formatter || this.innerFormatter
+            const formatValue = formatter(value)
+            // 为了避免props的单向数据流特性，需要先将innerValue值设置为当前值，再在$nextTick中重新赋予设置后的值才有效
+            this.innerValue = value
+            this.$nextTick(() => {
+            	this.innerValue = formatValue;
+            	this.valueChange();
+            })
         },
         // 输入框失去焦点时触发
         onBlur(event) {

diff --git a/uni_modules/uview-v2/components/u-keyboard/props.js b/uni_modules/uview-v2/components/u-keyboard/props.js
@@ -46,9 +46,9 @@ export default {
 			default: uni.$u.props.keyboard.safeAreaInsetBottom
 		},
 		// 是否允许通过点击遮罩关闭键盘
-		closeOnClickOverly: {
+		closeOnClickOverlay: {
 			type: Boolean,
-			default: uni.$u.props.keyboard.closeOnClickOverly
+			default: uni.$u.props.keyboard.closeOnClickOverlay
 		},
 		// 控制键盘的弹出与收起
 		show: {

diff --git a/uni_modules/uview-v2/components/u-keyboard/u-keyboard.vue b/uni_modules/uview-v2/components/u-keyboard/u-keyboard.vue
@@ -1,7 +1,7 @@
 <template>
 	<u-popup
 	    :overlay="overlay"
-	    :closeOnClickOverly="closeOnClickOverly"
+	    :closeOnClickOverlay="closeOnClickOverlay"
 	    mode="bottom"
 	    :popup="false"
 	    :show="show"
@@ -83,7 +83,7 @@
 	 * @property {Boolean}			showConfirm			是否显示工具条右边的"完成"按钮（ 默认 true ）
 	 * @property {Boolean}			random				是否打乱键盘按键的顺序 （默认 false ）
 	 * @property {Boolean}			safeAreaInsetBottom	是否开启底部安全区适配 （默认 true ）
-	 * @property {Boolean}			closeOnClickOverly	是否允许点击遮罩收起键盘 （默认 true ）
+	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩收起键盘 （默认 true ）
 	 * @property {Boolean}			show				控制键盘的弹出与收起（默认 false ）
 	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
 	 * @property {String | Number}	zIndex				弹出键盘的z-index值 （默认 1075 ）

diff --git a/uni_modules/uview-v2/components/u-modal/props.js b/uni_modules/uview-v2/components/u-modal/props.js
@@ -61,9 +61,9 @@ export default {
 			default: uni.$u.props.modal.asyncClose
 		},
 		// 是否允许点击遮罩关闭modal
-		closeOnClickOverly: {
+		closeOnClickOverlay: {
 			type: Boolean,
-			default: uni.$u.props.modal.closeOnClickOverly
+			default: uni.$u.props.modal.closeOnClickOverlay
 		},
 		// 给一个负的margin-top，往上偏移，避免和键盘重合的情况
 		negativeTop: {