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

package/uview-plus/components/u-index-list/u-index-list.vue

@@ -0,0 +1,367 @@
+<template>
+  <view class="u-index-list">
+    <!-- #ifdef APP-NVUE -->
+    <list
+      :scrollTop="scrollTop"
+      enable-back-to-top
+      :offset-accuracy="1"
+      :style="{
+        maxHeight: $u.addUnit(scrollViewHeight)
+      }"
+      @scroll="scrollHandler"
+      ref="uList"
+    >
+      <cell v-if="$slots.header" ref="header">
+        <slot name="header" />
+      </cell>
+      <slot />
+      <cell v-if="$slots.footer">
+        <slot name="footer" />
+      </cell>
+    </list>
+    <!-- #endif -->
+    <!-- #ifndef APP-NVUE -->
+    <scroll-view
+      :scrollTop="scrollTop"
+      :scrollIntoView="scrollIntoView"
+      :offset-accuracy="1"
+      :style="{
+        maxHeight: $u.addUnit(scrollViewHeight)
+      }"
+      scroll-y
+      @scroll="scrollHandler"
+      ref="uList"
+    >
+      <view v-if="$slots.header">
+        <slot name="header" />
+      </view>
+      <slot />
+      <view v-if="$slots.footer">
+        <slot name="footer" />
+      </view>
+    </scroll-view>
+    <!-- #endif -->
+    <view
+      class="u-index-list__letter"
+      ref="u-index-list__letter"
+      :style="{ top: $u.addUnit(letterInfo.top || 100) }"
+      @touchstart="touchStart"
+      @touchmove.stop.prevent="touchMove"
+      @touchend.stop.prevent="touchEnd"
+      @touchcancel.stop.prevent="touchEnd"
+    >
+      <view
+        class="u-index-list__letter__item"
+        v-for="(item, index) in uIndexList"
+        :key="index"
+        :style="{
+          backgroundColor: activeIndex === index ? activeColor : 'transparent'
+        }"
+      >
+        <text class="u-index-list__letter__item__index" :style="{ color: activeIndex === index ? '#fff' : inactiveColor }">
+          {{ item }}
+        </text>
+      </view>
+    </view>
+    <u-transition
+      mode="fade"
+      :show="touching"
+      :customStyle="{
+        position: 'fixed',
+        right: '50px',
+        top: $u.addUnit(indicatorTop),
+        zIndex: 2
+      }"
+    >
+      <view
+        class="u-index-list__indicator"
+        :class="['u-index-list__indicator--show']"
+        :style="{
+          height: $u.addUnit(indicatorHeight),
+          width: $u.addUnit(indicatorHeight)
+        }"
+      >
+        <text class="u-index-list__indicator__text">{{ uIndexList[activeIndex] }}</text>
+      </view>
+    </u-transition>
+  </view>
+</template>
+<script>
+const indexList = () => {
+  const indexList = [];
+  const charCodeOfA = 'A'.charCodeAt(0);
+  for (let i = 0; i < 26; i++) {
+    indexList.push(String.fromCharCode(charCodeOfA + i));
+  }
+  return indexList;
+};
+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');
+// #endif
+/**
+ * IndexList 索引列表
+ * @description  通过折叠面板收纳内容区域
+ * @tutorial https://uviewui.com/components/indexList.html
+ * @property {String}			inactiveColor	右边锚点非激活的颜色 ( 默认 '#606266' )
+ * @property {String}			activeColor		右边锚点激活的颜色 ( 默认 '#5677fc' )
+ * @property {Array}			indexList		索引字符列表，数组形式
+ * @property {Boolean}			sticky			是否开启锚点自动吸顶 ( 默认 true )
+ * @property {String | Number}	customNavHeight	自定义导航栏的高度 ( 默认 0 )
+ * */
+export default {
+  name: 'u-index-list',
+  mixins: [mpMixin, mixin, props],
+  // #ifdef MP-WEIXIN
+  // 将自定义节点设置成虚拟的，更加接近Vue组件的表现，能更好的使用flex属性
+  options: {
+    virtualHost: true
+  },
+  // #endif
+  data() {
+    return {
+      // 当前正在被选中的字母索引
+      activeIndex: -1,
+      touchmoveIndex: 1,
+      // 索引字母的信息
+      letterInfo: {
+        height: 0,
+        itemHeight: 0,
+        top: 0
+      },
+      // 设置字母指示器的高度，后面为了让指示器跟随字母，并将尖角部分指向字母的中部，需要依赖此值
+      indicatorHeight: 50,
+      // 字母放大指示器的top值，为了让其指向当前激活的字母
+      // indicatorTop: 0
+      // 当前是否正在被触摸状态
+      touching: false,
+      // 滚动条顶部top值
+      scrollTop: 0,
+      // scroll-view的高度
+      scrollViewHeight: 0,
+      // 系统信息
+      sys: uni.$u.sys(),
+      scrolling: false,
+      scrollIntoView: ''
+    };
+  },
+  computed: {
+    // 如果有传入外部的indexList锚点数组则使用，否则使用内部生成A-Z字母
+    uIndexList() {
+      return this.indexList.length ? this.indexList : indexList();
+    },
+    // 字母放大指示器的top值，为了让其指向当前激活的字母
+    indicatorTop() {
+      const { top, itemHeight } = this.letterInfo;
+      return Math.floor(top + itemHeight * this.activeIndex + itemHeight / 2 - this.indicatorHeight / 2);
+    }
+  },
+  watch: {
+    // 监听字母索引的变化，重新设置尺寸
+    uIndexList: {
+      immediate: true,
+      handler() {
+        uni.$u.sleep().then(() => {
+          this.setIndexListLetterInfo();
+        });
+      }
+    }
+  },
+  created() {
+    this.children = [];
+    this.anchors = [];
+    this.init();
+  },
+  mounted() {
+    this.setIndexListLetterInfo();
+  },
+  methods: {
+    init() {
+      // 设置列表的高度为整个屏幕的高度
+      //减去this.customNavHeight，并将this.scrollViewHeight设置为maxHeight
+      //解决当u-index-list组件放在tabbar页面时,scroll-view内容较少时，还能滚动
+      this.scrollViewHeight = this.sys.windowHeight - this.customNavHeight;
+    },
+    // 索引列表被触摸
+    touchStart(e) {
+      // 获取触摸点信息
+      const touchStart = e.changedTouches[0];
+      if (!touchStart) return;
+      this.touching = true;
+      const { pageY } = touchStart;
+      // 根据当前触摸点的坐标，获取当前触摸的为第几个字母
+      const currentIndex = this.getIndexListLetter(pageY);
+      this.setValueForTouch(currentIndex);
+    },
+    // 索引字母列表被触摸滑动中
+    touchMove(e) {
+      // 获取触摸点信息
+      let touchMove = e.changedTouches[0];
+      if (!touchMove) return;
+      // 滑动结束后迅速开始第二次滑动时候 touching 为 false 造成不显示 indicator 问题
+      if (!this.touching) {
+        this.touching = true;
+      }
+      const { pageY } = touchMove;
+      const currentIndex = this.getIndexListLetter(pageY);
+      this.setValueForTouch(currentIndex);
+    },
+    // 触摸结束
+    touchEnd(e) {
+      // 延时一定时间后再隐藏指示器，为了让用户看的更直观，同时也是为了消除快速切换u-transition的show带来的影响
+      uni.$u.sleep(300).then(() => {
+        this.touching = false;
+      });
+    },
+    // 获取索引列表的尺寸以及单个字符的尺寸信息
+    getIndexListLetterRect() {
+      return new Promise((resolve) => {
+        // 延时一定时间，以获取dom尺寸
+        // #ifndef APP-NVUE
+        this.$uGetRect('.u-index-list__letter').then((size) => {
+          resolve(size);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        const ref = this.$refs['u-index-list__letter'];
+        dom.getComponentRect(ref, (res) => {
+          resolve(res.size);
+        });
+        // #endif
+      });
+    },
+    // 设置indexList索引的尺寸信息
+    setIndexListLetterInfo() {
+      this.getIndexListLetterRect().then((size) => {
+        const { height } = size;
+        const sys = uni.$u.sys();
+        const windowHeight = sys.windowHeight;
+        let customNavHeight = 0;
+        // 消除各端导航栏非原生和原生导致的差异，让索引列表字母对屏幕垂直居中
+        if (this.customNavHeight == 0) {
+          // #ifdef H5
+          customNavHeight = sys.windowTop;
+          // #endif
+          // #ifndef H5
+          // 在非H5中，为原生导航栏，其高度不算在windowHeight内，这里设置为负值，后面相加时变成减去其高度的一半
+          customNavHeight = -(sys.statusBarHeight + 44);
+          // #endif
+        } else {
+          customNavHeight = uni.$u.getPx(this.customNavHeight);
+        }
+        this.letterInfo = {
+          height,
+          // 为了让字母列表对屏幕绝对居中，让其对导航栏进行修正，也即往上偏移导航栏的一半高度
+          top: (windowHeight - height) / 2 + customNavHeight / 2,
+          itemHeight: Math.floor(height / this.uIndexList.length)
+        };
+      });
+    },
+    // 获取当前被触摸的索引字母
+    getIndexListLetter(pageY) {
+      const { top, height, itemHeight } = this.letterInfo;
+      // 对H5的pageY进行修正，这是由于uni-app自作多情在H5中将触摸点的坐标跟H5的导航栏结合导致的问题
+      // #ifdef H5
+      pageY += uni.$u.sys().windowTop;
+      // #endif
+      // 对第一和最后一个字母做边界处理，因为用户可能在字母列表上触摸到两端的尽头后依然继续滑动
+      if (pageY < top) {
+        return 0;
+      } else if (pageY >= top + height) {
+        // 如果超出了，取最后一个字母
+        return this.uIndexList.length - 1;
+      } else {
+        // 将触摸点的Y轴偏移值，减去索引字母的top值，除以每个字母的高度，即可得到当前触摸点落在哪个字母上
+        return Math.floor((pageY - top) / itemHeight);
+      }
+    },
+    // 设置各项由触摸而导致变化的值
+    setValueForTouch(currentIndex) {
+      // 如果偏移量太小，前后得出的会是同一个索引字母，为了防抖，进行返回
+      if (currentIndex === this.activeIndex) return;
+      this.activeIndex = currentIndex;
+      // #ifndef APP-NVUE || MP-WEIXIN
+      // 在非nvue中，由于anchor和item都在u-index-item中，所以需要对index-item进行偏移
+      this.scrollIntoView = `u-index-item-${this.uIndexList[currentIndex].charCodeAt(0)}`;
+      // #endif
+      // #ifdef MP-WEIXIN
+      // 微信小程序下，scroll-view的scroll-into-view属性无法对slot中的内容的id生效，只能通过设置scrollTop的形式去移动滚动条
+      this.scrollTop = this.children[currentIndex].top;
+      // #endif
+      // #ifdef APP-NVUE
+      // 在nvue中，由于cell和header为同级元素，所以实际是需要对header(anchor)进行偏移
+      const anchor = `u-index-anchor-${this.uIndexList[currentIndex]}`;
+      dom.scrollToElement(this.anchors[currentIndex].$refs[anchor], {
+        offset: 0,
+        animated: false
+      });
+      // #endif
+    },
+    getHeaderRect() {
+      // 获取header slot的高度，因为list组件中获取元素的尺寸是没有top值的
+      return new Promise((resolve) => {
+        dom.getComponentRect(this.$refs.header, (res) => {
+          resolve(res.size);
+        });
+      });
+    },
+    // scroll-view的滚动事件
+    async scrollHandler(e) {
+      if (this.touching || this.scrolling) return;
+      // 每过一定时间取样一次，减少资源损耗以及可能带来的卡顿
+      this.scrolling = true;
+      uni.$u.sleep(10).then(() => {
+        this.scrolling = false;
+      });
+      let scrollTop = 0;
+      const len = this.children.length;
+      let children = this.children;
+      const anchors = this.anchors;
+      // #ifdef APP-NVUE
+      // nvue下获取的滚动条偏移为负数，需要转为正数
+      scrollTop = Math.abs(e.contentOffset.y);
+      // 获取header slot的尺寸信息
+      const header = await this.getHeaderRect();
+      // item的top值，在nvue下，模拟出的anchor的top，类似非nvue下的index-item的top
+      let top = header.height;
+      // 由于list组件无法获取cell的top值，这里通过header slot和各个item之间的height，模拟出类似非nvue下的位置信息
+      children = this.children.map((item, index) => {
+        const child = {
+          height: item.height,
+          top
+        };
+        // 进行累加，给下一个item提供计算依据
+        top += item.height + anchors[index].height;
+        return child;
+      });
+      // #endif
+      // #ifndef APP-NVUE
+      // 非nvue通过detail获取滚动条位移
+      scrollTop = e.detail.scrollTop;
+      // #endif
+      for (let i = 0; i < len; i++) {
+        const item = children[i],
+          nextItem = children[i + 1];
+        // 如果滚动条高度小于第一个item的top值，此时无需设置任意字母为高亮
+        if (scrollTop <= children[0].top || scrollTop >= children[len - 1].top + children[len - 1].height) {
+          this.activeIndex = -1;
+          break;
+        } else if (!nextItem) {
+          // 当不存在下一个item时，意味着历遍到了最后一个
+          this.activeIndex = len - 1;
+          break;
+        } else if (scrollTop > item.top && scrollTop < nextItem.top) {
+          this.activeIndex = i;
+          break;
+        }
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,196 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // #ifdef VUE3
+    // 绑定的值
+    modelValue: {
+      type: [String, Number],
+      default: defprops.input.value
+    },
+    // #endif
+    // #ifdef VUE2
+    // 绑定的值
+    value: {
+      type: [String, Number],
+      default: defprops.input.value
+    },
+    // #endif
+    // number-数字输入键盘，app-vue下可以输入浮点数，app-nvue和小程序平台下只能输入整数
+    // idcard-身份证输入键盘，微信、支付宝、百度、QQ小程序
+    // digit-带小数点的数字键盘，App的nvue页面、微信、支付宝、百度、头条、QQ小程序
+    // text-文本输入键盘
+    type: {
+      type: String,
+      default: defprops.input.type
+    },
+    // 如果 textarea 是在一个 position:fixed 的区域，需要显示指定属性 fixed 为 true，
+    // 兼容性：微信小程序、百度小程序、字节跳动小程序、QQ小程序
+    fixed: {
+      type: Boolean,
+      default: defprops.input.fixed
+    },
+    // 是否禁用输入框
+    disabled: {
+      type: Boolean,
+      default: defprops.input.disabled
+    },
+    // 禁用状态时的背景色
+    disabledColor: {
+      type: String,
+      default: defprops.input.disabledColor
+    },
+    // 是否显示清除控件
+    clearable: {
+      type: Boolean,
+      default: defprops.input.clearable
+    },
+    // 是否密码类型
+    password: {
+      type: Boolean,
+      default: defprops.input.password
+    },
+    // 最大输入长度，设置为 -1 的时候不限制最大长度
+    maxlength: {
+      type: [String, Number],
+      default: defprops.input.maxlength
+    },
+    // 	输入框为空时的占位符
+    placeholder: {
+      type: String,
+      default: defprops.input.placeholder
+    },
+    // 指定placeholder的样式类，注意页面或组件的style中写了scoped时，需要在类名前写/deep/
+    placeholderClass: {
+      type: String,
+      default: defprops.input.placeholderClass
+    },
+    // 指定placeholder的样式
+    placeholderStyle: {
+      type: [String, Object],
+      default: defprops.input.placeholderStyle
+    },
+    // 是否显示输入字数统计，只在 type ="text"或type ="textarea"时有效
+    showWordLimit: {
+      type: Boolean,
+      default: defprops.input.showWordLimit
+    },
+    // 设置右下角按钮的文字，有效值：send|search|next|go|done，兼容性详见uni-app文档
+    // https://uniapp.dcloud.io/component/input
+    // https://uniapp.dcloud.io/component/textarea
+    confirmType: {
+      type: String,
+      default: defprops.input.confirmType
+    },
+    // 点击键盘右下角按钮时是否保持键盘不收起，H5无效
+    confirmHold: {
+      type: Boolean,
+      default: defprops.input.confirmHold
+    },
+    // focus时，点击页面的时候不收起键盘，微信小程序有效
+    holdKeyboard: {
+      type: Boolean,
+      default: defprops.input.holdKeyboard
+    },
+    // 自动获取焦点
+    // 在 H5 平台能否聚焦以及软键盘是否跟随弹出，取决于当前浏览器本身的实现。nvue 页面不支持，需使用组件的 focus()、blur() 方法控制焦点
+    focus: {
+      type: Boolean,
+      default: defprops.input.focus
+    },
+    // 键盘收起时，是否自动失去焦点，目前仅App3.0.0+有效
+    autoBlur: {
+      type: Boolean,
+      default: defprops.input.autoBlur
+    },
+    // 是否去掉 iOS 下的默认内边距，仅微信小程序，且type=textarea时有效
+    disableDefaultPadding: {
+      type: Boolean,
+      default: defprops.input.disableDefaultPadding
+    },
+    // 指定focus时光标的位置
+    cursor: {
+      type: [String, Number],
+      default: defprops.input.cursor
+    },
+    // 输入框聚焦时底部与键盘的距离
+    cursorSpacing: {
+      type: [String, Number],
+      default: defprops.input.cursorSpacing
+    },
+    // 光标起始位置，自动聚集时有效，需与selection-end搭配使用
+    selectionStart: {
+      type: [String, Number],
+      default: defprops.input.selectionStart
+    },
+    // 光标结束位置，自动聚集时有效，需与selection-start搭配使用
+    selectionEnd: {
+      type: [String, Number],
+      default: defprops.input.selectionEnd
+    },
+    // 键盘弹起时，是否自动上推页面
+    adjustPosition: {
+      type: Boolean,
+      default: defprops.input.adjustPosition
+    },
+    // 输入框内容对齐方式，可选值为：left|center|right
+    inputAlign: {
+      type: String,
+      default: defprops.input.inputAlign
+    },
+    // 输入框字体的大小
+    fontSize: {
+      type: [String, Number],
+      default: defprops.input.fontSize
+    },
+    // 输入框字体颜色
+    color: {
+      type: String,
+      default: defprops.input.color
+    },
+    // 输入框前置图标
+    prefixIcon: {
+      type: String,
+      default: defprops.input.prefixIcon
+    },
+    // 前置图标样式，对象或字符串
+    prefixIconStyle: {
+      type: [String, Object],
+      default: defprops.input.prefixIconStyle
+    },
+    // 输入框后置图标
+    suffixIcon: {
+      type: String,
+      default: defprops.input.suffixIcon
+    },
+    // 后置图标样式，对象或字符串
+    suffixIconStyle: {
+      type: [String, Object],
+      default: defprops.input.suffixIconStyle
+    },
+    // 边框类型，surround-四周边框，bottom-底部边框，none-无边框
+    border: {
+      type: String,
+      default: defprops.input.border
+    },
+    // 是否只读，与disabled不同之处在于disabled会置灰组件，而readonly则不会
+    readonly: {
+      type: Boolean,
+      default: defprops.input.readonly
+    },
+    // 输入框形状，circle-圆形，square-方形
+    shape: {
+      type: String,
+      default: defprops.input.shape
+    },
+    // 用于处理或者过滤输入框内容的方法
+    formatter: {
+      type: [Function, null],
+      default: defprops.input.formatter
+    },
+    // 是否忽略组件内对文本合成系统事件的处理
+    ignoreCompositionEvent: {
+      type: Boolean,
+      default: true
+    }
+  }
+};

package/uview-plus/components/u-input/style.css

@@ -0,0 +1,75 @@
+/* #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-input {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+}
+.u-input--radius, .u-input--square {
+  border-radius: 4px;
+}
+.u-input--no-radius {
+  border-radius: 0;
+}
+.u-input--circle {
+  border-radius: 100px;
+}
+.u-input__content {
+  flex: 1;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+.u-input__content__field-wrapper {
+  position: relative;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  margin: 0;
+  flex: 1;
+}
+.u-input__content__field-wrapper__field {
+  line-height: 26px;
+  text-align: left;
+  color: var(--u-main-color);
+  height: 24px;
+  font-size: 15px;
+  flex: 1;
+}
+.u-input__content__clear {
+  width: 20px;
+  height: 20px;
+  border-radius: 100px;
+  background-color: #c6c7cb;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  transform: scale(0.82);
+  margin-left: 4px;
+}
+.u-input__content__subfix-icon {
+  margin-left: 4px;
+}
+.u-input__content__prefix-icon {
+  margin-right: 4px;
+}

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

@@ -0,0 +1,64 @@
+@import '../../libs/css/components.scss';
+
+.u-input {
+  @include flex(row);
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+
+  &--radius,
+  &--square {
+    border-radius: 4px;
+  }
+
+  &--no-radius {
+    border-radius: 0;
+  }
+
+  &--circle {
+    border-radius: 100px;
+  }
+
+  &__content {
+    flex: 1;
+    @include flex(row);
+    align-items: center;
+    justify-content: space-between;
+
+    &__field-wrapper {
+      position: relative;
+      @include flex(row);
+      margin: 0;
+      flex: 1;
+
+      &__field {
+        line-height: 26px;
+        text-align: left;
+        color: $u-main-color;
+        height: 24px;
+        font-size: 15px;
+        flex: 1;
+      }
+    }
+
+    &__clear {
+      width: 20px;
+      height: 20px;
+      border-radius: 100px;
+      background-color: #c6c7cb;
+      @include flex(row);
+      align-items: center;
+      justify-content: center;
+      transform: scale(0.82);
+      margin-left: 4px;
+    }
+
+    &__subfix-icon {
+      margin-left: 4px;
+    }
+
+    &__prefix-icon {
+      margin-right: 4px;
+    }
+  }
+}