@10yun/cv-mobile-ui 0.5.26 → 0.5.29

package/uview-plus/components/u-float-button/u-float-button.vue

@@ -0,0 +1,164 @@
+<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 scoped>
+@import './style.css';
+</style>

package/uview-plus/{libs/config/props → components/u-form}/form.js

@@ -10,13 +10,13 @@
 export default {
     // form 组件
     form: {
-        model: () => ({}),
-        rules: () => ({}),
+        model: {},
+        rules: {},
         errorType: 'message',
         borderBottom: true,
         labelPosition: 'left',
         labelWidth: 45,
         labelAlign: 'left',
-        labelStyle: () => ({})
+        labelStyle: {}
     }
 }

package/uview-plus/components/u-form/props.js

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

package/uview-plus/components/u-form/u-form.vue

@@ -1 +1 @@
-<template>
  <view class="u-form">
    <slot />
  </view>
 * 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 <u--formlabelPosition="left" :model="model1" :rules="rules" ref="form1"></u--form>
 */
  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 = 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);
            }
          });
        });
      });
    }
  }
+<template>
  <view class="u-form">
    <slot />
  </view>
 * 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>
 */
  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
          );
        });
      });
    }
  }

package/uview-plus/{libs/config/props → components/u-form-item}/formItem.js

@@ -12,7 +12,9 @@ export default {
     formItem: {
         label: '',
         prop: '',
+        rules: [],
         borderBottom: '',
+        labelPosition: '',
         labelWidth: '',
         rightIcon: '',
         leftIcon: '',