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

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

@@ -0,0 +1,3 @@
+<template>
  <view class="u-select">
    <view class="u-select__content">
      <view class="u-select__label" @click="openSelect">
        <slot name="text" :currentLabel="currentLabel">
          <text class="u-select__text" v-if="showOptionsLabel">
            {{ currentLabel }}
          </text>
          <text class="u-select__text" v-else>
            {{ label }}
          </text>
        </slot>
        <slot name="icon">
          <u-icon name="arrow-down" :size="iconSize" :color="iconColor"></u-icon>
        </slot>
      </view>
      <u-overlay
        :show="isOpen"
        @click="overlayClick"
        v-if="overlay"
        :zIndex="zIndex"
        :duration="duration + 50"
        :customStyle="overlayStyle"
        :opacity="overlayOpacity"
        @touchmove.stop.prevent="noop"
      ></u-overlay>
      <view
        class="u-select__options__wrap"
        :style="{ overflowY: 'auto', zIndex: zIndex + 1, left: optionsWrapLeft, right: optionsWrapRight, maxHeight: maxHeight }"
      >
        <view class="u-select__options" v-if="isOpen">
          <slot name="options">
            <view
              class="u-select__options_item"
              :class="current == item[keyName] ? 'active' : ''"
              :key="index"
              v-for="(item, index) in options"
              @click="selectItem(item)"
            >
              <slot name="optionItem" :item="item">
                <text class="u-select__item_text" :style="{ color: itemColor }">
                  {{ item[labelName] }}
                </text>
              </slot>
            </view>
          </slot>
        </view>
      </view>
    </view>
  </view>
  name: 'up-select',
  emits: ['update:current', 'select'],
  props: {
    maxHeight: {
      type: String,
      default: '90vh'
    },
    overlay: {
      type: Boolean,
      default: true
    },
    overlayOpacity: {
      type: Number,
      default: 0.01
    },
    overlayStyle: {
      type: Object,
      default: () => {
        return {};
      }
    },
    duration: {
      type: Number,
      default: 300
    },
    label: {
      type: String,
      default: '选项'
    },
    options: {
      type: Array,
      default: () => {
        return [];
      }
    },
    keyName: {
      type: String,
      default: 'id'
    },
    labelName: {
      type: String,
      default: 'name'
    },
    showOptionsLabel: {
      type: Boolean,
      default: false
    },
    current: {
      type: [String, Number],
      default: ''
    },
    zIndex: {
      type: Number,
      default: 11000
    },
    itemColor: {
      type: String,
      default: '#333333'
    },
    iconColor: {
      type: String,
      default: ''
    },
    iconSize: {
      type: [String],
      default: '13px'
    }
  },
  data() {
    return {
      isOpen: false,
      optionsWrapLeft: 'auto',
      optionsWrapRight: 'auto'
    };
  },
  computed: {
    currentLabel() {
      let name = '';
      this.options.forEach((ele) => {
        if (ele[this.keyName] === this.current) {
          name = ele[this.labelName];
        }
      });
      return name;
    }
  },
  methods: {
    openSelect() {
      this.isOpen = true;
      this.$nextTick(() => {
        if (this.isOpen) {
          this.adjustOptionsWrapPosition();
        }
      });
    },
    overlayClick() {
      this.isOpen = false;
    },
    selectItem(item) {
      this.isOpen = false;
      this.$emit('update:current', item[this.keyName]);
      this.$emit('select', item);
    },
    adjustOptionsWrapPosition() {
      let wi = getWindowInfo();
      let windowWidth = wi.windowWidth;
      this.$uGetRect('.u-select__options__wrap').then((rect) => {
        console.log(rect);
        if (rect.left + rect.width > windowWidth) {
          // 如果右侧被遮挡，则调整到左侧
          this.optionsWrapLeft = 'auto';
          this.optionsWrapRight = `0px`;
        }
      });
    }
  }
+@import './style.css';
+</style>

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

