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

package/uview-plus/components/u-slider/style.scss

@@ -1 +1,77 @@
 @import '../../libs/css/components.scss';
+.u-slider {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+
+  &__native {
+    flex: 1;
+  }
+
+  &-inner {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    border-radius: 999px;
+    padding: 10px 18px;
+    justify-content: center;
+  }
+
+  &__show-value {
+    margin: 10px 18px 10px 0px;
+  }
+
+  &__show-range-value {
+    padding-top: 2px;
+    font-size: 12px;
+    line-height: 12px;
+    position: absolute;
+    bottom: 0;
+  }
+
+  &__base {
+    background-color: #ebedf0;
+  }
+
+  /* #ifndef APP-NVUE */
+  &-inner:before {
+    position: absolute;
+    right: 0;
+    left: 0;
+    content: '';
+    top: -8px;
+    bottom: -8px;
+    z-index: -1;
+  }
+  /* #endif */
+
+  &__gap {
+    position: relative;
+    border-radius: 999px;
+    transition: width 0.2s;
+    background-color: #1989fa;
+  }
+
+  &__button {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
+    background-color: #fff;
+    transform: scale(0.9);
+    /* #ifdef H5 */
+    cursor: pointer;
+    /* #endif */
+  }
+
+  &__button-wrap {
+    position: absolute;
+    // transform: translate3d(50%, -50%, 0);
+  }
+
+  &--disabled {
+    opacity: 0.5;
+  }
+}

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

@@ -1 +1,446 @@
-<template>
  <view class="u-slider" :style="[$u.addStyle(customStyle)]">
    <slider
      :min="min"
      :max="max"
      :step="step"
      :value="value"
      :activeColor="activeColor"
      :inactiveColor="inactiveColor"
      :blockSize="$u.getPx(blockSize)"
      :blockColor="blockColor"
      :showValue="showValue"
      :disabled="disabled"
      @changing="changingHandler"
      @change="changeHandler"
    ></slider>
  </view>
  name: 'u--slider',
  mixins: [mpMixin, mixin, props],
  methods: {
    // 拖动过程中触发
    changingHandler(e) {
      const { value } = e.detail;
      // 更新v-model的值
      this.$emit('input', value);
      // 触发事件
      this.$emit('changing', value);
    },
    // 滑动结束时触发
    changeHandler(e) {
      const { value } = e.detail;
      // 更新v-model的值
      this.$emit('input', value);
      // 触发事件
      this.$emit('change', value);
    }
  }
