@10yun/cv-mobile-ui 0.4.1 → 0.4.3

package/ui-uni/uni-forms-item/uni-forms-item.vue

@@ -0,0 +1,500 @@
+<template>
+	<view class="uni-forms-item" :class="{ 'uni-forms-item--border': border, 'is-first-border': border && isFirstBorder, 'uni-forms-item-error': msg }">
+		<view class="uni-forms-item__box">
+			<view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
+				<view class="uni-forms-item__label" :style="{ width: labelWid , justifyContent: justifyContent }">
+					<slot name="left">
+						<uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor" />
+						<text class="label-text">{{ label }}</text>
+						<text v-if="required" class="is-required">*</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 				表单域的属性名，在使用校验规则时必填
+	 */
+
+	export default {
+		name: 'uniFormsItem',
+		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,
+			// 左边标题的宽度单位px
+			labelWidth: {
+				type: [Number, String],
+				default: ''
+			},
+			// 对齐方式，left|center|right
+			labelAlign: {
+				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,
+				isArray: false,
+				arrayField: ''
+			};
+		},
+		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) + 'px'
+			}
+		},
+		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
+					} = this.form;
+					this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;
+
+					if (this.label) {
+						this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth || 70))
+					} else {
+						this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth || 'auto'))
+					}
+					if (this.labelWid && this.labelWid !== 'auto') {
+						this.labelWid += 'px'
+					}
+					this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+
+					// 判断第一个 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 (formRules) {
+						if (!formRules[name]) {
+							formRules[name] = {
+								rules: this.rules
+							}
+						}
+						this.formRules = formRules[name];
+					}
+					if (this.rules.length > 0) {
+						validator.updateSchema(formRules);
+					}
+
+					this.validator = validator;
+				} else {
+					this.labelPos = this.labelPosition || 'left';
+					this.labelWid = this.labelWidth || 65;
+					this.labelAli = this.labelAlign || 'left';
+				}
+			},
+			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 = 'uniForms') {
+				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
+			 */
+			async triggerCheck(value, formTrigger) {
+				let promise = null;
+				this.errMsg = '';
+				if (!this.validator) 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;
+					}
+					if (this.form.errShowType === 'toast') {
+						uni.showToast({
+							title: result.errorMessage || '校验错误',
+							icon: 'none'
+						});
+					}
+					if (this.form.errShowType === 'modal') {
+						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 scoped>
+	.uni-forms-item {
+		position: relative;
+		padding: 0px;
+		text-align: left;
+		color: #333;
+		font-size: 14px;
+	}
+
+	.uni-forms-item__box {
+		position: relative;
+	}
+
+	.uni-forms-item__inner {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding-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: 65px;
+		padding: 5px 0;
+		height: 36px;
+	}
+
+	.uni-forms-item__label .label-text {
+		font-size: 14px;
+		color: #333;
+	}
+
+	.uni-forms-item__label .label-seat {
+		margin-right: 5px;
+	}
+
+	.uni-forms-item__content {
+		/* #ifndef APP-NVUE */
+		width: 100%;
+		box-sizing: border-box;
+		min-height: 36px;
+		/* #endif */
+		flex: 1;
+	}
+
+	.label-icon {
+		margin-right: 5px;
+		margin-top: -1px;
+	}
+
+	.is-required {
+		color: #dd524d;
+	}
+
+	.uni-error-message {
+		position: absolute;
+		bottom: 0px;
+		left: 0;
+		text-align: left;
+	}
+
+	.uni-error-message-text {
+		line-height: 22px;
+		color: #dd524d;
+		font-size: 12px;
+	}
+
+	.uni-error-msg--boeder {
+		position: relative;
+		bottom: 0;
+		line-height: 22px;
+	}
+
+	.is-input-error-border {
+		border-color: #dd524d;
+	}
+
+	.uni-forms-item--border {
+		margin-bottom: 0;
+		padding: 10px 0;
+		border-top: 1px #eee solid;
+	}
+
+	.uni-forms-item--border .uni-forms-item__inner {
+		padding: 0;
+	}
+
+	.is-first-border {
+		/* #ifndef APP-NVUE */
+		border: none;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		border-width: 0;
+		/* #endif */
+	}
+
+	.uni-forms--no-padding {
+		padding: 0;
+	}
+</style>

package/ui-uni/uni-grid/uni-grid.vue

@@ -0,0 +1,141 @@
+<template>
+	<view class="uni-grid-wrap">
+		<view :id="elId" ref="uni-grid" class="uni-grid" :class="{ 'uni-grid--border': showBorder }" :style="{ 'border-left-color':borderColor}">
+			<slot />
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	const dom = uni.requireNativePlugin('dom');
+	// #endif
+
+	/**
+	 * Grid 宫格
+	 * @description 宫格组件
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=27
+	 * @property {Number} column 每列显示个数
+	 * @property {String} borderColor 边框颜色
+	 * @property {Boolean} showBorder 是否显示边框
+	 * @property {Boolean} square 是否方形显示
+	 * @property {Boolean} Boolean 点击背景是否高亮
+	 * @event {Function} change 点击 grid 触发，e={detail:{index:0}}，index 为当前点击 gird 下标
+	 */
+	export default {
+		name: 'UniGrid',
+		emits: ['change'],
+		props: {
+			// 每列显示个数
+			column: {
+				type: Number,
+				default: 3
+			},
+			// 是否显示边框
+			showBorder: {
+				type: Boolean,
+				default: true
+			},
+			// 边框颜色
+			borderColor: {
+				type: String,
+				default: '#e5e5e5'
+			},
+			// 是否正方形显示,默认为 true
+			square: {
+				type: Boolean,
+				default: true
+			},
+			highlight: {
+				type: Boolean,
+				default: true
+			}
+		},
+		provide() {
+			return {
+				grid: this
+			}
+		},
+		data() {
+			const elId = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
+			return {
+				elId,
+				width: 0
+			}
+		},
+		created() {
+			this.children = []
+		},
+		mounted() {
+			this.$nextTick(() => {
+				this.init()
+			})
+		},
+		methods: {
+			init() {
+				setTimeout(() => {
+					this._getSize((width) => {
+						this.children.forEach((item, index) => {
+							item.width = width
+						})
+					})
+				}, 50)
+			},
+			change(e) {
+				this.$emit('change', e)
+			},
+			_getSize(fn) {
+				// #ifndef APP-NVUE
+				uni.createSelectorQuery()
+					.in(this)
+					.select(`#${this.elId}`)
+					.boundingClientRect()
+					.exec(ret => {
+						this.width = parseInt((ret[0].width - 1) / this.column) + 'px'
+						fn(this.width)
+					})
+				// #endif
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['uni-grid'], (ret) => {
+					this.width = parseInt((ret.size.width - 1) / this.column) + 'px'
+					fn(this.width)
+				})
+				// #endif
+			}
+		}
+	}
+</script>
+
+<style scoped>
+	.uni-grid-wrap {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: column;
+		/* #ifdef H5 */
+		width: 100%;
+		/* #endif */
+	}
+
+	.uni-grid {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		flex-wrap: wrap;
+	}
+
+	.uni-grid--border {
+		position: relative;
+		/* #ifdef APP-NVUE */
+		border-left-color: #e5e5e5;
+		border-left-style: solid;
+		border-left-width: 0.5px;
+		/* #endif */
+		/* #ifndef APP-NVUE */
+		z-index: 1;
+		border-left: 1px #e5e5e5 solid;
+		/* #endif */
+	}
+</style>