@@ -1,60 +1,61 @@
-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: {
     // 是否展示骨架组件
     loading: {
       type: Boolean,
-      default: defprops.skeleton.loading
+      default: () => defProps.skeleton.loading
     },
     // 是否开启动画效果
     animate: {
       type: Boolean,
-      default: defprops.skeleton.animate
+      default: () => defProps.skeleton.animate
     },
     // 段落占位图行数
     rows: {
       type: [String, Number],
-      default: defprops.skeleton.rows
+      default: () => defProps.skeleton.rows
     },
     // 段落占位图的宽度
     rowsWidth: {
       type: [String, Number, Array],
-      default: defprops.skeleton.rowsWidth
+      default: () => defProps.skeleton.rowsWidth
     },
     // 段落占位图的高度
     rowsHeight: {
       type: [String, Number, Array],
-      default: defprops.skeleton.rowsHeight
+      default: () => defProps.skeleton.rowsHeight
     },
     // 是否展示标题占位图
     title: {
       type: Boolean,
-      default: defprops.skeleton.title
+      default: () => defProps.skeleton.title
     },
     // 段落标题的宽度
     titleWidth: {
       type: [String, Number],
-      default: defprops.skeleton.titleWidth
+      default: () => defProps.skeleton.titleWidth
     },
     // 段落标题的高度
     titleHeight: {
       type: [String, Number],
-      default: defprops.skeleton.titleHeight
+      default: () => defProps.skeleton.titleHeight
     },
     // 是否展示头像占位图
     avatar: {
       type: Boolean,
-      default: defprops.skeleton.avatar
+      default: () => defProps.skeleton.avatar
     },
     // 头像占位图大小
     avatarSize: {
       type: [String, Number],
-      default: defprops.skeleton.avatarSize
+      default: () => defProps.skeleton.avatarSize
     },
     // 头像占位图的形状，circle-圆形，square-方形
     avatarShape: {
       type: String,
-      default: defprops.skeleton.avatarShape
+      default: () => defProps.skeleton.avatarShape
     }
   }
-};
+});

package/uview-plus/components/u-skeleton/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;
@@ -59,4 +74,4 @@ view, scroll-view, swiper-item {
     background-position: 0 50%;
   }
 }
-/* #endif */
+/* #endif */

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

@@ -6,8 +6,8 @@
         v-if="avatar"
         :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
         :style="{
-          height: $u.addUnit(avatarSize),
-          width: $u.addUnit(avatarSize)
+          height: addUnit(avatarSize),
+          width: addUnit(avatarSize)
         }"
       ></view>
       <view class="u-skeleton__wrapper__content" ref="u-skeleton__wrapper__content" style="flex: 1">
@@ -16,7 +16,7 @@
           v-if="title"
           :style="{
             width: uTitleWidth,
-            height: $u.addUnit(titleHeight)
+            height: addUnit(titleHeight)
           }"
           :class="[animate && 'animate']"
         ></view>
@@ -37,9 +37,11 @@
   </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, sleep, error } from '../../libs/function/index';
+import test from '../../libs/function/test';
 // #ifdef APP-NVUE
 // 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
 const dom = uni.requireNativePlugin('dom');
