create-uniapps 1.0.0

package/template/src/uni_modules/uview-plus/components/u-float-button/u-float-button.vue

@@ -0,0 +1,167 @@
+<template>
+    <view
+        class="u-float-button" :style="{
+            position: 'fixed',
+            top: top,
+            bottom: bottom,
+            right: right,
+        }">
+        <view class="u-float-button__main" @click="clickHandler" :style="{
+            backgroundColor: backgroundColor,
+            color: color,
+			display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: width,
+            height: height,
+            borderRadius: '50%',
+            borderColor: borderColor,
+        }">
+            <slot :showList="showList">
+                <up-icon class="cursor-pointer" :class="{'show-list': showList}" name="plus" :color="color"></up-icon>
+            </slot>
+            <view v-if="showList" class="u-float-button__list" :style="{
+                bottom: height
+            }">
+                <slot name="list">
+                    <template :key="index" v-for="(item, index) in list">
+                        <view class="u-float-button__item" :style="{
+                            backgroundColor: item?.backgroundColor ? item?.backgroundColor : backgroundColor,
+                            color: item?.color ? item?.color : color,
+							display: 'flex',
+                            flexDirection: 'row',
+                            justifyContent: 'center',
+                            alignItems: 'center',
+                            width: width,
+                            height: height,
+                            borderRadius: '50%',
+                            borderColor: item?.borderColor ? item?.borderColor :  borderColor,
+                        }" @click="itemClick(item, index)">
+                            <up-icon :name="item.name" :color="item?.color ? item?.color : color"></up-icon>
+                        </view>
+                    </template>
+                </slot>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, addUnit, deepMerge } from '../../libs/function/index';
+/**
+ * FloatButton 悬浮按钮
+ * @description 悬浮按钮常用于屏幕右下角点击展开的操作菜单
+ * @tutorial https://ijry.github.io/uview-plus/components/floatButton.html
+ * @property {String}                backgroundColor      背景颜色
+ * @event {Function} click  点击触发事件
+ * @example <up-float-button></up-float-button>
+ */
+export default {
+    name: 'u-float-button',
+    // #ifdef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+    // #ifndef MP
+    mixins: [mpMixin, mixin],
+    // #endif
+   emits: ['click', 'item-click'],
+    computed: {
+    },
+    props: {
+        // 背景颜色
+        backgroundColor: {
+            type: String,
+            default: '#2979ff'
+        },
+        // 文字颜色
+        color: {
+            type: String,
+            default: '#fff'
+        },
+        // 宽度
+        width: {
+            type: String,
+            default: '50px'
+        },
+        // 高度
+        height: {
+            type: String,
+            default: '50px'
+        },
+        // 边框颜色，默认为空字符串表示无边框
+        borderColor: {
+            type: String,
+            default: ''
+        },
+        // 右侧偏移量
+        right: {
+            type: [String, Number],
+            default: '30px'
+        },
+        // 顶部偏移量，未提供默认值，可能需要根据具体情况设置
+        top: {
+            type: [String, Number],
+            default: '',
+        },
+        // 底部偏移量
+        bottom: {
+            type: String,
+            default: ''
+        },
+        // 是否为菜单项
+        isMenu: {
+            type: Boolean,
+            default: false
+        },
+        list: {
+            type: Array,
+            default: () => {
+                return []
+            }
+        }
+    },
+    data() {
+        return {
+            showList: false
+        }
+    },
+    methods: {
+        addStyle,
+        clickHandler(e) {
+            if (this.isMenu) {
+                this.showList = !this.showList
+                this.$emit('click', e)
+            } else {
+                this.$emit('click', e)
+            }
+        },
+        itemClick(item, index) {
+            this.$emit('item-click', {
+                ...item,
+                index
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.u-float-button {
+    z-index: 999;
+    .show-list {
+        transform: rotate(45deg);
+    }
+    &__list {
+        position: absolute;
+        bottom: 0px;
+        display: flex;
+        flex-direction: column;
+        >view {
+            margin: 5px 0px;
+        }
+    }
+}
+</style>

package/template/src/uni_modules/uview-plus/components/u-form/form.js

@@ -0,0 +1,22 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:03:49
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/form.js
+ */
+export default {
+    // form 组件
+    form: {
+        model: {},
+        rules: {},
+        errorType: 'message',
+        borderBottom: true,
+        labelPosition: 'left',
+        labelWidth: 45,
+        labelAlign: 'left',
+        labelStyle: {}
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-form/props.js

@@ -0,0 +1,47 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // 当前form的需要验证字段的集合
+        model: {
+            type: Object,
+            default: () => defProps.form.model
+        },
+        // 验证规则
+        rules: {
+            type: [Object, Function, Array],
+            default: () => defProps.form.rules
+        },
+        // 有错误时的提示方式，message-提示信息，toast-进行toast提示
+        // border-bottom-下边框呈现红色，none-无提示
+        errorType: {
+            type: String,
+            default: () => defProps.form.errorType
+        },
+        // 是否显示表单域的下划线边框
+        borderBottom: {
+            type: Boolean,
+            default: () => defProps.form.borderBottom
+        },
+        // label的位置，left-左边，top-上边
+        labelPosition: {
+            type: String,
+            default: () => defProps.form.labelPosition
+        },
+        // label的宽度，单位px
+        labelWidth: {
+            type: [String, Number],
+            default: () => defProps.form.labelWidth
+        },
+        // lable字体的对齐方式
+        labelAlign: {
+            type: String,
+            default: () => defProps.form.labelAlign
+        },
+        // lable的样式，对象形式
+        labelStyle: {
+            type: Object,
+            default: () => defProps.form.labelStyle
+        }
+    }
+})

package/template/src/uni_modules/uview-plus/components/u-form/u-form.vue

@@ -0,0 +1,258 @@
+<template>
+	<view class="u-form">
+		<slot />
+	</view>
+</template>
+
+<script>
+	import { props } from "./props.js";
+	import { mpMixin } from '../../libs/mixin/mpMixin.js';
+	import { mixin } from '../../libs/mixin/mixin.js';
+	import Schema from "../../libs/util/async-validator.js";
+	import { toast, getProperty, setProperty, deepClone, error } from '../../libs/function/index';
+	import test from '../../libs/function/test.js';
+	// 去除警告信息
+	Schema.warning = function() {};
+	/**
+	 * Form 表单
+	 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
+	 * @tutorial https://ijry.github.io/uview-plus/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 <up-formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></up-form>
+	 */
+	export default {
+		name: "u-form",
+		mixins: [mpMixin, 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 = 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) {
+					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 = getProperty(this.originalModel, prop);
+					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,options) {
+				// $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
+				this.$nextTick(() => {
+					// 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
+					const errorsRes = [];
+					// 如果为字符串，转为数组
+					value = [].concat(value);
+					// 历遍children所有子form-item
+					let promises = this.children.map(child => {
+						return new Promise((resolve, reject) => {
+							// 用于存放form-item的错误信息
+							const childErrors = [];
+							if (value.includes(child.prop)) {
+								// 获取对应的属性，通过类似'a.b.c'的形式
+								const propertyVal = getProperty(
+									this.model,
+									child.prop
+								);
+								// 属性链数组
+								const propertyChain = child.prop.split(".");
+								const propertyName =
+									propertyChain[propertyChain.length - 1];
+
+								let rule = []
+								if (child.itemRules && child.itemRules.length > 0) {
+									rule = child.itemRules
+								} else {
+									rule = this.formRules[child.prop];
+								}
+								// 如果不存在对应的规则，直接返回，否则校验器会报错
+								if (!rule) {
+									resolve()
+									return;
+								}
+								// rule规则可为数组形式，也可为对象形式，此处拼接成为数组
+								const rules = [].concat(rule);
+
+								// 对rules数组进行校验
+								if (!rules.length) {
+									resolve()
+								}
+								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)) {
+										resolve()
+										continue;
+									}
+									// 实例化校验对象，传入构造规则
+									const validator = new Schema({
+										[propertyName]: ruleItem,
+									});
+									validator.validate({
+										[propertyName]: propertyVal,
+									},
+										(errors, fields) => {
+											if (test.array(errors)) {
+												errors.forEach(element => {
+													element.prop = child.prop;
+												});
+												errorsRes.push(...errors);
+												childErrors.push(...errors);
+											}
+											//没有配置，或者配置了showErrorMsg为true时候，才修改子组件message，默认没有配置
+											if(!options||options?.showErrorMsg==true){
+												child.message =
+													childErrors[0]?.message ? childErrors[0].message : null;
+											}
+											if (i == (rules.length - 1)) {
+												resolve(errorsRes)
+											}
+										}
+									)
+								}
+							} else {
+								resolve({})
+							}
+						});
+					});
+
+					// 使用Promise.all来等待所有Promise完成  
+					Promise.all(promises)
+						.then(results => {
+							// 执行回调函数
+							typeof callback === "function" && callback(errorsRes);
+						})
+						.catch(error => {
+							console.error('An error occurred:', error);
+						});
+				});
+			},
+			/**
+			 * 校验全部数据
+			 * @param {Object} options
+			 * @param {Boolean} options.showErrorMsg -是否显示校验信息，
+			 */
+			validate(options) {
+				// 开发环境才提示，生产环境不会提示
+				if (process.env.NODE_ENV === 'development' && Object.keys(this.formRules).length === 0) {
+					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
+						);
+						// console.log(formItemProps)
+						this.validateField(formItemProps, (errors) => {
+							if(errors.length) {
+								// 如果错误提示方式为toast，则进行提示
+								this.errorType === 'toast' && toast(errors[0].message)
+								reject(errors)
+							} else {
+								resolve(true)
+							}
+						},null,options);
+					});
+				});
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+</style>