+<template>
+  <view class="u-slider" :style="[addStyle(customStyle)]">
+    <template v-if="!useNative || isRange">
+      <view
+        ref="u-slider-inner"
+        class="u-slider-inner"
+        @click="onClick"
+        @onTouchStart="onTouchStart2($event, 1)"
+        @touchmove="onTouchMove2($event, 1)"
+        @touchend="onTouchEnd2($event, 1)"
+        @touchcancel="onTouchEnd2($event, 1)"
+        :class="[disabled ? 'u-slider--disabled' : '']"
+        :style="{
+          height: isRange && showValue ? getPx(blockSize) + 24 + 'px' : getPx(blockSize) + 'px'
+        }"
+      >
+        <view
+          ref="u-slider__base"
+          class="u-slider__base"
+          :style="[
+            {
+              height: height,
+              backgroundColor: inactiveColor
+            }
+          ]"
+        ></view>
+        <view
+          @click="onClick"
+          class="u-slider__gap"
+          :style="[
+            barStyle,
+            {
+              height: height,
+              marginTop: '-' + height,
+              backgroundColor: activeColor
+            }
+          ]"
+        ></view>
+        <view
+          v-if="isRange"
+          class="u-slider__gap u-slider__gap-0"
+          :style="[
+            barStyle0,
+            {
+              height: height,
+              marginTop: '-' + height,
+              backgroundColor: inactiveColor
+            }
+          ]"
+        ></view>
+        <text
+          v-if="isRange && showValue"
+          class="u-slider__show-range-value"
+          :style="{ left: getPx(barStyle0.width) + getPx(blockSize) / 2 + 'px' }"
+        >
+          {{ this.rangeValue[0] }}
+        </text>
+        <text
+          v-if="isRange && showValue"
+          class="u-slider__show-range-value"
+          :style="{ left: getPx(barStyle.width) + getPx(blockSize) / 2 + 'px' }"
+        >
+          {{ this.rangeValue[1] }}
+        </text>
+        <template v-if="isRange">
+          <view
+            class="u-slider__button-wrap u-slider__button-wrap-0"
+            @touchstart="onTouchStart($event, 0)"
+            @touchmove="onTouchMove($event, 0)"
+            @touchend="onTouchEnd($event, 0)"
+            @touchcancel="onTouchEnd($event, 0)"
+            :style="{ left: getPx(barStyle0.width) + getPx(blockSize) / 2 + 'px' }"
+          >
+            <slot name="min" v-if="$slots.min || $slots.$min" />
+            <view
+              v-else
+              class="u-slider__button"
+              :style="[
+                blockStyle,
+                {
+                  height: getPx(blockSize, true),
+                  width: getPx(blockSize, true),
+                  backgroundColor: blockColor
+                }
+              ]"
+            ></view>
+          </view>
+        </template>
+        <view
+          class="u-slider__button-wrap"
+          @touchstart="onTouchStart"
+          @touchmove="onTouchMove"
+          @touchend="onTouchEnd"
+          @touchcancel="onTouchEnd"
+          :style="{ left: getPx(barStyle.width) + getPx(blockSize) / 2 + 'px' }"
+        >
+          <slot name="max" v-if="isRange && ($slots.max || $slots.$max)" />
+          <slot v-else-if="$slots.default || $slots.$default" />
+          <view
+            v-else
+            class="u-slider__button"
+            :style="[
+              blockStyle,
+              {
+                height: getPx(blockSize, true),
+                width: getPx(blockSize, true),
+                backgroundColor: blockColor
+              }
+            ]"
+          ></view>
+        </view>
+      </view>
+      <view class="u-slider__show-value" v-if="showValue && !isRange">{{ modelValue }}</view>
+    </template>
+    <slider
+      class="u-slider__native"
+      v-else
+      :min="min"
+      :max="max"
+      :step="step"
+      :value="modelValue"
+      :activeColor="activeColor"
+      :backgroundColor="inactiveColor"
+      :blockSize="getPx(blockSize)"
+      :blockColor="blockColor"
+      :showValue="showValue"
+      :disabled="disabled"
+      @changing="changingHandler"
+      @change="changeHandler"
+    ></slider>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addStyle, getPx, sleep } from '../../libs/function/index.js';
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+/**
+ * slider 滑块选择器
+ * @tutorial https://uview-plus.jiangruyi.com/components/slider.html
+ * @property {Number | String} value 滑块默认值（默认0）
+ * @property {Number | String} min 最小值（默认0）
+ * @property {Number | String} max 最大值（默认100）
+ * @property {Number | String} step 步长（默认1）
+ * @property {Number | String} blockWidth 滑块宽度，高等于宽（30）
+ * @property {Number | String} height 滑块条高度，单位rpx（默认6）
+ * @property {String} inactiveColor 底部条背景颜色（默认#c0c4cc）
+ * @property {String} activeColor 底部选择部分的背景颜色（默认#2979ff）
+ * @property {String} blockColor 滑块颜色（默认#ffffff）
+ * @property {Object} blockStyle 给滑块自定义样式，对象形式
+ * @property {Boolean} disabled 是否禁用滑块(默认为false)
+ * @event {Function} changing 正在滑动中
+ * @event {Function} change 滑动结束
+ * @example <up-slider v-model="value" />
+ */
+export default {
+  name: 'u-slider',
+  mixins: [mpMixin, mixin, props],
+  emits: ['start', 'changing', 'change', 'update:modelValue'],
+  data() {
+    return {
+      startX: 0,
+      status: 'end',
+      newValue: 0,
+      distanceX: 0,
+      startValue0: 0,
+      startValue: 0,
+      barStyle0: {},
+      barStyle: {},
+      sliderRect: {
+        left: 0,
+        width: 0
+      }
+    };
+  },
+  watch: {
+    // #ifdef VUE3
+    modelValue(n) {
+      // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+      if (this.status == 'end') this.updateValue(this.modelValue, false);
+    },
+    // #endif
+    // #ifdef VUE2
+    value(n) {
+      // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
+      if (this.status == 'end') this.updateValue(this.value, false);
+    },
+    // #endif
+    rangeValue: {
+      handler(n) {
+        if (this.status == 'end') {
+          this.updateValue(this.rangeValue[0], false, 0);
+          this.updateValue(this.rangeValue[1], false, 1);
+        }
+      },
+      deep: true
+    }
+  },
+  created() {},
+  async mounted() {
+    // 获取滑块条的尺寸信息
+    if (!this.useNative) {
+      // #ifndef APP-NVUE
+      this.$uGetRect('.u-slider__base').then((rect) => {
+        this.sliderRect = rect;
+        // console.log('sliderRect', this.sliderRect)
+        if (this.sliderRect.width == 0) {
+          console.info('如在弹窗等元素中使用，请使用v-if来显示滑块，否则无法计算长度。');
+        }
+        this.init();
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      await sleep(30); // 不延迟会出现size获取都为0的问题
+      const ref = this.$refs['u-slider__base'];
+      ref &&
+        dom.getComponentRect(ref, (res) => {
+          // console.log(res)
+          this.sliderRect = {
+            left: res.size.left,
+            width: res.size.width
+          };
+          this.init();
+        });
+      // #endif
+    }
+  },
+  methods: {
+    addStyle,
+    getPx,
+    init() {
+      if (this.isRange) {
+        this.updateValue(this.rangeValue[0], false, 0);
+        this.updateValue(this.rangeValue[1], false, 1);
+      } else {
+        // #ifdef VUE3
+        this.updateValue(this.modelValue, false);
+        // #endif
+        // #ifdef VUE2
+        this.updateValue(this.value, false);
+        // #endif
+      }
+    },
+    // native拖动过程中触发
+    changingHandler(e) {
+      const { value } = e.detail;
+      // 更新v-model的值
+      // #ifdef VUE3
+      this.$emit('update:modelValue', value);
+      // #endif
+      // #ifdef VUE2
+      this.$emit('input', value);
+      // #endif
+      // 触发事件
+      this.$emit('changing', value);
+    },
+    // native滑动结束时触发
+    changeHandler(e) {
+      const { value } = e.detail;
+      // 更新v-model的值
+      // #ifdef VUE3
+      this.$emit('update:modelValue', value);
+      // #endif
+      // #ifdef VUE2
+      this.$emit('input', value);
+      // #endif
+      // 触发事件
+      this.$emit('change', value);
+    },
+    onTouchStart(event, index = 1) {
+      if (this.disabled) return;
+      this.startX = 0;
+      // 触摸点集
+      let touches = event.touches[0];
+      // 触摸点到屏幕左边的距离
+      this.startX = touches.clientX;
+      // 此处的this.modelValue虽为props值，但是通过$emit('update:modelValue')进行了修改
+      if (this.isRange) {
+        this.startValue0 = this.format(this.rangeValue[0], 0);
+        this.startValue = this.format(this.rangeValue[1], 1);
+      } else {
+        // #ifdef VUE3
+        this.startValue = this.format(this.modelValue);
+        // #endif
+        // #ifdef VUE2
+        this.startValue = this.format(this.value);
+        // #endif
+      }
+      // 标示当前的状态为开始触摸滑动
+      this.status = 'start';
+      let clientX = 0;
+      // #ifndef APP-NVUE
+      clientX = touches.clientX;
+      // #endif
+      // #ifdef APP-NVUE
+      clientX = touches.screenX;
+      // #endif
+      this.distanceX = clientX - this.sliderRect.left;
+      // 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+      // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+      this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + parseFloat(this.min);
+      this.status = 'moving';
+      // 发出moving事件
+      let $crtFmtValue = this.updateValue(this.newValue, true, index);
+      this.$emit('changing', $crtFmtValue);
+    },
+    onTouchMove(event, index = 1) {
+      if (this.disabled) return;
+      // 连续触摸的过程会一直触发本方法，但只有手指触发且移动了才被认为是拖动了，才发出事件
+      // 触摸后第一次移动已经将status设置为moving状态，故触摸第二次移动不会触发本事件
+      if (this.status == 'start') this.$emit('start');
+      let touches = event.touches[0];
+      // console.log('touchs', touches)
+      // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
+      let clientX = 0;
+      // #ifndef APP-NVUE
+      clientX = touches.clientX;
+      // #endif
+      // #ifdef APP-NVUE
+      clientX = touches.screenX;
+      // #endif
+      this.distanceX = clientX - this.sliderRect.left;
+      // 获得移动距离对整个滑块的值，此为带有多位小数的值，不能用此更新视图
+      // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
+      this.newValue = (this.distanceX / this.sliderRect.width) * (this.max - this.min) + parseFloat(this.min);
+      this.status = 'moving';
+      // 发出moving事件
+      let $crtFmtValue = this.updateValue(this.newValue, true, index);
+      this.$emit('changing', $crtFmtValue);
+    },
+    onTouchEnd(event, index = 1) {
+      if (this.disabled) return;
+      if (this.status === 'moving') {
+        let $crtFmtValue = this.updateValue(this.newValue, false, index);
+        this.$emit('change', $crtFmtValue);
+      }
+      this.status = 'end';
+    },
+    onTouchStart2(event, index = 1) {
+      if (!this.isRange) {
+        // this.onChangeStart(event, index);
+      }
+    },
+    onTouchMove2(event, index = 1) {
+      if (!this.isRange) {
+        // this.onTouchMove(event, index);
+      }
+    },
+    onTouchEnd2(event, index = 1) {
+      if (!this.isRange) {
+        // this.onTouchEnd(event, index);
+      }
+    },
+    onClick(event) {
+      // if (this.isRange) return;
+      if (this.disabled) return;
+      // 直接点击滑块的情况，计算方式与onTouchMove方法相同
+      // console.log('click', event)
+      // #ifndef APP-NVUE
+      // nvue下暂时无法获取坐标
+      let clientX = event.detail.x - this.sliderRect.left;
+      this.newValue = (clientX / this.sliderRect.width) * (this.max - this.min) + parseFloat(this.min);
+      this.updateValue(this.newValue, false, 1);
+      // #endif
+    },
+    updateValue(value, drag, index = 1) {
+      // 去掉小数部分，同时也是对step步进的处理
+      let valueFormat = this.format(value, index);
+      // 不允许滑动的值超过max最大值
+      if (valueFormat > this.max) {
+        valueFormat = this.max;
+      }
+      // 设置移动的距离，不能用百分比，因为NVUE不支持。
+      let width = Math.min(((valueFormat - this.min) / (this.max - this.min)) * this.sliderRect.width, this.sliderRect.width);
+      let barStyle = {
+        width: width + 'px'
+      };
+      // 移动期间无需过渡动画
+      if (drag == true) {
+        barStyle.transition = 'none';
+      } else {
+        // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
+        delete barStyle.transition;
+      }
+      // 修改value值
+      if (this.isRange) {
+        this.rangeValue[index] = valueFormat;
+        this.$emit('update:modelValue', this.rangeValue);
+      } else {
+        // #ifdef VUE3
+        this.$emit('update:modelValue', valueFormat);
+        // #endif
+        // #ifdef VUE2
+        this.$emit('input', valueFormat);
+        // #endif
+      }
+      switch (index) {
+        case 0:
+          this.barStyle0 = { ...barStyle };
+          break;
+        case 1:
+          this.barStyle = { ...barStyle };
+          break;
+        default:
+          break;
+      }
+      if (this.isRange) {
+        return this.rangeValue;
+      } else {
+        return valueFormat;
+      }
+    },
+    format(value, index = 1) {
+      // 将小数变成整数，为了减少对视图的更新，造成视图层与逻辑层的阻塞
+      if (this.isRange) {
+        switch (index) {
+          case 0:
+            return (
+              Math.round(
+                Math.max(this.min, Math.min(value, this.rangeValue[1] - parseInt(this.step), this.max)) / parseInt(this.step)
+              ) * parseInt(this.step)
+            );
+            break;
+          case 1:
+            return (
+              Math.round(
+                Math.max(this.min, this.rangeValue[0] + parseInt(this.step), Math.min(value, this.max)) / parseInt(this.step)
+              ) * parseInt(this.step)
+            );
+            break;
+          default:
+            break;
+        }
+      } else {
+        return Math.round(Math.max(this.min, Math.min(value, this.max)) / parseInt(this.step)) * parseInt(this.step);
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-status-bar/props.js

@@ -1,9 +1,15 @@
-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: {
     bgColor: {
       type: String,
-      default: defprops.statusBar.bgColor
+      default: () => defProps.statusBar.bgColor
+    },
+    // 状态栏获取得高度
+    height: {
+      type: Number,
+      default: () => defProps.statusBar.height
     }
   }
-};
+});

package/uview-plus/{libs/config/props → components/u-status-bar}/statusBar.js

@@ -10,6 +10,7 @@
 export default {
     // statusBar
     statusBar: {
-        bgColor: 'transparent'
+        bgColor: 'transparent',
+		height: 0
     }
 }

package/uview-plus/components/u-status-bar/u-status-bar.vue

@@ -1,16 +1,17 @@
 <template>
-  <view :style="[style]" class="u-status-bar">
+  <view :style="[style]" class="u-status-bar" :class="[isH5 && 'u-safe-area-inset-top']">
     <slot />
   </view>
 </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, addStyle, deepMerge, getWindowInfo } from '../../libs/function/index';
 /**
  * StatbusBar 状态栏占位
  * @description 本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
- * @tutorial https://uviewui.com/components/statusBar.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/statusBar.html
  * @property {String}			bgColor			背景色 (默认 'transparent' )
  * @property {String | Object}	customStyle		自定义样式
  * @example <u-status-bar></u-status-bar>
@@ -19,15 +20,29 @@ export default {
   name: 'u-status-bar',
   mixins: [mpMixin, mixin, props],
   data() {
-    return {};
+    return {
+      isH5: false
+    };
   },
+  created() {
+    // #ifdef H5
+    this.isH5 = true;
+    // #endif
+  },
+  emits: ['update:height'],
   computed: {
     style() {
       const style = {};
       // 状态栏高度，由于某些安卓和微信开发工具无法识别css的顶部状态栏变量，所以使用js获取的方式
-      style.height = uni.$u.addUnit(uni.$u.sys().statusBarHeight, 'px');
+      let sheight = getWindowInfo().statusBarHeight;
+      this.$emit('update:height', sheight);
+      if (sheight == 0) {
+        this.isH5 = true;
+      } else {
+        style.height = addUnit(sheight, 'px');
+      }
       style.backgroundColor = this.bgColor;
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   }
 };

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

@@ -1,40 +1,41 @@
-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: {
     // 排列方向
     direction: {
       type: String,
-      default: defprops.steps.direction
+      default: () => defProps.steps.direction
     },
     // 设置第几个步骤
     current: {
       type: [String, Number],
-      default: defprops.steps.current
+      default: () => defProps.steps.current
     },
     // 激活状态颜色
     activeColor: {
       type: String,
-      default: defprops.steps.activeColor
+      default: () => defProps.steps.activeColor
     },
     // 未激活状态颜色
     inactiveColor: {
       type: String,
-      default: defprops.steps.inactiveColor
+      default: () => defProps.steps.inactiveColor
     },
     // 激活状态的图标
     activeIcon: {
       type: String,
-      default: defprops.steps.activeIcon
+      default: () => defProps.steps.activeIcon
     },
     // 未激活状态图标
     inactiveIcon: {
       type: String,
-      default: defprops.steps.inactiveIcon
+      default: () => defProps.steps.inactiveIcon
     },
     // 是否显示点类型
     dot: {
       type: Boolean,
-      default: defprops.steps.dot
+      default: () => defProps.steps.dot
     }
   }
-};
+});