@10yun/cv-mobile-ui 0.5.43 → 0.5.45

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

@@ -1,60 +0,0 @@
-import defprops from '../../libs/config/props';
-export default {
-  props: {
-    // 是否展示骨架组件
-    loading: {
-      type: Boolean,
-      default: defprops.skeleton.loading
-    },
-    // 是否开启动画效果
-    animate: {
-      type: Boolean,
-      default: defprops.skeleton.animate
-    },
-    // 段落占位图行数
-    rows: {
-      type: [String, Number],
-      default: defprops.skeleton.rows
-    },
-    // 段落占位图的宽度
-    rowsWidth: {
-      type: [String, Number, Array],
-      default: defprops.skeleton.rowsWidth
-    },
-    // 段落占位图的高度
-    rowsHeight: {
-      type: [String, Number, Array],
-      default: defprops.skeleton.rowsHeight
-    },
-    // 是否展示标题占位图
-    title: {
-      type: Boolean,
-      default: defprops.skeleton.title
-    },
-    // 段落标题的宽度
-    titleWidth: {
-      type: [String, Number],
-      default: defprops.skeleton.titleWidth
-    },
-    // 段落标题的高度
-    titleHeight: {
-      type: [String, Number],
-      default: defprops.skeleton.titleHeight
-    },
-    // 是否展示头像占位图
-    avatar: {
-      type: Boolean,
-      default: defprops.skeleton.avatar
-    },
-    // 头像占位图大小
-    avatarSize: {
-      type: [String, Number],
-      default: defprops.skeleton.avatarSize
-    },
-    // 头像占位图的形状，circle-圆形，square-方形
-    avatarShape: {
-      type: String,
-      default: defprops.skeleton.avatarShape
-    }
-  }
-};

package/uview-ui/components/u-skeleton/style.css

@@ -1,62 +0,0 @@
-/* #ifndef APP-NVUE */
-view, scroll-view, swiper-item {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
-.u-skeleton {
-  flex: 1;
-}
-.u-skeleton__wrapper {
-  /* #ifndef APP-NVUE */
-  display: flex;
-  /* #endif */
-  flex-direction: row;
-}
-.u-skeleton__wrapper__avatar {
-  /* #ifdef APP-NVUE */
-  background-color: #f1f2f4;
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
-  background-size: 400% 100%;
-  /* #endif */
-  margin-right: 15px;
-}
-.u-skeleton__wrapper__avatar--circle {
-  border-radius: 100px;
-}
-.u-skeleton__wrapper__avatar--square {
-  border-radius: 4px;
-}
-.u-skeleton__wrapper__content {
-  flex: 1;
-}
-.u-skeleton__wrapper__content__rows, .u-skeleton__wrapper__content__title {
-  /* #ifdef APP-NVUE */
-  background-color: #f1f2f4;
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
-  background-size: 400% 100%;
-  /* #endif */
-  border-radius: 3px;
-}
-/* #ifndef APP-NVUE */
-.animate {
-  animation: skeleton 1.8s ease infinite;
-}
-@keyframes skeleton {
-  0% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0 50%;
-  }
-}
-/* #endif */

package/uview-ui/components/u-skeleton/style.scss