@@ -78,29 +80,29 @@ export default {
   computed: {
     rowsArray() {
       if (/%$/.test(this.rowsHeight)) {
-        uni.$u.error('rowsHeight参数不支持百分比单位');
+        error('rowsHeight参数不支持百分比单位');
       }
       const rows = [];
       for (let i = 0; i < this.rows; i++) {
         let item = {},
           // 需要预防超出数组边界的情况
-          rowWidth = uni.$u.test.array(this.rowsWidth)
+          rowWidth = test.array(this.rowsWidth)
             ? this.rowsWidth[i] || (i === this.rows - 1 ? '70%' : '100%')
             : i === this.rows - 1
-            ? '70%'
-            : this.rowsWidth,
-          rowHeight = uni.$u.test.array(this.rowsHeight) ? this.rowsHeight[i] || '18px' : this.rowsHeight;
+              ? '70%'
+              : this.rowsWidth,
+          rowHeight = test.array(this.rowsHeight) ? this.rowsHeight[i] || '18px' : this.rowsHeight;
         // 如果有title占位图，第一个段落占位图的外边距需要大一些，如果没有title占位图，第一个段落占位图则无需外边距
         // 之所以需要这么做，是因为weex的无能，以提升性能为借口不支持css的一些伪类
         item.marginTop = !this.title && i === 0 ? 0 : this.title && i === 0 ? '20px' : '12px';
         // 如果设置的为百分比的宽度，转换为px值，因为nvue不支持百分比单位
         if (/%$/.test(rowWidth)) {
           // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
-          item.width = uni.$u.addUnit((this.width * parseInt(rowWidth)) / 100);
+          item.width = addUnit((this.width * parseInt(rowWidth)) / 100);
         } else {
-          item.width = uni.$u.addUnit(rowWidth);
+          item.width = addUnit(rowWidth);
         }
-        item.height = uni.$u.addUnit(rowHeight);
+        item.height = addUnit(rowHeight);
         rows.push(item);
       }
       // console.log(rows);
@@ -110,17 +112,18 @@ export default {
       let tWidth = 0;
       if (/%$/.test(this.titleWidth)) {
         // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
-        tWidth = uni.$u.addUnit((this.width * parseInt(this.titleWidth)) / 100);
+        tWidth = addUnit((this.width * parseInt(this.titleWidth)) / 100);
       } else {
-        tWidth = uni.$u.addUnit(this.titleWidth);
+        tWidth = addUnit(this.titleWidth);
       }
-      return uni.$u.addUnit(tWidth);
+      return addUnit(tWidth);
     }
   },
   mounted() {
     this.init();
   },
   methods: {
+    addUnit,
     init() {
       this.getComponentWidth();
       // #ifdef APP-NVUE
@@ -130,7 +133,7 @@ export default {
     async setNvueAnimation() {
       // #ifdef APP-NVUE
       // 为了让opacity:1的状态保持一定时间，这里做一个延时
-      await uni.$u.sleep(500);
+      await sleep(500);
       const skeleton = this.$refs['u-skeleton__wrapper'];
       skeleton &&
         this.loading &&
@@ -166,7 +169,7 @@ export default {
     // 获取组件的宽度
     async getComponentWidth() {
       // 延时一定时间，以获取dom尺寸
-      await uni.$u.sleep(20);
+      await sleep(20);
       // #ifndef APP-NVUE
       this.$uGetRect('.u-skeleton__wrapper__content').then((size) => {
         this.width = size.width;

package/uview-plus/components/u-slider/mpwxs.js

@@ -1,3 +1,4 @@
+import { sleep } from '../../libs/function/index';
 export default {
     data() {
         return {
@@ -23,7 +24,7 @@ export default {
         // 获取slider尺寸
         getSliderRect() {
             // 获取滑块条的尺寸信息
-            uni.$u.sleep().then(() => {
+            sleep().then(() => {
                 this.$uGetRect('.u-slider').then((rect) => {
                     this.info.width = rect.width
                     this.info.left = rect.left

package/uview-plus/components/u-slider/nvue.js

@@ -8,6 +8,7 @@ const BindingX = uni.requireNativePlugin('bindingx')
 const dom = uni.requireNativePlugin('dom')
 // nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue
 const animation = uni.requireNativePlugin('animation')
+import { range } from '../../libs/function/index';
 export default {
     data() {
         return {
@@ -177,7 +178,7 @@ export default {
         // 移动点占总长度的百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的
         // 距离时，实际上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变
         format(value) {
-            return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step
+            return Math.round(range(this.min, this.max, value) / this.step) * this.step
         },
         getRange() {
             const {

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

@@ -1,55 +1,91 @@
-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: {
     // 最小可选值
     min: {
       type: [Number, String],
-      default: defprops.slider.min
+      default: () => defProps.slider.min
     },
     // 最大可选值
     max: {
       type: [Number, String],
-      default: defprops.slider.max
+      default: () => defProps.slider.max
     },
     // 步长，取值必须大于 0，并且可被(max - min)整除
     step: {
       type: [Number, String],
-      default: defprops.slider.step
+      default: () => defProps.slider.step
     },
+    // #ifdef VUE3
+    // 当前取值
+    modelValue: {
+      type: [String, Number],
+      default: () => defProps.slider.value
+    },
+    // #endif
+    // #ifdef VUE2
     // 当前取值
     value: {
-      type: [Number, String],
-      default: defprops.slider.value
+      type: [String, Number],
+      default: () => defProps.slider.value
+    },
+    // #endif
+    // 是否区间模式
+    isRange: {
+      type: Boolean,
+      default: false
+    },
+    // 双滑块时值
+    rangeValue: {
+      type: [Array],
+      default: [0, 0]
     },
     // 滑块右侧已选择部分的背景色
     activeColor: {
       type: String,
-      default: defprops.slider.activeColor
+      default: () => defProps.slider.activeColor
     },
     // 滑块左侧未选择部分的背景色
     inactiveColor: {
       type: String,
-      default: defprops.slider.inactiveColor
+      default: () => defProps.slider.inactiveColor
     },
     // 滑块的大小，取值范围为 12 - 28
     blockSize: {
       type: [Number, String],
-      default: defprops.slider.blockSize
+      default: () => defProps.slider.blockSize
     },
     // 滑块的颜色
     blockColor: {
       type: String,
-      default: defprops.slider.blockColor
+      default: () => defProps.slider.blockColor
+    },
+    // 用户对滑块的自定义颜色
+    blockStyle: {
+      type: Object,
+      default: () => defProps.slider.blockStyle
     },
     // 禁用状态
     disabled: {
       type: Boolean,
-      default: defprops.slider.disabled
+      default: () => defProps.slider.disabled
     },
     // 是否显示当前的选择值
     showValue: {
       type: Boolean,
-      default: defprops.slider.showValue
+      default: () => defProps.slider.showValue
+    },
+    // 是否渲染uni-app框架内置组件
+    useNative: {
+      type: Boolean,
+      default: () => defProps.slider.useNative
+    },
+    // 滑块高度
+    height: {
+      type: String,
+      default: () => defProps.slider.height
     }
   }
-};
+});

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

@@ -20,6 +20,8 @@ export default {
         blockColor: '#ffffff',
         showValue: false,
 		disabled:false,
-        blockStyle: () => {}
+        blockStyle: {},
+        useNative: false,
+        height: '2px'
     }
 }

package/uview-plus/components/u-slider/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,68 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
+.u-slider {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  /* #ifndef APP-NVUE */
+  /* #endif */
+}
+.u-slider__native {
+  flex: 1;
+}
+.u-slider-inner {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  border-radius: 999px;
+  padding: 10px 18px;
+  justify-content: center;
+}
+.u-slider__show-value {
+  margin: 10px 18px 10px 0px;
+}
+.u-slider__show-range-value {
+  padding-top: 2px;
+  font-size: 12px;
+  line-height: 12px;
+  position: absolute;
+  bottom: 0;
+}
+.u-slider__base {
+  background-color: #ebedf0;
+}
+.u-slider-inner:before {
+  position: absolute;
+  right: 0;
+  left: 0;
+  content: "";
+  top: -8px;
+  bottom: -8px;
+  z-index: -1;
+}
+.u-slider__gap {
+  position: relative;
+  border-radius: 999px;
+  transition: width 0.2s;
+  background-color: #1989fa;
+}
+.u-slider__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 */
+}
+.u-slider__button-wrap {
+  position: absolute;
+}
+.u-slider--disabled {
+  opacity: 0.5;
+}