gxd-uni-library-editx 1.0.0

package/src/components/XdFormInput/common.js

@@ -0,0 +1,56 @@
+/**
+ * @desc 函数防抖
+ * @param func 目标函数
+ * @param wait 延迟执行毫秒数
+ * @param immediate true - 立即执行， false - 延迟执行
+ */
+export const debounce = function(func, wait = 1000, immediate = true) {
+	let timer;
+	console.log(1);
+	return function() {
+		console.log(123);
+		let context = this,
+			args = arguments;
+		if (timer) clearTimeout(timer);
+		if (immediate) {
+			let callNow = !timer;
+			timer = setTimeout(() => {
+				timer = null;
+			}, wait);
+			if (callNow) func.apply(context, args);
+		} else {
+			timer = setTimeout(() => {
+				func.apply(context, args);
+			}, wait)
+		}
+	}
+}
+/**
+ * @desc 函数节流
+ * @param func 函数
+ * @param wait 延迟执行毫秒数
+ * @param type 1 使用表时间戳，在时间段开始的时候触发 2 使用表定时器，在时间段结束的时候触发
+ */
+export const throttle = (func, wait = 1000, type = 1) => {
+	let previous = 0;
+	let timeout;
+	return function() {
+		let context = this;
+		let args = arguments;
+		if (type === 1) {
+			let now = Date.now();
+
+			if (now - previous > wait) {
+				func.apply(context, args);
+				previous = now;
+			}
+		} else if (type === 2) {
+			if (!timeout) {
+				timeout = setTimeout(() => {
+					timeout = null;
+					func.apply(context, args)
+				}, wait)
+			}
+		}
+	}
+}

package/src/components/XdFormItem/XdFormItem.vue