@@ -1,59 +0,0 @@
-@import '../../libs/css/components.scss';
-
-@mixin background {
-  /* #ifdef APP-NVUE */
-  background-color: #f1f2f4;
-  /* #endif */
-  /* #ifndef APP-NVUE */
-  background: linear-gradient(90deg, #f1f2f4 25%, #e6e6e6 37%, #f1f2f4 50%);
-  background-size: 400% 100%;
-  /* #endif */
-}
-
-.u-skeleton {
-  flex: 1;
-
-  &__wrapper {
-    @include flex(row);
-
-    &__avatar {
-      @include background;
-      margin-right: 15px;
-
-      &--circle {
-        border-radius: 100px;
-      }
-
-      &--square {
-        border-radius: 4px;
-      }
-    }
-
-    &__content {
-      flex: 1;
-
-      &__rows,
-      &__title {
-        @include background;
-        border-radius: 3px;
-      }
-    }
-  }
-}
-
-/* #ifndef APP-NVUE */
-.animate {
-  animation: skeleton 1.8s ease infinite;
-}
-
-@keyframes skeleton {
-  0% {
-    background-position: 100% 50%;
-  }
-
-  100% {
-    background-position: 0 50%;
-  }
-}
-
-/* #endif */

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

@@ -1,188 +0,0 @@
-<template>
-  <view class="u-skeleton">
-    <view class="u-skeleton__wrapper" ref="u-skeleton__wrapper" v-if="loading" style="display: flex; flex-direction: row">
-      <view
-        class="u-skeleton__wrapper__avatar"
-        v-if="avatar"
-        :class="[`u-skeleton__wrapper__avatar--${avatarShape}`, animate && 'animate']"
-        :style="{
-          height: $u.addUnit(avatarSize),
-          width: $u.addUnit(avatarSize)
-        }"
-      ></view>
-      <view class="u-skeleton__wrapper__content" ref="u-skeleton__wrapper__content" style="flex: 1">
-        <view
-          class="u-skeleton__wrapper__content__title"
-          v-if="title"
-          :style="{
-            width: uTitleWidth,
-            height: $u.addUnit(titleHeight)
-          }"
-          :class="[animate && 'animate']"
-        ></view>
-        <view
-          class="u-skeleton__wrapper__content__rows"
-          :class="[animate && 'animate']"
-          v-for="(item, index) in rowsArray"
-          :key="index"
-          :style="{
-            width: item.width,
-            height: item.height,
-            marginTop: item.marginTop
-          }"
-        ></view>
-      </view>
-    </view>
-    <slot v-else />
-  </view>
-</template>
-<script>
-import props from './props.js';
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
-// #ifdef APP-NVUE
-// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
-const dom = uni.requireNativePlugin('dom');
-const animation = uni.requireNativePlugin('animation');
-// #endif
-/**
- * Skeleton 骨架屏
- * @description 骨架屏一般用于页面在请求远程数据尚未完成时，页面用灰色块预显示本来的页面结构，给用户更好的体验。
- * @tutorial https://ijry.github.io/uview-plus/components/skeleton.html
- * @property {Boolean}					loading		是否显示骨架占位图，设置为false将会展示子组件内容 (默认 true )
- * @property {Boolean}					animate		是否开启动画效果 (默认 true )
- * @property {String | Number}			rows		段落占位图行数 (默认 0 )
- * @property {String | Number | Array}	rowsWidth	段落占位图的宽度，可以为百分比，数值，带单位字符串等，可通过数组传入指定每个段落行的宽度 (默认 '100%' )
- * @property {String | Number | Array}	rowsHeight	段落的高度 (默认 18 )
- * @property {Boolean}					title		是否展示标题占位图 (默认 true )
- * @property {String | Number}			titleWidth	标题的宽度 (默认 '50%' )
- * @property {String | Number}			titleHeight	标题的高度 (默认 18 )
- * @property {Boolean}					avatar		是否展示头像占位图 (默认 false )
- * @property {String | Number}			avatarSize	头像占位图大小 (默认 32 )
- * @property {String}					avatarShape	头像占位图的形状，circle-圆形，square-方形 (默认 'circle' )
- * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
- */
-export default {
-  name: 'u-skeleton',
-  mixins: [mpMixin, mixin, props],
-  data() {
-    return {
-      width: 0
-    };
-  },
-  watch: {
-    loading() {
-      this.getComponentWidth();
-    }
-  },
-  computed: {
-    rowsArray() {
-      if (/%$/.test(this.rowsHeight)) {
-        uni.$u.error('rowsHeight参数不支持百分比单位');
-      }
-      const rows = [];
-      for (let i = 0; i < this.rows; i++) {
-        let item = {},
-          // 需要预防超出数组边界的情况
-          rowWidth = uni.$u.test.array(this.rowsWidth)
-            ? this.rowsWidth[i] || (i === this.row - 1 ? '70%' : '100%')
-            : i === this.rows - 1
-              ? '70%'
-              : this.rowsWidth,
-          rowHeight = uni.$u.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);
-        } else {
-          item.width = uni.$u.addUnit(rowWidth);
-        }
-        item.height = uni.$u.addUnit(rowHeight);
-        rows.push(item);
-      }
-      // console.log(rows);
-      return rows;
-    },
-    uTitleWidth() {
-      let tWidth = 0;
-      if (/%$/.test(this.titleWidth)) {
-        // 通过parseInt提取出百分比单位中的数值部分，除以100得到百分比的小数值
-        tWidth = uni.$u.addUnit((this.width * parseInt(this.titleWidth)) / 100);
-      } else {
-        tWidth = uni.$u.addUnit(this.titleWidth);
-      }
-      return uni.$u.addUnit(tWidth);
-    }
-  },
-  mounted() {
-    this.init();
-  },
-  methods: {
-    init() {
-      this.getComponentWidth();
-      // #ifdef APP-NVUE
-      this.loading && this.animate && this.setNvueAnimation();
-      // #endif
-    },
-    async setNvueAnimation() {
-      // #ifdef APP-NVUE
-      // 为了让opacity:1的状态保持一定时间，这里做一个延时
-      await uni.$u.sleep(500);
-      const skeleton = this.$refs['u-skeleton__wrapper'];
-      skeleton &&
-        this.loading &&
-        this.animate &&
-        animation.transition(
-          skeleton,
-          {
-            styles: {
-              opacity: 0.5
-            },
-            duration: 600
-          },
-          () => {
-            // 这里无需判断是否loading和开启动画状态，因为最终的状态必须达到opacity: 1，否则可能
-            // 会停留在opacity: 0.5的状态中
-            animation.transition(
-              skeleton,
-              {
-                styles: {
-                  opacity: 1
-                },
-                duration: 600
-              },
-              () => {
-                // 只有在loading中时，才执行动画
-                this.loading && this.animate && this.setNvueAnimation();
-              }
-            );
-          }
-        );
-      // #endif
-    },
-    // 获取组件的宽度
-    async getComponentWidth() {
-      // 延时一定时间，以获取dom尺寸
-      await uni.$u.sleep(20);
-      // #ifndef APP-NVUE
-      this.$uGetRect('.u-skeleton__wrapper__content').then((size) => {
-        this.width = size.width;
-      });
-      // #endif
-      // #ifdef APP-NVUE
-      const ref = this.$refs['u-skeleton__wrapper__content'];
-      ref &&
-        dom.getComponentRect(ref, (res) => {
-          this.width = res.size.width;
-        });
-      // #endif
-    }
-  }
-};
-</script>
-<style scoped>
-@import './style.css';
-</style>

