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

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

@@ -1,119 +1,3 @@
-<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>
+<template>
  <view class="u-read-more">
    <view
      class="u-read-more__content"
      :style="{
        height: isLongContent && status === 'close' ? addUnit(showHeight) : 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">
          <up-text
            :text="status === 'close' ? closeText : openText"
            :color="color"
            :size="fontSize"
            :lineHeight="fontSize"
            margin="0 5px 0 0"
          ></up-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>
 * 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>
 */
  name: 'u-read-more',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      isLongContent: false, // 是否需要隐藏一部分内容
      status: 'close', // 当前隐藏与显示的状态，close-收起状态，open-展开状态
      elId: guid(), // 生成唯一class
      contentHeight: 100 // 内容高度
    };
  },
  computed: {
    // 展开后无需阴影，收起时才需要阴影样式
    innerShadowStyle() {
      if (this.status === 'open') return {};
      else return this.shadowStyle;
    }
  },
  mounted() {
    this.init();
  },
  emits: ['open', 'close'],
  methods: {
    addUnit,
    async init() {
      this.getContentHeight().then((height) => {
        this.contentHeight = height;
        // 判断高度，如果真实内容高度大于占位高度，则显示收起与展开的控制按钮
        if (height > getPx(this.showHeight)) {
          this.isLongContent = true;
          this.status = 'close';
        } else {
          // https://github.com/ijry/uview-plus/issues/270
          this.isLongContent = false;
          this.status = 'close';
        }
      });
    },
    // 获取内容的高度
    async getContentHeight() {
      // 延时一定时间再获取节点
      await 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);
    }
  }
 @import './style.css';
-</style>
+</style>

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

@@ -1,20 +1,21 @@
-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: {
     // 给col添加间距，左右边距各占一半
     gutter: {
       type: [String, Number],
-      default: defprops.row.gutter
+      default: () => defProps.row.gutter
     },
     // 水平排列方式，可选值为`start`(或`flex-start`)、`end`(或`flex-end`)、`center`、`around`(或`space-around`)、`between`(或`space-between`)
     justify: {
       type: String,
-      default: defprops.row.justify
+      default: () => defProps.row.justify
     },
     // 垂直对齐方式，可选值为top、center、bottom
     align: {
       type: String,
-      default: defprops.row.align
+      default: () => defProps.row.align
     }
   }
-};
+});

package/uview-plus/components/u-row/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;
@@ -14,4 +29,4 @@ view, scroll-view, swiper-item {
   display: flex;
   /* #endif */
   flex-direction: row;
-}
+}

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

@@ -7,9 +7,10 @@
 // #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';
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, deepMerge, sleep } from '../../libs/function/index';
 /**
  * Row 栅格系统中的行
  * @description 通过基础的 12 分栏，迅速简便地创建布局
@@ -46,19 +47,20 @@ export default {
       };
       // 通过给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);
+        style.marginLeft = addUnit(-Number(this.gutter) / 2);
+        style.marginRight = addUnit(-Number(this.gutter) / 2);
       }
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     }
   },
+  emits: ['click'],
   methods: {
     clickHandler(e) {
       this.$emit('click');
     },
     async getComponentWidth() {
       // 延时一定时间，以确保节点渲染完成
-      await uni.$u.sleep();
+      await sleep();
       return new Promise((resolve) => {
         // uView封装的获取节点的方法，详见文档
         // #ifndef APP-NVUE

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

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

package/uview-plus/components/u-row-notice/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;
@@ -48,6 +63,7 @@ view, scroll-view, swiper-item {
   display: flex;
   /* #endif */
   flex-direction: row;
+  line-height: 100%;
 }
 /* #ifndef APP-NVUE */
 @keyframes u-loop-animation {
@@ -58,4 +74,4 @@ view, scroll-view, swiper-item {
     transform: translate3d(-100%, 0, 0);
   }
 }
-/* #endif */
+/* #endif */

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

@@ -33,6 +33,7 @@
       animation: u-loop-animation 10s linear infinite both;
       /* #endif */
       @include flex(row);
+      line-height: 100%;
     }
   }
 }

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

@@ -17,9 +17,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, error, sleep, getPx } from '../../libs/function/index';
+import test from '../../libs/function/test';
 // #ifdef APP-NVUE
 const animation = uni.requireNativePlugin('animation');
 const dom = uni.requireNativePlugin('dom');
@@ -63,8 +65,8 @@ export default {
         // #ifndef APP-NVUE
         this.vue();
         // #endif
-        if (!uni.$u.test.string(newValue)) {
-          uni.$u.error('noticebar组件direction为row时，要求text参数为字符串形式');
+        if (!test.string(newValue)) {
+          error('noticebar组件direction为row时，要求text参数为字符串形式');
         }
       }
     },