@@ -0,0 +1,583 @@
+<template>
+	<view
+    class="uni-forms-item"
+    :class="{
+     'uni-forms-item--border': border,
+     'is-first-border': border && isFirstBorder,
+     'uni-forms-item-error': msg,
+     'is-last-border': border && isLastBorder,
+     }"
+    :style="{
+      paddingLeft: paddingBetween + 'rpx',
+      paddingRight: paddingBetween + 'rpx'
+    }"
+    v-if="labelAli"
+  >
+		<view class="uni-forms-item__box">
+			<view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
+				<view
+          class="uni-forms-item__label"
+          :style="{
+           width: labelPos==='top'? 'auto' : (labelWid.indexOf('rpx') !== -1 ? labelWid :  labelWid + 'rpx') ,
+           justifyContent: justifyContent
+          }"
+        >
+					<slot name="label">
+            <text class="is-required"><template  v-if="required">*</template></text>
+            <xd-font-icon
+              v-if="leftIcon"
+              class="label-icon"
+              size="32"
+              :icon="leftIcon"
+              :color="iconColor"
+            ></xd-font-icon>
+						<text class="label-text">{{ label }}</text>
+						<view v-if="label" class="label-seat"></view>
+					</slot>
+				</view>
+				<view class="uni-forms-item__content" :class="{ 'is-input-error-border': msg }"><slot></slot></view>
+			</view>
+			<view
+				v-if="msg"
+				class="uni-error-message"
+				:class="{ 'uni-error-msg--boeder': border }"
+				:style="{
+					paddingLeft: labelLeft
+				}"
+			>
+				<text class="uni-error-message-text">{{ showMsg === 'undertext' ? msg : '' }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * Field 输入框
+ * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=21001
+ * @property {Boolean} 	required 			是否必填，左边显示红色"*"号（默认false）
+ * @property {String} validateTrigger = [bind|submit]	校验触发器方式 默认 submit 可选
+ * 	@value bind 	发生变化时触发
+ * 	@value submit 	提交时触发
+ * @property {String } 	leftIcon 			label左边的图标，限 uni-ui 的图标名称
+ * @property {String } 	iconColor 			左边通过icon配置的图标的颜色（默认#606266）
+ * @property {String } 	label 				输入框左边的文字提示
+ * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
+ * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
+ * 	@value left		label 左侧显示
+ * 	@value center	label 居中
+ * 	@value right	label 右侧对齐
+ * @property {String } 	labelPosition = [top|left] label的文字的位置（默认left）
+ * 	@value top	顶部显示 label
+ * 	@value left	左侧显示 label
+ * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
+ */
+
+//https://www.iconfont.cn/manage/index?spm=a313x.7781069.1998910419.db775f1f3&manage_type=myprojects&projectId=2260472&keyword=&project_type=&page=
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+export default {
+	name: 'XdFormItem',
+  components: {
+    XdFontIcon
+  },
+	props: {
+		// 自定义内容
+		custom: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示报错信息
+		showMessage: {
+			type: Boolean,
+			default: true
+		},
+		name: String,
+		required: Boolean,
+		validateTrigger: {
+			type: String,
+			default: ''
+		},
+		leftIcon: String,
+		iconColor: {
+			type: String,
+			default: '#606266'
+		},
+		label: String,
+		// 左边标题的宽度单位rpx
+		labelWidth: {
+			type: [Number, String],
+			default: ''
+		},
+		// 对齐方式，left|center|right
+		labelAlign: {
+			type: String,
+			default: ''
+		},
+
+    // 对齐方式，left|center|right
+    contentAlign: {
+      type: String,
+      default: ''
+    },
+
+		// lable的位置，可选为 left-左边，top-上边
+		labelPosition: {
+			type: String,
+			default: ''
+		},
+		errorMessage: {
+			type: [String, Boolean],
+			default: ''
+		},
+		// 表单校验规则
+		rules: {
+			type: Array,
+			default() {
+				return [];
+			}
+		}
+	},
+	data() {
+		return {
+			errorTop: false,
+			errorBottom: false,
+			labelMarginBottom: '',
+			errorWidth: '',
+			errMsg: '',
+			val: '',
+			labelPos: '',
+			labelWid: '',
+			labelAli: '',
+			showMsg: 'undertext',
+			border: false,
+			isFirstBorder: false,
+      isLastBorder: false,
+			isArray: false,
+			arrayField: '',
+      paddingBetween: '',
+      index: 0,
+		};
+	},
+	computed: {
+		msg() {
+			return this.errorMessage || this.errMsg;
+		},
+		fieldStyle() {
+			let style = {};
+			if (this.labelPos == 'top') {
+				style.padding = '0 0';
+				this.labelMarginBottom = '6px';
+			}
+			if (this.labelPos == 'left' && this.msg !== false && this.msg != '') {
+				style.paddingBottom = '0px';
+				this.errorBottom = true;
+				this.errorTop = false;
+			} else if (this.labelPos == 'top' && this.msg !== false && this.msg != '') {
+				this.errorBottom = false;
+				this.errorTop = true;
+			} else {
+				// style.paddingBottom = ''
+				this.errorTop = false;
+				this.errorBottom = false;
+			}
+			return style;
+		},
+
+		// uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
+		justifyContent() {
+			if (this.labelAli === 'left') return 'flex-start';
+			if (this.labelAli === 'center') return 'center';
+			if (this.labelAli === 'right') return 'flex-end';
+		},
+		labelLeft(){
+			return (this.labelPos === 'left' ? parseInt(this.labelWid) : 0) + 'rpx'
+		}
+	},
+	watch: {
+		validateTrigger(trigger) {
+			this.formTrigger = trigger;
+		}
+	},
+	created() {
+		this.form = this.getForm();
+		this.group = this.getForm('uniGroup');
+		this.formRules = [];
+		this.formTrigger = this.validateTrigger;
+		// 处理 name，是否数组
+		if (this.name && this.name.indexOf('[') !== -1 && this.name.indexOf(']') !== -1) {
+			this.isArray = true;
+			this.arrayField = this.name
+			// fix by mehaotian 修改不修改的情况，动态值不检验的问题
+			this.form.formData[this.name] = this.form._getValue(this.name, '')
+		}
+	},
+	mounted() {
+		if (this.form) {
+			this.form.childrens.push(this);
+		}
+		this.init();
+	},
+	// #ifndef VUE3
+	destroyed() {
+		if(this.__isUnmounted) return
+		this.unInit()
+	},
+	// #endif
+	// #ifdef VUE3
+	unmounted(){
+		this.__isUnmounted = true
+		this.unInit()
+	},
+	// #endif
+	methods: {
+		init() {
+			if (this.form) {
+				let {
+          formRules,
+          validator,
+          formData, value, labelPosition, labelWidth,
+          labelAlign, errShowType, paddingBetween,
+          contentAlign
+        } = this.form;
+				this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;
+        this.contentAlign = contentAlign;
+
+				if(this.label){
+					this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth||140))
+				}else{
+					this.labelWid =( this.labelWidth ? this.labelWidth : (labelWidth||'auto'))
+				}
+				if(this.labelWid && this.labelWid !=='auto') {
+					this.labelWid +='rpx'
+				}
+				this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+				this.paddingBetween = paddingBetween;
+
+				//设置索引值
+        if(this.form.index === undefined) {
+          this.form.index = 1;
+        }else{
+          this.form.index++;
+        }
+
+        //判断最后一个
+        if(this.form.index === this.form.$children.length) {
+          this.isLastBorder = true;
+        }
+
+
+				// 判断第一个 item
+				if (!this.form.isFirstBorder) {
+					this.form.isFirstBorder = true;
+					this.isFirstBorder = true;
+				}
+
+				// 判断 group 里的第一个 item
+				if (this.group) {
+					if (!this.group.isFirstBorder) {
+						this.group.isFirstBorder = true;
+						this.isFirstBorder = true;
+					}
+				}
+
+				this.border = this.form.border;
+				this.showMsg = errShowType;
+				let name = this.isArray ? this.arrayField : this.name;
+				if(!name) return
+				if (formRules && this.rules.length > 0) {
+					if (!formRules[name]) {
+						formRules[name] = {
+							rules: this.rules
+						}
+					}
+					validator.updateSchema(formRules);
+				}
+				this.formRules = formRules[name] || {};
+				this.validator = validator;
+			} else {
+				this.labelPos = this.labelPosition || 'right';
+				this.labelWid = this.labelWidth || 130;
+				this.labelAli = this.labelAlign || 'right';
+			}
+		},
+		unInit(){
+			if (this.form) {
+				this.form.childrens.forEach((item, index) => {
+					if (item === this) {
+						this.form.childrens.splice(index, 1)
+						delete this.form.formData[item.name]
+					}
+				})
+			}
+		},
+		/**
+		 * 获取父元素实例
+		 */
+		getForm(name = 'XdForm') {
+			let parent = this.$parent;
+			let parentName = parent.$options.name;
+			while (parentName !== name) {
+				parent = parent.$parent;
+				if (!parent) return false;
+				parentName = parent.$options.name;
+			}
+			return parent;
+		},
+
+		/**
+		 * 移除该表单项的校验结果
+		 */
+		clearValidate() {
+			this.errMsg = '';
+		},
+		/**
+		 * 子组件调用，如 easyinput
+		 * @param {Object} value
+		 */
+		setValue(value) {
+			let name = this.isArray ? this.arrayField : this.name;
+			if (name) {
+				if (this.errMsg) this.errMsg = '';
+				// 给组件赋值
+				this.form.formData[name] = this.form._getValue(name, value);
+				if (!this.formRules || (typeof this.formRules && JSON.stringify(this.formRules) === '{}')) return;
+				this.triggerCheck(this.form._getValue(this.name, value));
+			}
+		},
+
+		/**
+		 * 校验规则
+		 * @param {Object} value
+     * @param {Boolean} formTrigger
+		 */
+		async triggerCheck(value,formTrigger) {
+			let promise = null;
+			this.errMsg = '';
+			// fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
+			if (!this.validator || Object.keys(this.formRules).length === 0) return;
+			const isNoField = this.isRequired(this.formRules.rules || []);
+			let isTrigger = this.isTrigger(this.formRules.validateTrigger, this.validateTrigger, this.form.validateTrigger);
+			let result = null;
+			if (!!isTrigger || formTrigger) {
+				let name = this.isArray ? this.arrayField : this.name;
+				result = await this.validator.validateUpdate(
+					{
+						[name]: value
+					},
+					this.form.formData
+				);
+			}
+
+
+			// 判断是否必填,非必填，不填不校验，填写才校验
+			if (!isNoField && (value === undefined || value === '')) {
+				result = null;
+			}
+			const inputComp = this.form.inputChildrens.find(child => child.rename === this.name);
+
+			if ((isTrigger ||　formTrigger) && result && result.errorMessage) {
+				if (inputComp) {
+					inputComp.errMsg = result.errorMessage;
+				}
+        console
+				if (this.form.errShowType === 'toast' || 1) {
+          this.$xdAlert({
+            content : result.errorMessage || '校验错误',
+            icon: 'icondanchuangguanbi_xian',
+
+          })
+				}
+				if (this.form.errShowType === 'modal' && 0) {
+					uni.showModal({
+						title: '提示',
+						content: result.errorMessage || '校验错误'
+					});
+				}
+			} else {
+				if (inputComp) {
+					inputComp.errMsg = '';
+				}
+			}
+
+			this.errMsg = !result ? '' : result.errorMessage;
+			// 触发validate事件
+			this.form.validateCheck(result ? result : null);
+			// typeof callback === 'function' && callback(result ? result : null);
+			// if (promise) return promise
+			return result ? result : null;
+		},
+		/**
+		 * 触发时机
+		 * @param {Object} event
+		 */
+		isTrigger(rule, itemRlue, parentRule) {
+			let rl = true;
+			//  bind  submit
+			if (rule === 'submit' || !rule) {
+				if (rule === undefined) {
+					if (itemRlue !== 'bind') {
+						if (!itemRlue) {
+							return parentRule === 'bind' ? true : false;
+						}
+						return false;
+					}
+					return true;
+				}
+				return false;
+			}
+			return true;
+		},
+		// 是否有必填字段
+		isRequired(rules) {
+			let isNoField = false;
+			for (let i = 0; i < rules.length; i++) {
+				const ruleData = rules[i];
+				if (ruleData.required) {
+					isNoField = true;
+					break;
+				}
+			}
+			return isNoField;
+		}
+	}
+};
+</script>
+
+<style lang="less">
+.uni-forms-item {
+	position: relative;
+	padding: 0;
+	text-align: left;
+	color: #000;
+	font-size: unit(30,rpx);
+}
+
+.uni-forms-item__box {
+	position: relative;
+}
+
+.uni-forms-item__inner {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	/* #endif */
+	// flex-direction: row;
+	// align-items: center;
+	padding-bottom: unit(44, rpx);
+	// margin-bottom: 22px;
+}
+
+.is-direction-left {
+	flex-direction: row;
+}
+
+.is-direction-top {
+	flex-direction: column;
+}
+
+.uni-forms-item__label {
+	/* #ifndef APP-NVUE */
+	display: flex;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	/* #endif */
+	flex-direction: row;
+	align-items: center;
+	width: unit(130, rpx);
+	padding: unit(10, rpx) 0;
+	height: unit(72, rpx);
+  line-height: unit(72, rpx);
+
+	.label-text {
+		font-size: unit(30, rpx);
+		color: #333;
+	}
+	.label-seat {
+		margin-right: unit(18, rpx);
+	}
+}
+
+.uni-forms-item__content {
+	/* #ifndef APP-NVUE */
+	width: 100%;
+	box-sizing: border-box;
+	min-height: unit(72, rpx);
+	/* #endif */
+	flex: 1;
+}
+
+.label-icon {
+	margin-right: unit(10, rpx);
+	margin-top: unit(-2, rpx);
+}
+
+// 必填
+.is-required {
+	// color: $uni-color-error;
+	color: #dd524d;
+	font-weight: bold;
+  padding-right: unit(10, rpx);
+  width: unit(20, rpx);
+}
+
+.uni-error-message {
+	position: absolute;
+	bottom: 0;
+	left: 0;
+	text-align: left;
+}
+
+.uni-error-message-text {
+	line-height: unit(44, rpx);
+	color: #dd524d;
+	font-size: unit(28, rpx);
+}
+
+.uni-error-msg--boeder {
+	position: relative;
+	bottom: 0;
+	line-height: unit(44, rpx)
+}
+
+.is-input-error-border {
+	border-color: #dd524d;
+}
+
+.uni-forms-item--border {
+	margin-bottom: 0;
+	padding: unit(20, rpx) 0;
+	border-top: 1px #F9F9F9 solid;
+  border-bottom: 1px #F9F9F9 solid;
+	.uni-forms-item__inner {
+		padding: 0;
+	}
+}
+
+.uni-forms-item-error {
+	// padding-bottom: 0;
+}
+
+.is-first-border {
+	/* #ifndef APP-NVUE */
+	border-top: none;
+	/* #endif */
+	/* #ifdef APP-NVUE */
+	border-top-width: 0;
+	/* #endif */
+}
+
+.is-last-border {
+  /* #ifndef APP-NVUE */
+  border-bottom: none;
+  /* #endif */
+  /* #ifdef APP-NVUE */
+  border-bottom-width: 0;
+  /* #endif */
+}
+
+.uni-forms--no-padding {
+	padding: 0;
+}
+</style>