package/uview-ui/components/u-slider/mpother.js

@@ -1,113 +0,0 @@
-/**
- * 使用普通的js方案实现slider
- */
-export default {
-    watch: {
-        value(n) {
-            // 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
-            if (this.status === 'end') {
-                this.updateSliderPlacement(n, true)
-            }
-        }
-    },
-    mounted() {
-        this.init()
-    },
-    methods: {
-        init() {
-            this.getSliderRect()
-        },
-        // 获取slider尺寸
-        getSliderRect() {
-            // 获取滑块条的尺寸信息
-            setTimeout(() => {
-                this.$uGetRect('.u-slider').then((rect) => {
-                    this.sliderRect = rect
-                    this.updateSliderPlacement(this.value, true)
-                })
-            }, 10)
-        },
-        // 是否可以操作
-        canNotDo() {
-            return this.disabled
-        },
-        // 获取当前手势点的X轴位移值
-        getTouchX(e) {
-            return e.touches[0].clientX
-        },
-        formatStep(value) {
-            // 移动点占总长度的百分比
-            return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
-        },
-        // 发出事件
-        emitEvent(event, value) {
-            this.$emit(event, value || this.value)
-        },
-        // 标记当前手势的状态
-        setTouchStatus(status) {
-            this.status = status
-        },
-        onTouchStart(e) {
-            if (this.canNotDo()) {
-                return
-            }
-            // 标示当前的状态为开始触摸滑动
-            this.emitEvent('start')
-            this.setTouchStatus('start')
-        },
-        onTouchMove(e) {
-            if (this.canNotDo()) {
-                return
-            }
-            // 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
-            const x = this.getTouchX(e)
-            const { left, width } = this.sliderRect
-            const distanceX = x - left
-            // 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
-            // 否则造成通信阻塞，需要每改变一个step值时修改一次视图
-            const percent = (distanceX / width) * 100
-            this.setTouchStatus('moving')
-            this.updateSliderPlacement(percent, true, 'moving')
-        },
-        onTouchEnd() {
-            if (this.canNotDo()) {
-                return
-            }
-            this.emitEvent('end')
-            this.setTouchStatus('end')
-        },
-        // 设置滑点的位置
-        updateSliderPlacement(value, drag, event) {
-            // 去掉小数部分，同时也是对step步进的处理
-            const { width } = this.sliderRect
-            const percent = this.formatStep(value)
-            // 设置移动的值
-            const barStyle = {
-                width: `${percent / 100 * width}px`
-            }
-            // 移动期间无需过渡动画
-            if (drag === true) {
-                barStyle.transition = 'none'
-            } else {
-                // 非移动期间，删掉对过渡为空的声明，让css中的声明起效
-                delete barStyle.transition
-            }
-            // 修改value值
-            this.$emit('input', percent)
-            // 事件的名称
-            if (event) {
-                this.emitEvent(event, percent)
-            }
-            this.barStyle = barStyle
-        },
-        onClick(e) {
-            if (this.canNotDo()) {
-                return
-            }
-            // 直接点击滑块的情况，计算方式与onTouchMove方法相同
-            const { left, width } = this.sliderRect
-            const value = ((e.detail.x - left) / width) * 100
-            this.updateSliderPlacement(value, false, 'click')
-        }
-    }
-}

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

