From da25434b85fc5b4321c429bf95e719d00ec395bb Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 11 Jan 2024 16:21:16 +0800
Subject: [PATCH] 定位优化
---
uni_modules/uview-ui/components/u-form/u-form.vue | 214 +++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 214 insertions(+), 0 deletions(-)
diff --git a/uni_modules/uview-ui/components/u-form/u-form.vue b/uni_modules/uview-ui/components/u-form/u-form.vue
new file mode 100644
index 0000000..fe2dde2
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-form/u-form.vue
@@ -0,0 +1,214 @@
+<template>
+ <view class="u-form">
+ <slot />
+ </view>
+</template>
+
+<script>
+ import props from "./props.js";
+ import Schema from "../../libs/util/async-validator";
+ // ������������������
+ Schema.warning = function() {};
+ /**
+ * Form ������
+ * @description ������������������������������������������������Input������������Select������������������������������������
+ * @tutorial https://www.uviewui.com/components/form.html
+ * @property {Object} model ������form������������������������������
+ * @property {Object | Function | Array} rules ������������
+ * @property {String} errorType ��������������������������������������� ( ������ message )
+ * @property {Boolean} borderBottom ��������������������������������������� ( ������ true ���
+ * @property {String} labelPosition ���������������������������������left-���������top-������ ( ������ 'left' ���
+ * @property {String | Number} labelWidth ������������������������������px ( ������ 45 ���
+ * @property {String} labelAlign lable��������������������� ( ������ ���left' ���
+ * @property {Object} labelStyle lable������������������������
+ * @example <u--formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></u--form>
+ */
+ export default {
+ name: "u-form",
+ mixins: [uni.$u.mpMixin, uni.$u.mixin, props],
+ provide() {
+ return {
+ uForm: this,
+ };
+ },
+ data() {
+ return {
+ formRules: {},
+ // ���������������
+ validator: {},
+ // ���������model���������������resetFields���������������������������
+ originalModel: null,
+ };
+ },
+ watch: {
+ // ���������������������
+ rules: {
+ immediate: true,
+ handler(n) {
+ this.setRules(n);
+ },
+ },
+ // ���������������������������������������u-form-item������������������
+ propsChange(n) {
+ if (this.children?.length) {
+ this.children.map((child) => {
+ // ���������������(u-form-item)���������updateParentData���������������������������(������������������������������������������������������������������)
+ typeof child.updateParentData == "function" &&
+ child.updateParentData();
+ });
+ }
+ },
+ // ������model���������������������������������������
+ model: {
+ immediate: true,
+ handler(n) {
+ if (!this.originalModel) {
+ this.originalModel = uni.$u.deepClone(n);
+ }
+ },
+ },
+ },
+ computed: {
+ propsChange() {
+ return [
+ this.errorType,
+ this.borderBottom,
+ this.labelPosition,
+ this.labelWidth,
+ this.labelAlign,
+ this.labelStyle,
+ ];
+ },
+ },
+ created() {
+ // ������������form������������u-form-item���������
+ // ���������������data���������������������������������������������������������
+ this.children = [];
+ },
+ methods: {
+ // ������������������������������������������������������������������������������������������������������������������������������������
+ setRules(rules) {
+ // ���������������������
+ if (Object.keys(rules).length === 0) return;
+ if (process.env.NODE_ENV === 'development' && Object.keys(this.model).length === 0) {
+ uni.$u.error('������rules���model������������������������������������������������������');
+ return;
+ };
+ this.formRules = rules;
+ // ���������������������Validator
+ this.validator = new Schema(rules);
+ },
+ // ������������u-form-item���������������������������������������u-form-item������������resetField()������
+ resetFields() {
+ this.resetModel();
+ },
+ // ������model���������������������
+ resetModel(obj) {
+ // ������������u-form-item������������prop���������������model���������������
+ this.children.map((child) => {
+ const prop = child?.prop;
+ const value = uni.$u.getProperty(this.originalModel, prop);
+ uni.$u.setProperty(this.model, prop, value);
+ });
+ },
+ // ������������������
+ clearValidate(props) {
+ props = [].concat(props);
+ this.children.map((child) => {
+ // ������u-form-item���prop���props������������������������������������������������
+ if (props[0] === undefined || props.includes(child.prop)) {
+ child.message = null;
+ }
+ });
+ },
+ // ���������������������������������
+ async validateField(value, callback, event = null) {
+ // $nextTick���������������������model������������������������������������������������
+ this.$nextTick(() => {
+ // ���������������������������������������������������������������form-item���������������
+ const errorsRes = [];
+ // ���������������������������������
+ value = [].concat(value);
+ // ������children���������form-item
+ this.children.map((child) => {
+ // ������������form-item���������������
+ const childErrors = [];
+ if (value.includes(child.prop)) {
+ // ������������������������������������'a.b.c'���������
+ const propertyVal = uni.$u.getProperty(
+ this.model,
+ child.prop
+ );
+ // ���������������
+ const propertyChain = child.prop.split(".");
+ const propertyName =
+ propertyChain[propertyChain.length - 1];
+
+ const rule = this.formRules[child.prop];
+ // ������������������������������������������������������������������������
+ if (!rule) return;
+ // rule���������������������������������������������������������������������������
+ const rules = [].concat(rule);
+
+ // ���rules������������������
+ for (let i = 0; i < rules.length; i++) {
+ const ruleItem = rules[i];
+ // ���u-form-item������������������������������
+ const trigger = [].concat(ruleItem?.trigger);
+ // ������������������������������������������form-item���������������������������������������������������������
+ if (event && !trigger.includes(event)) continue;
+ // ������������������������������������������
+ const validator = new Schema({
+ [propertyName]: ruleItem,
+ });
+ validator.validate({
+ [propertyName]: propertyVal,
+ },
+ (errors, fields) => {
+ if (uni.$u.test.array(errors)) {
+ errorsRes.push(...errors);
+ childErrors.push(...errors);
+ }
+ child.message =
+ childErrors[0]?.message ?? null;
+ }
+ );
+ }
+ }
+ });
+ // ������������������
+ typeof callback === "function" && callback(errorsRes);
+ });
+ },
+ // ������������������
+ validate(callback) {
+ // ������������������������������������������������
+ if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
+ uni.$u.error('���������rules���������������������������������������������������������������');
+ return;
+ }
+ return new Promise((resolve, reject) => {
+ // $nextTick���������������������model������������������������������validate������
+ this.$nextTick(() => {
+ // ������������form-item���prop���������validateField������������������
+ const formItemProps = this.children.map(
+ (item) => item.prop
+ );
+ this.validateField(formItemProps, (errors) => {
+ if(errors.length) {
+ // ���������������������������toast������������������
+ this.errorType === 'toast' && uni.$u.toast(errors[0].message)
+ reject(errors)
+ } else {
+ resolve(true)
+ }
+ });
+ });
+ });
+ },
+ },
+ };
+</script>
+
+<style lang="scss" scoped>
+</style>
--
Gitblit v1.8.0