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

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

@@ -0,0 +1,249 @@
+<template>
+  <view class="u-rate" :id="elId" ref="u-rate" :style="[$u.addStyle(customStyle)]">
+    <view class="u-rate__content" @touchmove.stop="touchMove" @touchend.stop="touchEnd">
+      <view class="u-rate__content__item" v-for="(item, index) in Number(count)" :key="index" :class="[elClass]">
+        <view
+          class="u-rate__content__item__icon-wrap"
+          ref="u-rate__content__item__icon-wrap"
+          @tap.stop="clickHandler($event, index + 1)"
+        >
+          <u-icon
+            :name="Math.floor(activeIndex) > index ? activeIcon : inactiveIcon"
+            :color="disabled ? '#c8c9cc' : Math.floor(activeIndex) > index ? activeColor : inactiveColor"
+            :custom-style="{
+              padding: `0 ${$u.addUnit(gutter / 2)}`
+            }"
+            :size="size"
+          ></u-icon>
+        </view>
+        <view
+          v-if="allowHalf"
+          @tap.stop="clickHandler($event, index + 1)"
+          class="u-rate__content__item__icon-wrap u-rate__content__item__icon-wrap--half"
+          :style="[
+            {
+              width: $u.addUnit(rateWidth / 2)
+            }
+          ]"
+          ref="u-rate__content__item__icon-wrap"
+        >
+          <u-icon
+            :name="Math.ceil(activeIndex) > index ? activeIcon : inactiveIcon"
+            :color="disabled ? '#c8c9cc' : Math.ceil(activeIndex) > index ? activeColor : inactiveColor"
+            :custom-style="{
+              padding: `0 ${$u.addUnit(gutter / 2)}`
+            }"
+            :size="size"
+          ></u-icon>
+        </view>
+      </view>
+    </view>
+  </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
+const dom = weex.requireModule('dom');
+// #endif
+/**
+ * rate 评分
+ * @description 该组件一般用于满意度调查，星型评分的场景
+ * @tutorial https://ijry.github.io/uview-plus/components/rate.html
+ * @property {String | Number}	value			用于v-model双向绑定选中的星星数量 (默认 1 )
+ * @property {String | Number}	count			最多可选的星星数量 （默认 5 ）
+ * @property {Boolean}			disabled		是否禁止用户操作 （默认 false ）
+ * @property {Boolean}			readonly		是否只读 （默认 false ）
+ * @property {String | Number}	size			星星的大小，单位px （默认 18 ）
+ * @property {String}			inactiveColor	未选中星星的颜色 （默认 '#b2b2b2' ）
+ * @property {String}			activeColor		选中的星星颜色 （默认 '#FA3534' ）
+ * @property {String | Number}	gutter			星星之间的距离 （默认 4 ）
+ * @property {String | Number}	minCount		最少选中星星的个数 （默认 1 ）
+ * @property {Boolean}			allowHalf		是否允许半星选择 （默认 false ）
+ * @property {String}			activeIcon		选中时的图标名，只能为uView的内置图标 （默认 'star-fill' ）
+ * @property {String}			inactiveIcon	未选中时的图标名，只能为uView的内置图标 （默认 'star' ）
+ * @property {Boolean}			touchable		是否可以通过滑动手势选择评分 （默认 'true' ）
+ * @property {Object}			customStyle		组件的样式，对象形式
+ * @event {Function} change 选中的星星发生变化时触发
+ * @example <u-rate :count="count" :value="2"></u-rate>
+ */
+export default {
+  name: 'u-rate',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      // 生成一个唯一id，否则一个页面多个评分组件，会造成冲突
+      elId: uni.$u.guid(),
+      elClass: uni.$u.guid(),
+      rateBoxLeft: 0, // 评分盒子左边到屏幕左边的距离，用于滑动选择时计算距离
+      // #ifdef VUE3
+      activeIndex: this.modelValue,
+      // #endif
+      // #ifdef VUE2
+      activeIndex: this.value,
+      // #endif
+      rateWidth: 0, // 每个星星的宽度
+      // 标识是否正在滑动，由于iOS事件上touch比click先触发，导致快速滑动结束后，接着触发click，导致事件混乱而出错
+      moving: false
+    };
+  },
+  watch: {
+    // #ifdef VUE3
+    modelValue(val) {
+      this.activeIndex = val;
+    },
+    // #endif
+    // #ifdef VUE2
+    value(val) {
+      this.activeIndex = val;
+    },
+    // #endif
+    activeIndex: 'emitEvent'
+  },
+  // #ifdef VUE3
+  emits: ['update:modelValue', 'change'],
+  // #endif
+  methods: {
+    init() {
+      uni.$u.sleep().then(() => {
+        this.getRateItemRect();
+        this.getRateIconWrapRect();
+      });
+    },
+    // 获取评分组件盒子的布局信息
+    async getRateItemRect() {
+      await uni.$u.sleep();
+      // uView封装的获取节点的方法，详见文档
+      // #ifndef APP-NVUE
+      this.$uGetRect('#' + this.elId).then((res) => {
+        this.rateBoxLeft = res.left;
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      dom.getComponentRect(this.$refs['u-rate'], (res) => {
+        this.rateBoxLeft = res.size.left;
+      });
+      // #endif
+    },
+    // 获取单个星星的尺寸
+    getRateIconWrapRect() {
+      // uView封装的获取节点的方法，详见文档
+      // #ifndef APP-NVUE
+      this.$uGetRect('.' + this.elClass).then((res) => {
+        this.rateWidth = res.width;
+      });
+      // #endif
+      // #ifdef APP-NVUE
+      dom.getComponentRect(this.$refs['u-rate__content__item__icon-wrap'][0], (res) => {
+        this.rateWidth = res.size.width;
+      });
+      // #endif
+    },
+    // 手指滑动
+    touchMove(e) {
+      // 如果禁止通过手动滑动选择，返回
+      if (!this.touchable) {
+        return;
+      }
+      this.preventEvent(e);
+      const x = e.changedTouches[0].pageX;
+      this.getActiveIndex(x);
+    },
+    // 停止滑动
+    touchEnd(e) {
+      // 如果禁止通过手动滑动选择，返回
+      if (!this.touchable) {
+        return;
+      }
+      this.preventEvent(e);
+      const x = e.changedTouches[0].pageX;
+      this.getActiveIndex(x);
+    },
+    // 通过点击，直接选中
+    clickHandler(e, index) {
+      // ios上，moving状态取消事件触发
+      if (uni.$u.os() === 'ios' && this.moving) {
+        return;
+      }
+      this.preventEvent(e);
+      let x = 0;
+      // 点击时，在nvue上，无法获得点击的坐标，所以无法实现点击半星选择
+      // #ifndef APP-NVUE
+      x = e.changedTouches[0].pageX;
+      // #endif
+      // #ifdef APP-NVUE
+      // nvue下，无法通过点击获得坐标信息，这里通过元素的位置尺寸值模拟坐标
+      x = index * this.rateWidth + this.rateBoxLeft;
+      // #endif
+      this.getActiveIndex(x, true);
+    },
+    // 发出事件
+    emitEvent() {
+      // 发出change事件
+      this.$emit('change', this.activeIndex);
+      // 同时修改双向绑定的值
+      // #ifdef VUE3
+      this.$emit('update:modelValue', this.activeIndex);
+      // #endif
+      // #ifdef VUE2
+      this.$emit('input', this.activeIndex);
+      // #endif
+    },
+    // 获取当前激活的评分图标
+    getActiveIndex(x, isClick = false) {
+      if (this.disabled || this.readonly) {
+        return;
+      }
+      // 判断当前操作的点的x坐标值，是否在允许的边界范围内
+      const allRateWidth = this.rateWidth * this.count + this.rateBoxLeft;
+      // 如果小于第一个图标的左边界，设置为最小值，如果大于所有图标的宽度，则设置为最大值
+      x = uni.$u.range(this.rateBoxLeft, allRateWidth, x) - this.rateBoxLeft;
+      // 滑动点相对于评分盒子左边的距离
+      const distance = x;
+      // 滑动的距离，相当于多少颗星星
+      let index;
+      // 判断是否允许半星
+      if (this.allowHalf) {
+        index = Math.floor(distance / this.rateWidth);
+        // 取余，判断小数的区间范围
+        const decimal = distance % this.rateWidth;
+        if (decimal <= this.rateWidth / 2 && decimal > 0) {
+          index += 0.5;
+        } else if (decimal > this.rateWidth / 2) {
+          index++;
+        }
+      } else {
+        index = Math.floor(distance / this.rateWidth);
+        // 取余，判断小数的区间范围
+        const decimal = distance % this.rateWidth;
+        // 非半星时，只有超过了图标的一半距离，才认为是选择了这颗星
+        if (isClick) {
+          if (decimal > 0) index++;
+        } else {
+          if (decimal > this.rateWidth / 2) index++;
+        }
+      }
+      this.activeIndex = Math.min(index, this.count);
+      // 对最少颗星星的限制
+      if (this.activeIndex < this.minCount) {
+        this.activeIndex = this.minCount;
+      }
+      // 设置延时为了让click事件在touchmove之前触发
+      setTimeout(() => {
+        this.moving = true;
+      }, 10);
+      // 一定时间后，取消标识为移动中状态，是为了让click事件无效
+      setTimeout(() => {
+        this.moving = false;
+      }, 10);
+    }
+  },
+  mounted() {
+    this.init();
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-read-more/props.js

@@ -0,0 +1,62 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 默认的显示占位高度
+    showHeight: {
+      type: [String, Number],
+      default: defprops.readMore.showHeight
+    },
+    // 展开后是否显示"收起"按钮
+    toggle: {
+      type: Boolean,
+      default: defprops.readMore.toggle
+    },
+    // 关闭时的提示文字
+    closeText: {
+      type: String,
+      default: defprops.readMore.closeText
+    },
+    // 展开时的提示文字
+    openText: {
+      type: String,
+      default: defprops.readMore.openText
+    },
+    // 提示的文字颜色
+    color: {
+      type: String,
+      default: defprops.readMore.color
+    },
+    // 提示文字的大小
+    fontSize: {
+      type: [String, Number],
+      default: defprops.readMore.fontSize
+    },
+    // 是否显示阴影
+    // 此参数不能写在props/readMore.js中进行默认配置，因为使用了条件编译，在外部js中
+    // uni无法准确识别当前是否处于nvue还是非nvue下
+    shadowStyle: {
+      type: Object,
+      default: () => ({
+        // #ifndef APP-NVUE
+        backgroundImage: 'linear-gradient(-180deg, rgba(255, 255, 255, 0) 0%, #fff 80%)',
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue上不支持设置复杂的backgroundImage属性
+        backgroundImage: 'linear-gradient(to top, #fff, rgba(255, 255, 255, 0.5))',
+        // #endif
+        paddingTop: '100px',
+        marginTop: '-100px'
+      })
+    },
+    // 段落首行缩进的字符个数
+    textIndent: {
+      type: String,
+      default: defprops.readMore.textIndent
+    },
+    // open和close事件时，将此参数返回在回调参数中
+    name: {
+      type: [String, Number],
+      default: defprops.readMore.name
+    }
+  }
+};

package/uview-plus/components/u-read-more/style.css

@@ -0,0 +1,33 @@
+/* #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-read-more__content {
+  overflow: hidden;
+  color: var(--u-content-color);
+  font-size: 15px;
+  text-align: left;
+}
+.u-read-more__toggle {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  justify-content: center;
+}
+.u-read-more__toggle__text {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  margin-top: 5px;
+}

package/uview-plus/components/u-read-more/style.scss

@@ -0,0 +1,22 @@
+@import '../../libs/css/components.scss';
+
+.u-read-more {
+  &__content {
+    overflow: hidden;
+    color: $u-content-color;
+    font-size: 15px;
+    text-align: left;
+  }
+
+  &__toggle {
+    @include flex;
+    justify-content: center;
+
+    &__text {
+      @include flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 5px;
+    }
+  }
+}

package/uview-plus/components/u-read-more/u-read-more.vue

@@ -0,0 +1,119 @@
+<template>
+  <view class="u-read-more">
+    <view
+      class="u-read-more__content"
+      :style="{
+        height: isLongContent && status === 'close' ? $u.addUnit(showHeight) : $u.addUnit(contentHeight),
+        textIndent: textIndent
+      }"
+    >
+      <view class="u-read-more__content__inner" ref="u-read-more__content__inner" :class="[elId]">
+        <slot></slot>
+      </view>
+    </view>
+    <view class="u-read-more__toggle" :style="[innerShadowStyle]" v-if="isLongContent">
+      <slot name="toggle">
+        <view class="u-read-more__toggle__text" @tap="toggleReadMore">
+          <u--text
+            :text="status === 'close' ? closeText : openText"
+            :color="color"
+            :size="fontSize"
+            :lineHeight="fontSize"
+            margin="0 5px 0 0"
+          ></u--text>
+          <view class="u-read-more__toggle__icon">
+            <u-icon :color="color" :size="fontSize + 2" :name="status === 'close' ? 'arrow-down' : 'arrow-up'"></u-icon>
+          </view>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+<script>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * readMore 阅读更多
+ * @description 该组件一般用于内容较长，预先收起一部分，点击展开全部内容的场景。
+ * @tutorial https://ijry.github.io/uview-plus/components/readMore.html
+ * @property {String | Number}	showHeight	内容超出此高度才会显示展开全文按钮，单位px（默认 400 ）
+ * @property {Boolean}			toggle		展开后是否显示收起按钮（默认 false ）
+ * @property {String}			closeText	关闭时的提示文字（默认 '展开阅读全文' ）
+ * @property {String}			openText	展开时的提示文字（默认 '收起' ）
+ * @property {String}			color		提示文字的颜色（默认 '#2979ff' ）
+ * @property {String | Number}	fontSize	提示文字的大小，单位px （默认 14 ）
+ * @property {Object}			shadowStyle	显示阴影的样式
+ * @property {String}			textIndent	段落首行缩进的字符个数 （默认 '2em' ）
+ * @property {String | Number}	name		用于在 open 和 close 事件中当作回调参数返回
+ * @event {Function} open 内容被展开时触发
+ * @event {Function} close 内容被收起时触发
+ * @example <u-read-more><rich-text :nodes="content"></rich-text></u-read-more>
+ */
+export default {
+  name: 'u-read-more',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      isLongContent: false, // 是否需要隐藏一部分内容
+      status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
+      elId: uni.$u.guid(), // 生成唯一class
+      contentHeight: 100 // 内容高度
+    };
+  },
+  computed: {
+    // 展开后无需阴影，收起时才需要阴影样式
+    innerShadowStyle() {
+      if (this.status === 'open') return {};
+      else return this.shadowStyle;
+    }
+  },
+  mounted() {
+    this.init();
+  },
+  methods: {
+    async init() {
+      this.getContentHeight().then((height) => {
+        this.contentHeight = height;
+        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
+        if (height > uni.$u.getPx(this.showHeight)) {
+          this.isLongContent = true;
+          this.status = 'close';
+        }
+      });
+    },
+    // 获取内容的高度
+    async getContentHeight() {
+      // 延时一定时间再获取节点
+      await uni.$u.sleep(30);
+      return new Promise((resolve) => {
+        // #ifndef APP-NVUE
+        this.$uGetRect('.' + this.elId).then((res) => {
+          resolve(res.height);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        const ref = this.$refs['u-read-more__content__inner'];
+        dom.getComponentRect(ref, (res) => {
+          resolve(res.size.height);
+        });
+        // #endif
+      });
+    },
+    // 展开或者收起
+    toggleReadMore() {
+      this.status = this.status === 'close' ? 'open' : 'close';
+      // 如果toggle为false，隐藏"收起"部分的内容
+      if (this.toggle == false) this.isLongContent = false;
+      // 发出打开或者收齐的事件
+      this.$emit(this.status, this.name);
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -0,0 +1,20 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 给col添加间距，左右边距各占一半
+    gutter: {
+      type: [String, Number],
+      default: defprops.row.gutter
+    },
+    // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
+    justify: {
+      type: String,
+      default: defprops.row.justify
+    },
+    // 垂直对齐方式，可选值为top、center、bottom
+    align: {
+      type: String,
+      default: defprops.row.align
+    }
+  }
+};

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

@@ -0,0 +1,17 @@
+/* #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-row {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}

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

@@ -0,0 +1,5 @@
+@import '../../libs/css/components.scss';
+
+.u-row {
+  @include flex;
+}

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

@@ -0,0 +1,82 @@
+<template>
+  <view class="u-row" ref="u-row" :style="[rowStyle]" @tap="clickHandler">
+    <slot />
+  </view>
+</template>
+<script>
+// #ifdef APP-NVUE
+const dom = uni.requireNativePlugin('dom');
+// #endif
+import props from './props.js';
+import mpMixin from '../../libs/mixin/mpMixin.js';
+import mixin from '../../libs/mixin/mixin.js';
+/**
+ * Row 栅格系统中的行
+ * @description 通过基础的 12 分栏，迅速简便地创建布局
+ * @tutorial https://ijry.github.io/uview-plus/components/layout.html
+ * @property {String | Number}	gutter		栅格间隔，左右各为此值的一半，单位px  (默认 0 )
+ * @property {String}			justify		水平排列方式(微信小程序暂不支持) 可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)  (默认 'start' )
+ * @property {String}			align		垂直排列方式 (默认 'center' )
+ * @property {Object}			customStyle	定义需要用到的外部样式
+ *
+ * @event {Function} click row被点击
+ * @example <u-row justify="space-between" customStyle="margin-bottom: 10px"></u-row>
+ */
+export default {
+  name: 'u-row',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {};
+  },
+  computed: {
+    uJustify() {
+      if (this.justify == 'end' || this.justify == 'start') return 'flex-' + this.justify;
+      else if (this.justify == 'around' || this.justify == 'between') return 'space-' + this.justify;
+      else return this.justify;
+    },
+    uAlignItem() {
+      if (this.align == 'top') return 'flex-start';
+      if (this.align == 'bottom') return 'flex-end';
+      else return this.align;
+    },
+    rowStyle() {
+      const style = {
+        alignItems: this.uAlignItem,
+        justifyContent: this.uJustify
+      };
+      // 通过给u-row左右两边的负外边距，消除u-col在有gutter时，第一个和最后一个元素的左内边距和右内边距造成的影响
+      if (this.gutter) {
+        style.marginLeft = uni.$u.addUnit(-Number(this.gutter) / 2);
+        style.marginRight = uni.$u.addUnit(-Number(this.gutter) / 2);
+      }
+      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+    }
+  },
+  methods: {
+    clickHandler(e) {
+      this.$emit('click');
+    },
+    async getComponentWidth() {
+      // 延时一定时间，以确保节点渲染完成
+      await uni.$u.sleep();
+      return new Promise((resolve) => {
+        // uView封装的获取节点的方法，详见文档
+        // #ifndef APP-NVUE
+        this.$uGetRect('.u-row').then((res) => {
+          resolve(res.width);
+        });
+        // #endif
+        // #ifdef APP-NVUE
+        // nvue的dom模块用于获取节点
+        dom.getComponentRect(this.$refs['u-row'], (res) => {
+          resolve(res.size.width);
+        });
+        // #endif
+      });
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-row-notice/props.js

@@ -0,0 +1,40 @@
+import defprops from '../../libs/config/props';
+export default {
+  props: {
+    // 显示的内容，字符串
+    text: {
+      type: String,
+      default: defprops.rowNotice.text
+    },
+    // 是否显示左侧的音量图标
+    icon: {
+      type: String,
+      default: defprops.rowNotice.icon
+    },
+    // 通告模式，link-显示右箭头，closable-显示右侧关闭图标
+    mode: {
+      type: String,
+      default: defprops.rowNotice.mode
+    },
+    // 文字颜色，各图标也会使用文字颜色
+    color: {
+      type: String,
+      default: defprops.rowNotice.color
+    },
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: defprops.rowNotice.bgColor
+    },
+    // 字体大小，单位px
+    fontSize: {
+      type: [String, Number],
+      default: defprops.rowNotice.fontSize
+    },
+    // 水平滚动时的滚动速度，即每秒滚动多少px(rpx)，这有利于控制文字无论多少时，都能有一个恒定的速度
+    speed: {
+      type: [String, Number],
+      default: defprops.rowNotice.speed
+    }
+  }
+};