@10yun/cv-mobile-ui 0.5.27 → 0.5.30

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/_doc/changelog.md

@@ -0,0 +1,4 @@
+## 1.0.1（2024-05-08）
+更新域名
+## 1.0.0（2023-09-01）
+本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。

package/uview-plus/components/u-status-bar/_doc/package.json

@@ -0,0 +1,86 @@
+{
+  "id": "u-status-bar",
+  "displayName": "u-status-bar 占位状态栏，自动计算状态栏高度，全端兼容，无论平台，一致体验。",
+  "version": "1.0.1",
+  "description": "本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。",
+  "keywords": [
+    "u-ui",
+    "wuui",
+    "u-status-bar",
+    "status-bar",
+    "状态栏"
+  ],
+  "repository": "",
+  "engines": {
+    "HBuilderX": "^3.1.0"
+  },
+  "dcloudext": {
+    "type": "component-vue",
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "插件不采集任何数据",
+      "permissions": "无"
+    },
+    "npmurl": ""
+  },
+  "uni_modules": {
+    "dependencies": [],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "Vue": {
+          "vue2": "y",
+          "vue3": "y"
+        },
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y",
+          "钉钉": "n",
+          "快手": "n",
+          "飞书": "n",
+          "京东": "n"
+        },
+        "快应用": {
+          "华为": "n",
+          "联盟": "n"
+        }
+      }
+    }
+  }
+}

package/uview-plus/components/u-status-bar/_doc/readme.md

@@ -0,0 +1,16 @@
+## u-status-bar 按钮
+
+> **组件名：u-status-bar**
+
+本组件主要用于状态填充，比如在自定导航栏的时候，它会自动适配一个恰当的状态栏高度。
+
+## [查看文档](https://ijry.github.io/uview-plus/components/safeAreaInset.html)
+
+## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
+(请勿下载插件zip)
+
+<a href="https://ext.dcloud.net.cn/plugin?name=u--ui">
+	<img src="https://wuui.cn/intr.png">
+</a>
+
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**

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));
     }
   }
 };