@@ -89,8 +91,9 @@ export default {
     // 文字内容的样式
     textStyle() {
       let style = {};
+      style.whiteSpace = 'nowrap !important';
       style.color = this.color;
-      style.fontSize = uni.$u.addUnit(this.fontSize);
+      style.fontSize = addUnit(this.fontSize);
       return style;
     },
     animationStyle() {
@@ -129,6 +132,7 @@ export default {
     // #endif
     this.init();
   },
+  emits: ['click', 'close'],
   methods: {
     init() {
       // #ifdef APP-NVUE
@@ -137,8 +141,8 @@ export default {
       // #ifndef APP-NVUE
       this.vue();
       // #endif
-      if (!uni.$u.test.string(this.text)) {
-        uni.$u.error('noticebar组件direction为row时，要求text参数为字符串形式');
+      if (!test.string(this.text)) {
+        error('noticebar组件direction为row时，要求text参数为字符串形式');
       }
     },
     // vue版处理
@@ -147,13 +151,13 @@ export default {
       let boxWidth = 0,
         textWidth = 0;
       // 进行一定的延时
-      await uni.$u.sleep();
+      await sleep();
       // 查询盒子和文字的宽度
       textWidth = (await this.$uGetRect('.u-notice__content__text')).width;
       boxWidth = (await this.$uGetRect('.u-notice__content')).width;
       // 根据t=s/v(时间=路程/速度)，这里为何不需要加上#u-notice-box的宽度，因为中设置了.u-notice-content样式中设置了padding-left: 100%
       // 恰巧计算出来的结果中已经包含了#u-notice-box的宽度
-      this.animationDuration = `${textWidth / uni.$u.getPx(this.speed)}s`;
+      this.animationDuration = `${textWidth / getPx(this.speed)}s`;
       // 这里必须这样开始动画，否则在APP上动画速度不会改变
       this.animationPlayState = 'paused';
       setTimeout(() => {
@@ -168,7 +172,7 @@ export default {
       let boxWidth = 0,
         textWidth = 0;
       // 进行一定的延时
-      await uni.$u.sleep();
+      await sleep();
       // 查询盒子和文字的宽度
       textWidth = (await this.getNvueRect('u-notice__content__text')).width;
       boxWidth = (await this.getNvueRect('u-notice__content')).width;
@@ -197,7 +201,7 @@ export default {
             transform: `translateX(-${textWidth}px)`
           },
           // 滚动时间的计算为，时间 = 路程(boxWidth + textWidth) / 速度，最后转为毫秒
-          duration: ((boxWidth + textWidth) / uni.$u.getPx(this.speed)) * 1000,
+          duration: ((boxWidth + textWidth) / getPx(this.speed)) * 1000,
           delay: 10
         },
         () => {
@@ -244,11 +248,9 @@ export default {
       this.$emit('close');
     }
   },
-  // #ifdef APP-NVUE
-  beforeDestroy() {
+  beforeUnmount() {
     this.stopAnimation = true;
   }
-  // #endif
 };
 </script>
 <style scoped>

package/uview-plus/components/u-safe-bottom/props.js

@@ -1,4 +1,6 @@
-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: {}
-};
+});

package/uview-plus/components/u-safe-bottom/u-safe-bottom.vue

@@ -1 +1,3 @@
-<template>
  <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']"></view>
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <u-status-bar></u-status-bar>
 */
  name: 'u-safe-bottom',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false
    };
  },
  computed: {
    style() {
      const style = {};
      // #ifdef APP-NVUE
      // nvue下，高度使用js计算填充
      style.height = uni.$u.addUnit(uni.$u.sys().safeAreaInsets.bottom, 'px');
      // #endif
      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
    }
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true;
    // #endif
  }
+<template>
  <view class="u-safe-bottom" :style="[style]" :class="[!isNvue && 'u-safe-area-inset-bottom']"></view>
 * SafeBottom 底部安全区
 * @description 这个适配，主要是针对IPhone X等一些底部带指示条的机型，指示条的操作区域与页面底部存在重合，容易导致用户误操作，因此我们需要针对这些机型进行底部安全区适配。
 * @tutorial https://ijry.github.io/uview-plus/components/safeAreaInset.html
 * @property {type}		prop_name
 * @property {Object}	customStyle	定义需要用到的外部样式
 *
 * @event {Function()}
 * @example <u-status-bar></u-status-bar>
 */
  name: 'u-safe-bottom',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      safeAreaBottomHeight: 0,
      isNvue: false
    };
  },
  computed: {
    style() {
      const style = {};
      // #ifdef APP-NVUE || MP-TOUTIAO
      // nvue下，高度使用js计算填充
      style.height = addUnit(getWindowInfo().safeAreaInsets.bottom, 'px');
      // #endif
      return deepMerge(style, addStyle(this.customStyle));
    }
  },
  mounted() {
    // #ifdef APP-NVUE
    // 标识为是否nvue
    this.isNvue = true;
    // #endif
  }
+@import './style.css';
+</style>

package/uview-plus/components/u-scroll-list/nvue.js

@@ -1,3 +1 @@
-// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
    methods: {
        // 此处不写注释，请自行体会
        nvueScrollHandler(e) {
            const anchor = this.$refs['u-scroll-list__scroll-view'].ref
            const element = this.$refs['u-scroll-list__indicator__line__bar'].ref
            const scrollLeft = e.contentOffset.x
            const contentSize = e.contentSize.width
            const { scrollWidth } = this
            const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
-            // 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
-            const actionNum = uni.$u.os() === 'ios' ? 2 : 1
            const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
            BindingX.bind({
                anchor,
                eventType: 'scroll',
                props: [{
                    element,
                    property: 'transform.translateX',
                    expression
                }]
            })
        }
    }
+// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损
    methods: {
        // 此处不写注释，请自行体会
        nvueScrollHandler(e) {
            const anchor = this.$refs['u-scroll-list__scroll-view'].ref
            let element = {}
            if (this.$refs['u-scroll-list__indicator__line__bar']) {
                element = this.$refs['u-scroll-list__indicator__line__bar'].ref
            }
            const scrollLeft = e.contentOffset.x
            const contentSize = e.contentSize.width
            const { scrollWidth } = this
            const barAllMoveWidth = this.indicatorWidth - this.indicatorBarWidth
            // 在安卓和iOS上，需要除的倍数不一样，iOS需要除以2
            const actionNum = os() === 'ios' ? 2 : 1
            const expression = `(x / ${actionNum}) / ${contentSize - scrollWidth} * ${barAllMoveWidth}`
            BindingX.bind({
                anchor,
                eventType: 'scroll',
                props: [{
                    element,
                    property: 'transform.translateX',
                    expression
                }]
            })
        }
    }