@@ -1,42 +0,0 @@
-export default {
-    data() {
-        return {
-            sliderRect: {},
-            info: {
-                width: null,
-                left: null,
-                step: this.step,
-                disabled: this.disabled,
-                min: this.min,
-                max: this.max,
-                value: this.value
-            }
-        }
-    },
-    mounted() {
-        this.init()
-    },
-    methods: {
-        init() {
-            this.getSliderRect()
-        },
-        // 获取slider尺寸
-        getSliderRect() {
-            // 获取滑块条的尺寸信息
-            uni.$u.sleep().then(() => {
-                this.$uGetRect('.u-slider').then((rect) => {
-                    this.info.width = rect.width
-                    this.info.left = rect.left
-                })
-            })
-        },
-        // 此方法由wxs调用，用于修改v-model绑定的值
-        updateValue(value) {
-            this.$emit('input', value)
-        },
-        // 此方法由wxs调用，发出事件
-        emitEvent(e) {
-            this.$emit(e.event, e.value ? e.value : this.value)
-        }
-    }
-}

package/uview-ui/components/u-slider/mpwxs.wxs

@@ -1,121 +0,0 @@
-/**
- * 使用wxs方案实现slider
- * 兼容微信，QQ，H5，Vue版的安卓和iOS
- */
-/**
- * 开始滑动操作
- * @param {Object} e
- * @param {Object} ownerInstance
- */
-function onTouchMove(e, ownerInstance) {
-	// wxs事件对象下有一个instance属性，表示当前触发此事件的组件的实例，通过该实例，可以获取相关的dataset，设置样式等信息
-	// https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html
-	var instance = e.instance;
-	// getState()为一个对象，挂载在instance上，类似组件的data一样，可以存放一些变量，供以后的触发事件中使用
-	var state = instance.getState()
-
-	// 滑块组件的整体尺寸信息
-	var mp = state.mp
-	if(mp.disabled) {
-		return
-	}
-	
-	var distanceX = getTouchX(e) - mp.left
-	// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，step大于1时，不能用此更新视图
-	var percent = (distanceX / mp.width) * 100
-
-	updateSliderPlacement(instance, ownerInstance, percent, 'moving')
-	
-	// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验
-	e.stopPropagation && e.stopPropagation() 
-	e.preventDefault && e.preventDefault()
-}
-
-function onClick(e, ownerInstance) {
-	var instance = e.instance
-	var state = instance.getState()
-	var mp = state.mp
-	if(mp.disabled) {
-		return
-	}
-	
-	// 直接点击滑块的情况，计算方式与onTouchMove方法相同
-	var value = ((e.detail.x - mp.left) / mp.width) * 100
-	updateSliderPlacement(instance, ownerInstance, value, 'click')
-}
-
-function sizeReady(newValue, oldValue, ownerInstance, instance) {
-	// 页面初始化时候，也会触发此方法，传递的值为空，这里不执行往后的逻辑
-	if(!newValue || newValue.disabled) {
-		return 
-	}
-	var state = instance.getState()
-	state.mp = newValue
-	updateSliderPlacement(instance, ownerInstance, newValue.value)
-}
-
-// 设置滑点的位置
-function updateSliderPlacement(instance, ownerInstance, value, event) {
-	var state = instance.getState()
-	var mp = state.mp
-	if(mp.disabled) {
-		return
-	}
-
-	var percent = 0
-	if (mp.step > 1) {
-		// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整
-		percent = Math.round(Math.max(mp.min, Math.min(value, mp.max)) / mp.step) * mp.step
-	} else {
-		// 当step=1时，无需跳步，充分利用wxs性能，滑块实时跟随手势，达到丝滑的效果
-		percent = Math.max(mp.min, Math.min(value, mp.max))
-	}
-	// 返回组件的实例
-	var gapInstance = ownerInstance.selectComponent('.u-slider__gap')
-	// 在移动期间，不允许transition动画，否则会造成卡顿
-	gapInstance[event === 'click' ? 'addClass' : 'removeClass']('u-slider__gap--ani')
-	// 调用逻辑层的方法，修改v-model绑定的值
-	ownerInstance.callMethod('updateValue', Math.round(percent))
-	if(event) {
-		ownerInstance.callMethod('emitEvent', {
-			event: event,
-			value: Math.round(percent)
-		})
-	}
-	
-	// 设置移动的值
-	gapInstance.requestAnimationFrame(function() {
-		gapInstance.setStyle({
-			width: percent / 100 * mp.width + 'px',
-		})
-	})
-}
-
-// 开始滑动
-function onTouchStart(e, ownerInstance) {
-	ownerInstance.callMethod('emitEvent', {
-		event: 'start', 
-		value: null
-	})
-}
-
-// 停止滑动
-function onTouchEnd(e, ownerInstance) {
-	ownerInstance.callMethod('emitEvent', {
-		event: 'end', 
-		value: null
-	})
-}
-
-// 获取当前手势点的X轴位移值
-function getTouchX(e) {
-	return e.touches[0].clientX
-}
-
-module.exports = {
-	onTouchStart: onTouchStart,
-	onTouchMove: onTouchMove,
-	onTouchEnd: onTouchEnd,
-	sizeReady: sizeReady,
-	onClick: onClick
-}