package/template/src/uni_modules/uview-plus/components/u-form-item/formItem.js

@@ -0,0 +1,24 @@
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 1.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : LQ
+ * @lastTime     : 2021-08-20 17:04:32
+ * @FilePath     : /u-view2.0/uview-ui/libs/config/props/formItem.js
+ */
+export default {
+    // formItem 组件
+    formItem: {
+        label: '',
+        prop: '',
+        rules: [],
+        borderBottom: '',
+        labelPosition: '',
+        labelWidth: '',
+        rightIcon: '',
+        leftIcon: '',
+        required: false,
+        leftIconStyle: '',
+    }
+}

package/template/src/uni_modules/uview-plus/components/u-form-item/props.js

@@ -0,0 +1,55 @@
+import { defineMixin } from '../../libs/vue'
+import defProps from '../../libs/config/props.js'
+export const props = defineMixin({
+    props: {
+        // input的label提示语
+        label: {
+            type: String,
+            default: () => defProps.formItem.label
+        },
+        // 绑定的值
+        prop: {
+            type: String,
+            default: () => defProps.formItem.prop
+        },
+        // 绑定的规则
+        rules: {
+            type: Array,
+            default: () => defProps.formItem.rules
+        },
+        // 是否显示表单域的下划线边框
+        borderBottom: {
+            type: [String, Boolean],
+            default: () => defProps.formItem.borderBottom
+        },
+        // label的位置，left-左边，top-上边
+        labelPosition: {
+            type: String,
+            default: () => defProps.formItem.labelPosition
+        },
+        // label的宽度，单位px
+        labelWidth: {
+            type: [String, Number],
+            default: () => defProps.formItem.labelWidth
+        },
+        // 右侧图标
+        rightIcon: {
+            type: String,
+            default: () => defProps.formItem.rightIcon
+        },
+        // 左侧图标
+        leftIcon: {
+            type: String,
+            default: () => defProps.formItem.leftIcon
+        },
+        // 是否显示左边的必填星号，只作显示用，具体校验必填的逻辑，请在rules中配置
+        required: {
+            type: Boolean,
+            default: () => defProps.formItem.required
+        },
+        leftIconStyle: {
+            type: [String, Object],
+            default: () => defProps.formItem.leftIconStyle,
+        }
+    }
+})