forked from angelo/web-retail-h5
				
			
		
			
	
	
		
			79 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
		
		
			
		
	
	
			79 lines
		
	
	
		
			2.0 KiB
		
	
	
	
		
			Vue
		
	
	
	
|  | <template> | |||
|  | 	<uvForm | |||
|  | 		ref="uForm" | |||
|  | 		:model="model" | |||
|  | 		:rules="rules" | |||
|  | 		:errorType="errorType" | |||
|  | 		:borderBottom="borderBottom" | |||
|  | 		:labelPosition="labelPosition" | |||
|  | 		:labelWidth="labelWidth" | |||
|  | 		:labelAlign="labelAlign" | |||
|  | 		:labelStyle="labelStyle" | |||
|  | 		:customStyle="customStyle" | |||
|  | 	> | |||
|  | 		<slot /> | |||
|  | 	</uvForm> | |||
|  | </template> | |||
|  | 
 | |||
|  | <script> | |||
|  | 	/** | |||
|  | 	 * 此组件存在的理由是,在nvue下,u-form被uni-app官方占用了,u-form在nvue中相当于form组件 | |||
|  | 	 * 所以在nvue下,取名为u--form,内部其实还是u-form.vue,只不过做一层中转 | |||
|  | 	 */ | |||
|  | 	import uvForm from '../u-form/u-form.vue'; | |||
|  | 	import props from '../u-form/props.js' | |||
|  | 	export default { | |||
|  | 		// #ifdef MP-WEIXIN
 | |||
|  | 		name: 'u-form', | |||
|  | 		// #endif
 | |||
|  | 		// #ifndef MP-WEIXIN
 | |||
|  | 		name: 'u--form', | |||
|  | 		// #endif
 | |||
|  | 		mixins: [uni.$u.mpMixin, props, uni.$u.mixin], | |||
|  | 		components: { | |||
|  | 			uvForm | |||
|  | 		}, | |||
|  | 		created() { | |||
|  | 			this.children = [] | |||
|  | 		}, | |||
|  | 		methods: { | |||
|  | 			// 手动设置校验的规则,如果规则中有函数的话,微信小程序中会过滤掉,所以只能手动调用设置规则
 | |||
|  | 			setRules(rules) { | |||
|  | 				this.$refs.uForm.setRules(rules) | |||
|  | 			}, | |||
|  | 			validate() { | |||
|  | 				/** | |||
|  | 				 * 在微信小程序中,通过this.$parent拿到的父组件是u--form,而不是其内嵌的u-form | |||
|  | 				 * 导致在u-form组件中,拿不到对应的children数组,从而校验无效,所以这里每次调用u-form组件中的 | |||
|  | 				 * 对应方法的时候,在小程序中都先将u--form的children赋值给u-form中的children | |||
|  | 				 */ | |||
|  | 				// #ifdef MP-WEIXIN
 | |||
|  | 				this.setMpData() | |||
|  | 				// #endif
 | |||
|  | 				return this.$refs.uForm.validate() | |||
|  | 			}, | |||
|  | 			validateField(value, callback) { | |||
|  | 				// #ifdef MP-WEIXIN
 | |||
|  | 				this.setMpData() | |||
|  | 				// #endif
 | |||
|  | 				return this.$refs.uForm.validateField(value, callback) | |||
|  | 			}, | |||
|  | 			resetFields() { | |||
|  | 				// #ifdef MP-WEIXIN
 | |||
|  | 				this.setMpData() | |||
|  | 				// #endif
 | |||
|  | 				return this.$refs.uForm.resetFields() | |||
|  | 			}, | |||
|  | 			clearValidate(props) { | |||
|  | 				// #ifdef MP-WEIXIN
 | |||
|  | 				this.setMpData() | |||
|  | 				// #endif
 | |||
|  | 				return this.$refs.uForm.clearValidate(props) | |||
|  | 			}, | |||
|  | 			setMpData() { | |||
|  | 				this.$refs.uForm.children = this.children | |||
|  | 			} | |||
|  | 		}, | |||
|  | 	} | |||
|  | </script> |