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

package/uview-plus/components/u-count-to/u-count-to.vue

@@ -2,7 +2,7 @@
   <text
     class="u-count-num"
     :style="{
-      fontSize: $u.addUnit(fontSize),
+      fontSize: addUnit(fontSize),
       fontWeight: bold ? 'bold' : 'normal',
       color: color
     }"
@@ -11,9 +11,10 @@
   </text>
 </template>
 <script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit } from '../../libs/function/index';
 /**
  * countTo 数字滚动
  * @description 该组件一般用于需要滚动数字到某一个值的场景，目标要求是一个递增的值。
@@ -65,7 +66,9 @@ export default {
   mounted() {
     this.autoplay && this.start();
   },
+  emits: ['end'],
   methods: {
+    addUnit,
     easingFn(t, b, c, d) {
       return (c * (-Math.pow(2, (-10 * t) / d) + 1) * 1024) / 1023 + b;
     },

package/uview-plus/{libs/config/props → components/u-datetime-picker}/datetimePicker.js

@@ -11,6 +11,7 @@ export default {
     // datetimePicker 组件
     datetimePicker: {
         show: false,
+		popupMode: 'bottom',
         showToolbar: true,
         value: '',
         title: '',
@@ -31,6 +32,11 @@ export default {
         confirmColor: '#3c9cff',
         visibleItemCount: 5,
         closeOnClickOverlay: false,
-        defaultIndex: () => []
+        defaultIndex: [],
+        inputBorder: 'surround',
+        disabled: false,
+        disabledColor: '',
+        placeholder: '请选择',
+        inputProps: {},
     }
 }

package/uview-plus/components/u-datetime-picker/props.js

@@ -1,126 +1,168 @@
-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: {
+    // 是否显示input
+    hasInput: {
+      type: Boolean,
+      default: false
+    },
+    inputProps: {
+      type: Object,
+      default: () => {
+        return {};
+      }
+    },
+    inputBorder: {
+      type: String,
+      default: () => defProps.input.inputBorder
+    },
+    disabled: {
+      type: Boolean,
+      default: () => defProps.input.disabled
+    },
+    disabledColor: {
+      type: String,
+      default: () => defProps.input.disabledColor
+    },
+    placeholder: {
+      type: String,
+      default: () => defProps.input.placeholder
+    },
+    format: {
+      type: String,
+      default: () => ''
+    },
     // 是否打开组件
     show: {
       type: Boolean,
-      default: defprops.datetimePicker.show
+      default: () => defProps.datetimePicker.show
+    },
+    // 弹出的方向，可选值为 top bottom right left center
+    popupMode: {
+      type: String,
+      default: () => defProps.picker.popupMode
     },
     // 是否展示顶部的操作栏
     showToolbar: {
       type: Boolean,
-      default: defprops.datetimePicker.showToolbar
+      default: () => defProps.datetimePicker.showToolbar
+    },
+    // 工具栏右侧内容
+    toolbarRightSlot: {
+      type: Boolean,
+      default: false
     },
     // #ifdef VUE2
     // 绑定值
     value: {
       type: [String, Number],
-      default: defprops.datetimePicker.value
+      default: () => defProps.datetimePicker.value
     },
     // #endif
     // #ifdef VUE3
     // 绑定值
     modelValue: {
       type: [String, Number],
-      default: defprops.datetimePicker.value
+      default: () => defProps.datetimePicker.value
     },
     // #endif
     // 顶部标题
     title: {
       type: String,
-      default: defprops.datetimePicker.title
+      default: () => defProps.datetimePicker.title
     },
     // 展示格式，mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择
     mode: {
       type: String,
-      default: defprops.datetimePicker.mode
+      default: () => defProps.datetimePicker.mode
     },
     // 可选的最大时间
     maxDate: {
       type: Number,
       // 最大默认值为后10年
-      default: defprops.datetimePicker.maxDate
+      default: () => defProps.datetimePicker.maxDate
     },
     // 可选的最小时间
     minDate: {
       type: Number,
       // 最小默认值为前10年
-      default: defprops.datetimePicker.minDate
+      default: () => defProps.datetimePicker.minDate
     },
     // 可选的最小小时，仅mode=time有效
     minHour: {
       type: Number,
-      default: defprops.datetimePicker.minHour
+      default: () => defProps.datetimePicker.minHour
     },
     // 可选的最大小时，仅mode=time有效
     maxHour: {
       type: Number,
-      default: defprops.datetimePicker.maxHour
+      default: () => defProps.datetimePicker.maxHour
     },
     // 可选的最小分钟，仅mode=time有效
     minMinute: {
       type: Number,
-      default: defprops.datetimePicker.minMinute
+      default: () => defProps.datetimePicker.minMinute
     },
     // 可选的最大分钟，仅mode=time有效
     maxMinute: {
       type: Number,
-      default: defprops.datetimePicker.maxMinute
+      default: () => defProps.datetimePicker.maxMinute
     },
     // 选项过滤函数
     filter: {
       type: [Function, null],
-      default: defprops.datetimePicker.filter
+      default: () => defProps.datetimePicker.filter
     },
     // 选项格式化函数
     formatter: {
       type: [Function, null],
-      default: defprops.datetimePicker.formatter
+      default: () => defProps.datetimePicker.formatter
     },
     // 是否显示加载中状态
     loading: {
       type: Boolean,
-      default: defprops.datetimePicker.loading
+      default: () => defProps.datetimePicker.loading
     },
     // 各列中，单个选项的高度
     itemHeight: {
       type: [String, Number],
-      default: defprops.datetimePicker.itemHeight
+      default: () => defProps.datetimePicker.itemHeight
     },
     // 取消按钮的文字
     cancelText: {
       type: String,
-      default: defprops.datetimePicker.cancelText
+      default: () => defProps.datetimePicker.cancelText
     },
     // 确认按钮的文字
     confirmText: {
       type: String,
-      default: defprops.datetimePicker.confirmText
+      default: () => defProps.datetimePicker.confirmText
     },
     // 取消按钮的颜色
     cancelColor: {
       type: String,
-      default: defprops.datetimePicker.cancelColor
+      default: () => defProps.datetimePicker.cancelColor
     },
     // 确认按钮的颜色
     confirmColor: {
       type: String,
-      default: defprops.datetimePicker.confirmColor
+      default: () => defProps.datetimePicker.confirmColor
     },
     // 每列中可见选项的数量
     visibleItemCount: {
       type: [String, Number],
-      default: defprops.datetimePicker.visibleItemCount
+      default: () => defProps.datetimePicker.visibleItemCount
     },
     // 是否允许点击遮罩关闭选择器
     closeOnClickOverlay: {
       type: Boolean,
-      default: defprops.datetimePicker.closeOnClickOverlay
+      default: () => defProps.datetimePicker.closeOnClickOverlay
     },
     // 各列的默认索引
     defaultIndex: {
       type: Array,
-      default: defprops.datetimePicker.defaultIndex
+      default: () => defProps.datetimePicker.defaultIndex
     }
   }
-};
+});

package/uview-plus/components/u-datetime-picker/style.css

@@ -1,5 +1,20 @@
 /* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
+.u-empty,
+.u-empty__wrap,
+.u-tabs,
+.u-tabs__wrapper,
+.u-tabs__wrapper__scroll-view-wrapper,
+.u-tabs__wrapper__scroll-view,
+.u-tabs__wrapper__nav,
+.u-tabs__wrapper__nav__line,
+.up-empty,
+.up-empty__wrap,
+.up-tabs,
+.up-tabs__wrapper,
+.up-tabs__wrapper__scroll-view-wrapper,
+.up-tabs__wrapper__scroll-view,
+.up-tabs__wrapper__nav,
+.up-tabs__wrapper__nav__line {
   display: flex;
   flex-direction: column;
   flex-shrink: 0;
@@ -9,3 +24,29 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
+.u-datetime-picker {
+  flex: 1;
+}
+.u-datetime-picker__has-input {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /* #ifndef APP-NVUE */
+  width: 100%;
+  /* #endif */
+}
+.u-datetime-picker__has-input .input-cover {
+  opacity: 0;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  border-radius: 4px;
+  border: 1px solid #eee;
+  padding: 0 10px;
+}

