@10yun/cv-mobile-ui 0.5.18 → 0.5.19

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

@@ -0,0 +1,220 @@
+<template>
+  <view
+    class="u-search"
+    @tap="clickHandler"
+    :style="[
+      {
+        margin: margin
+      },
+      $u.addStyle(customStyle)
+    ]"
+  >
+    <view
+      class="u-search__content"
+      :style="{
+        backgroundColor: bgColor,
+        borderRadius: shape == 'round' ? '100px' : '4px',
+        borderColor: borderColor
+      }"
+    >
+      <template v-if="$slots.label || label !== null">
+        <slot name="label">
+          <text class="u-search__content__label">{{ label }}</text>
+        </slot>
+      </template>
+      <view class="u-search__content__icon">
+        <u-icon
+          @tap="clickIcon"
+          :size="searchIconSize"
+          :name="searchIcon"
+          :color="searchIconColor ? searchIconColor : color"
+        ></u-icon>
+      </view>
+      <input
+        confirm-type="search"
+        @blur="blur"
+        :value="keyword"
+        @confirm="search"
+        @input="inputChange"
+        :disabled="disabled"
+        @focus="getFocus"
+        :focus="focus"
+        :maxlength="maxlength"
+        placeholder-class="u-search__content__input--placeholder"
+        :placeholder="placeholder"
+        :placeholder-style="`color: ${placeholderColor}`"
+        class="u-search__content__input"
+        type="text"
+        :style="[
+          {
+            textAlign: inputAlign,
+            color: color,
+            backgroundColor: bgColor,
+            height: $u.addUnit(height)
+          },
+          inputStyle
+        ]"
+      />
+      <view class="u-search__content__icon u-search__content__close" v-if="keyword && clearabled && focused" @tap="clear">
+        <u-icon name="close" size="11" color="#ffffff" customStyle="line-height: 12px"></u-icon>
+      </view>
+    </view>
+    <text
+      :style="[actionStyle]"
+      class="u-search__action"
+      :class="[(showActionBtn || show) && 'u-search__action--active']"
+      @tap.stop.prevent="custom"
+    >
+      {{ actionText }}
+    </text>
+  </view>
+</template>
+<script>
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * search 搜索框
+ * @description 搜索组件，集成了常见搜索框所需功能，用户可以一键引入，开箱即用。
+ * @tutorial https://ijry.github.io/uview-plus/components/search.html
+ * @property {String}			shape				搜索框形状，round-圆形，square-方形（默认 'round' ）
+ * @property {String}			bgColor				搜索框背景颜色（默认 '#f2f2f2' ）
+ * @property {String}			placeholder			占位文字内容（默认 '请输入关键字' ）
+ * @property {Boolean}			clearabled			是否启用清除控件（默认 true ）
+ * @property {Boolean}			focus				是否自动获得焦点（默认 false ）
+ * @property {Boolean}			showAction			是否显示右侧控件（默认 true ）
+ * @property {Object}			actionStyle			右侧控件的样式，对象形式
+ * @property {String}			actionText			右侧控件文字（默认 '搜索' ）
+ * @property {String}			inputAlign			输入框内容水平对齐方式 （默认 'left' ）
+ * @property {Object}			inputStyle			自定义输入框样式，对象形式
+ * @property {Boolean}			disabled			是否启用输入框（默认 false ）
+ * @property {String}			borderColor			边框颜色，配置了颜色，才会有边框 (默认 'transparent' )
+ * @property {String}			searchIconColor		搜索图标的颜色，默认同输入框字体颜色 (默认 '#909399' )
+ * @property {Number | String}	searchIconSize 搜索图标的字体，默认22
+ * @property {String}			color				输入框字体颜色（默认 '#606266' ）
+ * @property {String}			placeholderColor	placeholder的颜色（默认 '#909399' ）
+ * @property {String}			searchIcon			输入框左边的图标，可以为uView图标名称或图片路径  (默认 'search' )
+ * @property {String}			margin				组件与其他上下左右元素之间的距离，带单位的字符串形式，如"30px"   (默认 '0' )
+ * @property {Boolean} 			animation			是否开启动画，见上方说明（默认 false ）
+ * @property {String}			value				输入框初始值
+ * @property {String | Number}	maxlength			输入框最大能输入的长度，-1为不限制长度  (默认 '-1' )
+ * @property {String | Number}	height				输入框高度，单位px（默认 64 ）
+ * @property {String | Number}	label				搜索框左边显示内容
+ * @property {Object}			customStyle			定义需要用到的外部样式
+ *
+ * @event {Function} change 输入框内容发生变化时触发
+ * @event {Function} search 用户确定搜索时触发，用户按回车键，或者手机键盘右下角的"搜索"键时触发
+ * @event {Function} custom 用户点击右侧控件时触发
+ * @event {Function} clear 用户点击清除按钮时触发
+ * @example <u-search placeholder="日照香炉生紫烟" v-model="keyword"></u-search>
+ */
+export default {
+  name: 'u-search',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      keyword: '',
+      showClear: false, // 是否显示右边的清除图标
+      show: false,
+      // 标记input当前状态是否处于聚焦中，如果是，才会显示右侧的清除控件
+      focused: this.focus
+      // 绑定输入框的值
+      // inputValue: this.value
+    };
+  },
+  watch: {
+    keyword(nVal) {
+      // 双向绑定值，让v-model绑定的值双向变化
+      // #ifdef VUE3
+      this.$emit('update:modelValue', nVal);
+      // #endif
+      // #ifdef VUE2
+      this.$emit('input', nVal);
+      // #endif
+      // 触发change事件，事件效果和v-model双向绑定的效果一样，让用户多一个选择
+      this.$emit('change', nVal);
+    },
+    // #ifdef VUE3
+    modelValue: {
+      immediate: true,
+      handler(nVal) {
+        this.keyword = nVal;
+      }
+    },
+    // #endif
+    // #ifdef VUE2
+    value: {
+      immediate: true,
+      handler(nVal) {
+        this.keyword = nVal;
+      }
+    }
+    // #endif
+  },
+  computed: {
+    showActionBtn() {
+      return !this.animation && this.showAction;
+    }
+  },
+  emits: ['clear', 'search', 'custom', 'focus', 'blur', 'click', 'clickIcon', 'update:modelValue', 'change'],
+  methods: {
+    // 目前HX2.6.9 v-model双向绑定无效，故监听input事件获取输入框内容的变化
+    inputChange(e) {
+      this.keyword = e.detail.value;
+    },
+    // 清空输入
+    // 也可以作为用户通过this.$refs形式调用清空输入框内容
+    clear() {
+      this.keyword = '';
+      // 延后发出事件，避免在父组件监听clear事件时，value为更新前的值(不为空)
+      this.$nextTick(() => {
+        this.$emit('clear');
+      });
+    },
+    // 确定搜索
+    search(e) {
+      this.$emit('search', e.detail.value);
+      try {
+        // 收起键盘
+        uni.hideKeyboard();
+      } catch (e) {}
+    },
+    // 点击右边自定义按钮的事件
+    custom() {
+      this.$emit('custom', this.keyword);
+      try {
+        // 收起键盘
+        uni.hideKeyboard();
+      } catch (e) {}
+    },
+    // 获取焦点
+    getFocus() {
+      this.focused = true;
+      // 开启右侧搜索按钮展开的动画效果
+      if (this.animation && this.showAction) this.show = true;
+      this.$emit('focus', this.keyword);
+    },
+    // 失去焦点
+    blur() {
+      // 最开始使用的是监听图标@touchstart事件，自从hx2.8.4后，此方法在微信小程序出错
+      // 这里改为监听点击事件，手点击清除图标时，同时也发生了@blur事件，导致图标消失而无法点击，这里做一个延时
+      setTimeout(() => {
+        this.focused = false;
+      }, 100);
+      this.show = false;
+      this.$emit('blur', this.keyword);
+    },
+    // 点击搜索框，只有disabled=true时才发出事件，因为禁止了输入，意味着是想跳转真正的搜索页
+    clickHandler() {
+      if (this.disabled) this.$emit('click');
+    },
+    // 点击左边图标
+    clickIcon() {
+      this.$emit('clickIcon');
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,60 @@
+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-plus/components/u-skeleton/style.css

@@ -0,0 +1,62 @@
+/* #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-plus/components/u-skeleton/style.scss

@@ -0,0 +1,59 @@
+@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-plus/components/u-skeleton/u-skeleton.vue

@@ -0,0 +1,188 @@
+<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.rows - 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-plus/components/u-slider/mpother.js

@@ -0,0 +1,113 @@
+/**
+ * 使用普通的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')
+        }
+    }
+}