package/uview-plus/components/u-datetime-picker/style.scss

@@ -1 +1,27 @@
 @import '../../libs/css/components.scss';
+.u-datetime-picker {
+  flex: 1;
+  &__has-input {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    /* #ifndef APP-NVUE */
+    width: 100%;
+    /* #endif */
+    .input-cover {
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      border-radius: 4px;
+      border: 1px solid #eee;
+      padding: 0 10px;
+    }
+  }
+}

package/uview-plus/components/u-datetime-picker/u-datetime-picker.vue

@@ -1,23 +1,40 @@
 <template>
-  <u-picker
-    ref="picker"
-    :show="show"
-    :closeOnClickOverlay="closeOnClickOverlay"
-    :columns="columns"
-    :title="title"
-    :itemHeight="itemHeight"
-    :showToolbar="showToolbar"
-    :visibleItemCount="visibleItemCount"
-    :defaultIndex="innerDefaultIndex"
-    :cancelText="cancelText"
-    :confirmText="confirmText"
-    :cancelColor="cancelColor"
-    :confirmColor="confirmColor"
-    @close="close"
-    @cancel="cancel"
-    @confirm="confirm"
-    @change="change"
-  ></u-picker>
+  <view class="u-datetime-picker">
+    <view v-if="hasInput" class="u-datetime-picker__has-input" @click="onShowByClickInput">
+      <slot name="trigger" :value="inputValue">
+        <up-input :readonly="!!showByClickInput" v-model="inputValue" v-bind="inputPropsInner"></up-input>
+        <div class="input-cover"></div>
+      </slot>
+    </view>
+    <u-picker
+      ref="picker"
+      :show="show || (hasInput && showByClickInput)"
+      :popupMode="popupMode"
+      :closeOnClickOverlay="closeOnClickOverlay"
+      :columns="columns"
+      :title="title"
+      :itemHeight="itemHeight"
+      :showToolbar="showToolbar"
+      :visibleItemCount="visibleItemCount"
+      :defaultIndex="innerDefaultIndex"
+      :cancelText="cancelText"
+      :confirmText="confirmText"
+      :cancelColor="cancelColor"
+      :confirmColor="confirmColor"
+      :toolbarRightSlot="toolbarRightSlot"
+      @close="close"
+      @cancel="cancel"
+      @confirm="confirm"
+      @change="change"
+    >
+      <template #toolbar-right>
+        <slot name="toolbar-right"></slot>
+      </template>
+      <template #toolbar-bottom>
+        <slot name="toolbar-bottom"></slot>
+      </template>
+    </u-picker>
+  </view>
 </template>
 <script>
 function times(n, iteratee) {
@@ -28,18 +45,19 @@ function times(n, iteratee) {
   }
   return result;
 }
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-// import dayjs from '../../libs/util/dayjs.js';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 import dayjs from 'dayjs/esm/index';
+import { range, error, padZero } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * DatetimePicker 时间日期选择器
  * @description 此选择器用于时间日期
  * @tutorial https://ijry.github.io/uview-plus/components/datetimePicker.html
  * @property {Boolean}			show				用于控制选择器的弹出与收起 ( 默认 false )
  * @property {Boolean}			showToolbar			是否显示顶部的操作栏  ( 默认 true )
- * @property {String | Number}	value				绑定值
+ * @property {String | Number}	modelValue		    绑定值
  * @property {String}			title				顶部标题
  * @property {String}			mode				展示格式 mode=date为日期选择，mode=time为时间选择，mode=year-month为年月选择，mode=datetime为日期时间选择  ( 默认 ‘datetime )
  * @property {Number}			maxDate				可选的最大时间  默认值为后10年
@@ -66,10 +84,13 @@ import dayjs from 'dayjs/esm/index';
  * @example  <u-datetime-picker :show="show" :value="value1"  mode="datetime" ></u-datetime-picker>
  */
 export default {
-  name: 'datetime-picker',
+  name: 'up-datetime-picker',
   mixins: [mpMixin, mixin, props],
   data() {
     return {
+      // 原来的日期选择器不方便，这里增加一个hasInput选项支持类似element的自带输入框的功能。
+      inputValue: '', // 表单显示值
+      showByClickInput: false, // 是否在hasInput模式下显示日期选择弹唱
       columns: [],
       innerDefaultIndex: [],
       innerFormatter: (type, value) => value
@@ -81,6 +102,18 @@ export default {
         this.updateColumnValue(this.innerValue);
       }
     },
+    // #ifdef VUE3
+    modelValue(newValue) {
+      this.init();
+      // this.getInputValue(newValue)
+    },
+    // #endif
+    // #ifdef VUE2
+    value(newValue) {
+      this.init();
+      // this.getInputValue(newValue)
+    },
+    // #endif
     propsChange() {
       this.init();
     }
@@ -89,6 +122,16 @@ export default {
     // 如果以下这些变量发生了变化，意味着需要重新初始化各列的值
     propsChange() {
       return [this.mode, this.maxDate, this.minDate, this.minHour, this.maxHour, this.minMinute, this.maxMinute, this.filter];
+    },
+    // input的props
+    inputPropsInner() {
+      return {
+        border: this.inputBorder,
+        placeholder: this.placeholder,
+        disabled: this.disabled,
+        disabledColor: this.disabledColor,
+        ...this.inputProps
+      };
     }
   },
   mounted() {
@@ -98,6 +141,38 @@ export default {
   emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue'],
   // #endif
   methods: {
+    getInputValue(newValue) {
+      if (newValue == '' || !newValue || newValue == undefined) {
+        this.inputValue = '';
+        return;
+      }
+      if (this.mode == 'time') {
+        this.inputValue = newValue;
+      } else {
+        if (this.format) {
+          this.inputValue = dayjs(newValue).format(this.format);
+        } else {
+          let format = '';
+          switch (this.mode) {
+            case 'date':
+              format = 'YYYY-MM-DD';
+              break;
+            case 'year-month':
+              format = 'YYYY-MM';
+              break;
+            case 'datetime':
+              format = 'YYYY-MM-DD HH:mm';
+              break;
+            case 'time':
+              format = 'HH:mm';
+              break;
+            default:
+              break;
+          }
+          this.inputValue = dayjs(newValue).format(format);
+        }
+      }
+    },
     init() {
       // #ifdef VUE3
       this.innerValue = this.correctValue(this.modelValue);
@@ -106,6 +181,8 @@ export default {
       this.innerValue = this.correctValue(this.value);
       // #endif
       this.updateColumnValue(this.innerValue);
+      // 初始化hasInput展示
+      this.getInputValue(this.innerValue);
     },
     // 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
     setFormatter(e) {
@@ -119,33 +196,40 @@ export default {
     },
     // 点击工具栏的取消按钮
     cancel() {
+      if (this.hasInput) {
+        this.showByClickInput = false;
+      }
       this.$emit('cancel');
     },
     // 点击工具栏的确定按钮
     confirm() {
-      this.$emit('confirm', {
-        value: this.innerValue,
-        mode: this.mode
-      });
       // #ifdef VUE3
       this.$emit('update:modelValue', this.innerValue);
       // #endif
       // #ifdef VUE2
       this.$emit('input', this.innerValue);
       // #endif
+      if (this.hasInput) {
+        this.getInputValue(this.innerValue);
+        this.showByClickInput = false;
+      }
+      this.$emit('confirm', {
+        value: this.innerValue,
+        mode: this.mode
+      });
     },
     //用正则截取输出值,当出现多组数字时,抛出错误
     intercept(e, type) {
       let judge = e.match(/\d+/g);
       //判断是否掺杂数字
       if (judge.length > 1) {
-        uni.$u.error('请勿在过滤或格式化函数时添加数字');
+        error('请勿在过滤或格式化函数时添加数字');
         return 0;
       } else if (type && judge[0].length == 4) {
         //判断是否是年份
         return judge[0];
       } else if (judge[0].length > 2) {
-        uni.$u.error('请勿在过滤或格式化函数时添加数字');
+        error('请勿在过滤或格式化函数时添加数字');
         return 0;
       } else {
         return judge[0];
@@ -189,7 +273,7 @@ export default {
         value: selectValue,
         // #ifndef MP-WEIXIN
         // 微信小程序不能传递this实例，会因为循环引用而报错
-        picker: this.$refs.picker,
+        // picker: this.$refs.picker,
         // #endif
         mode: this.mode
       });
@@ -198,13 +282,15 @@ export default {
     updateColumnValue(value) {
       this.innerValue = value;
       this.updateColumns();
-      this.updateIndexs(value);
+      // 延迟执行,等待u-picker组件列数据更新完后再设置选中值索引
+      setTimeout(() => {
+        this.updateIndexs(value);
+      }, 0);
     },
     // 更新索引
     updateIndexs(value) {
       let values = [];
       const formatter = this.formatter || this.innerFormatter;
-      const padZero = uni.$u.padZero;
       if (this.mode === 'time') {
         // 将time模式的时间用:分隔成数组
         const timeArr = value.split(':');
@@ -252,12 +338,20 @@ export default {
       const results = this.getRanges().map(({ type, range }) => {
         let values = times(range[1] - range[0] + 1, (index) => {
           let value = range[0] + index;
-          value = type === 'year' ? `${value}` : uni.$u.padZero(value);
+          value = type === 'year' ? `${value}` : padZero(value);
           return value;
         });
         // 进行过滤
         if (this.filter) {
           values = this.filter(type, values);
+          if (!values || (values && values.length == 0)) {
+            // uni.showToast({
+            // 	title: '日期filter结果不能为空',
+            // 	icon: 'error',
+            // 	mask: true
+            // })
+            console.log('日期filter结果不能为空');
+          }
         }
         return { type, values };
       });
@@ -270,20 +364,21 @@ export default {
     // 得出合法的时间
     correctValue(value) {
       const isDateMode = this.mode !== 'time';
-      if (isDateMode && !uni.$u.test.date(value)) {
+      // if (isDateMode && !test.date(value)) {
+      if (isDateMode && !dayjs.unix(value).isValid()) {
         // 如果是日期类型，但是又没有设置合法的当前时间的话，使用最小时间为当前时间
         value = this.minDate;
       } else if (!isDateMode && !value) {
         // 如果是时间类型，而又没有默认值的话，就用最小时间
-        value = `${uni.$u.padZero(this.minHour)}:${uni.$u.padZero(this.minMinute)}`;
+        value = `${padZero(this.minHour)}:${padZero(this.minMinute)}`;
       }
       // 时间类型
       if (!isDateMode) {
-        if (String(value).indexOf(':') === -1) return uni.$u.error('时间错误，请传递如12:24的格式');
+        if (String(value).indexOf(':') === -1) return error('时间错误，请传递如12:24的格式');
         let [hour, minute] = value.split(':');
         // 对时间补零，同时控制在最小值和最大值之间
-        hour = uni.$u.padZero(uni.$u.range(this.minHour, this.maxHour, Number(hour)));
-        minute = uni.$u.padZero(uni.$u.range(this.minMinute, this.maxMinute, Number(minute)));
+        hour = padZero(range(this.minHour, this.maxHour, Number(hour)));
+        minute = padZero(range(this.minMinute, this.maxMinute, Number(minute)));
         return `${hour}:${minute}`;
       } else {
         // 如果是日期格式，控制在最小日期和最大日期之间
@@ -370,6 +465,11 @@ export default {
         [`${type}Hour`]: hour,
         [`${type}Minute`]: minute
       };
+    },
+    onShowByClickInput() {
+      if (!this.disabled) {
+        this.showByClickInput = !this.showByClickInput;
+      }
     }
   }
 };