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

package/uview-plus/components/u-tabbar-item/props.js

@@ -1,35 +1,36 @@
-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: {
     // item标签的名称，作为与u-tabbar的value参数匹配的标识符
     name: {
       type: [String, Number, null],
-      default: defprops.tabbarItem.name
+      default: () => defProps.tabbarItem.name
     },
     // uView内置图标或者绝对路径的图片
     icon: {
       icon: String,
-      default: defprops.tabbarItem.icon
+      default: () => defProps.tabbarItem.icon
     },
     // 右上角的角标提示信息
     badge: {
       type: [String, Number, null],
-      default: defprops.tabbarItem.badge
+      default: () => defProps.tabbarItem.badge
     },
     // 是否显示圆点，将会覆盖badge参数
     dot: {
       type: Boolean,
-      default: defprops.tabbarItem.dot
+      default: () => defProps.tabbarItem.dot
     },
     // 描述文本
     text: {
       type: String,
-      default: defprops.tabbarItem.text
+      default: () => defProps.tabbarItem.text
     },
     // 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
     badgeStyle: {
       type: [Object, String],
-      default: defprops.tabbarItem.badgeStyle
+      default: () => defProps.tabbarItem.badgeStyle
     }
   }
-};
+});

package/uview-plus/components/u-tabbar-item/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;
@@ -17,8 +32,13 @@ view, scroll-view, swiper-item {
   align-items: center;
   justify-content: center;
   flex: 1;
+  /* #ifndef APP-NVUE */
   width: 100%;
   height: 100%;
+  /* #endif */
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
 }
 .u-tabbar-item__icon {
   /* #ifndef APP-NVUE */
@@ -39,4 +59,4 @@ view, scroll-view, swiper-item {
   flex: 1;
   width: 100%;
 }
-/* #endif */
+/* #endif */

package/uview-plus/components/u-tabbar-item/style.scss

@@ -4,8 +4,13 @@
   align-items: center;
   justify-content: center;
   flex: 1;
+  /* #ifndef APP-NVUE */
   width: 100%;
   height: 100%;
+  /* #endif */
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
 
   &__icon {
     @include flex;

package/uview-plus/components/u-tabbar-item/u-tabbar-item.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-tabbar-item" :style="[$u.addStyle(customStyle)]" @tap="clickHandler">
+  <view class="u-tabbar-item" :style="[addStyle(customStyle)]" @tap="clickHandler">
     <view class="u-tabbar-item__icon">
       <u-icon v-if="icon" :name="icon" :color="isActive ? parentData.activeColor : parentData.inactiveColor" :size="20"></u-icon>
       <template v-else>
@@ -28,9 +28,10 @@
   </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 { addStyle, error } from '../../libs/function/index';
 /**
  * TabbarItem 底部导航栏子组件
  * @description 此组件提供了自定义tabbar的能力。
@@ -65,12 +66,14 @@ export default {
   created() {
     this.init();
   },
+  emits: ['click', 'change'],
   methods: {
+    addStyle,
     init() {
       // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
       this.updateParentData();
       if (!this.parent) {
-        uni.$u.error('u-tabbar-item必须搭配u-tabbar组件使用');
+        error('u-tabbar-item必须搭配u-tabbar组件使用');
       }
       // 本子组件在u-tabbar的children数组中的索引
       const index = this.parent.children.indexOf(this);

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

@@ -1,4 +1,5 @@
-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-table/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;
@@ -8,4 +23,4 @@ view, scroll-view, swiper-item {
   align-items: stretch;
   align-content: flex-start;
 }
-/* #endif */
+/* #endif */

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

@@ -2,9 +2,9 @@
   <view class="u-table"></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';
 /**
  * Table 表格
  * @description 表格组件一般用于展示大量结构化数据的场景 本组件标签类似HTML的table表格，由table、tr、th、td四个组件组成

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

@@ -1,65 +1,71 @@
-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: {
     // 滑块的移动过渡时间，单位ms
     duration: {
       type: Number,
-      default: defprops.tabs.duration
+      default: () => defProps.tabs.duration
     },
     // tabs标签数组
     list: {
       type: Array,
-      default: defprops.tabs.list
+      default: () => defProps.tabs.list
     },
     // 滑块颜色
     lineColor: {
       type: String,
-      default: defprops.tabs.lineColor
+      default: () => defProps.tabs.lineColor
     },
     // 菜单选择中时的样式
     activeStyle: {
       type: [String, Object],
-      default: defprops.tabs.activeStyle
+      default: () => defProps.tabs.activeStyle
     },
     // 菜单非选中时的样式
     inactiveStyle: {
       type: [String, Object],
-      default: defprops.tabs.inactiveStyle
+      default: () => defProps.tabs.inactiveStyle
     },
     // 滑块长度
     lineWidth: {
       type: [String, Number],
-      default: defprops.tabs.lineWidth
+      default: () => defProps.tabs.lineWidth
     },
     // 滑块高度
     lineHeight: {
       type: [String, Number],
-      default: defprops.tabs.lineHeight
+      default: () => defProps.tabs.lineHeight
     },
     // 滑块背景显示大小，当滑块背景设置为图片时使用
     lineBgSize: {
       type: String,
-      default: defprops.tabs.lineBgSize
+      default: () => defProps.tabs.lineBgSize
     },
     // 菜单item的样式
     itemStyle: {
       type: [String, Object],
-      default: defprops.tabs.itemStyle
+      default: () => defProps.tabs.itemStyle
     },
     // 菜单是否可滚动
     scrollable: {
       type: Boolean,
-      default: defprops.tabs.scrollable
+      default: () => defProps.tabs.scrollable
     },
     // 当前选中标签的索引
     current: {
       type: [Number, String],
-      default: defprops.tabs.current
+      default: () => defProps.tabs.current
     },
     // 默认读取的键名
     keyName: {
       type: String,
-      default: defprops.tabs.keyName
+      default: () => defProps.tabs.keyName
+    },
+    // 左侧图标样式
+    iconStyle: {
+      type: [String, Object],
+      default: () => defProps.tabs.iconStyle
     }
   }
-};
+});

package/uview-plus/components/u-tabs/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;
@@ -44,15 +59,19 @@ view, scroll-view, swiper-item {
   flex-direction: row;
   align-items: center;
   justify-content: center;
+  /* #ifdef H5 */
+  cursor: pointer;
+  /* #endif */
 }
 .u-tabs__wrapper__nav__item--disabled {
-  /* #ifndef APP-NVUE */
+  /* #ifdef H5 */
   cursor: not-allowed;
   /* #endif */
 }
 .u-tabs__wrapper__nav__item__text {
   font-size: 15px;
   color: var(--u-content-color);
+  white-space: nowrap !important;
 }
 .u-tabs__wrapper__nav__item__text--disabled {
   color: var(--u-disabled-color) !important;
@@ -66,4 +85,4 @@ view, scroll-view, swiper-item {
   border-radius: 100px;
   transition-property: transform;
   transition-duration: 300ms;
-}
+}

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

@@ -26,9 +26,12 @@
         @include flex;
         align-items: center;
         justify-content: center;
+        /* #ifdef H5 */
+        cursor: pointer;
+        /* #endif */
 
         &--disabled {
-          /* #ifndef APP-NVUE */
+          /* #ifdef H5 */
           cursor: not-allowed;
           /* #endif */
         }
@@ -36,6 +39,7 @@
         &__text {
           font-size: 15px;
           color: $u-content-color;
+          white-space: nowrap !important;
 
           &--disabled {
             color: $u-disabled-color !important;

package/uview-plus/{libs/config/props → components/u-tabs}/tabs.js

@@ -11,22 +11,23 @@ export default {
     //
     tabs: {
         duration: 300,
-        list: () => [],
+        list: [],
         lineColor: '#3c9cff',
-        activeStyle: () => ({
+        activeStyle: {
             color: '#303133'
-        }),
-        inactiveStyle: () => ({
+        },
+        inactiveStyle: {
             color: '#606266'
-        }),
+        },
         lineWidth: 20,
         lineHeight: 3,
         lineBgSize: 'cover',
-        itemStyle: () => ({
+        itemStyle: {
             height: '44px'
-        }),
+        },
         scrollable: true,
 		current: 0,
-		keyName: 'name'
+		keyName: 'name',
+        iconStyle: {}
     }
 }

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-tabs">
+  <view class="u-tabs" :class="[customClass]">
     <view class="u-tabs__wrapper">
       <slot name="left" />
       <view class="u-tabs__wrapper__scroll-view-wrapper">
@@ -17,11 +17,30 @@
               v-for="(item, index) in list"
               :key="index"
               @tap="clickHandler(item, index)"
+              @longpress="longPressHandler(item, index)"
               :ref="`u-tabs__wrapper__nav__item-${index}`"
-              :style="[$u.addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
-              :class="[`u-tabs__wrapper__nav__item-${index}`, item.disabled && 'u-tabs__wrapper__nav__item--disabled']"
+              :style="[addStyle(itemStyle), { flex: scrollable ? '' : 1 }]"
+              :class="[
+                `u-tabs__wrapper__nav__item-${index}`,
+                item.disabled && 'u-tabs__wrapper__nav__item--disabled',
+                innerCurrent == index ? 'u-tabs__wrapper__nav__item-active' : ''
+              ]"
             >
+              <slot v-if="$slots.icon" name="icon" :item="item" :keyName="keyName" :index="index" />
+              <template v-else>
+                <view class="u-tabs__wrapper__nav__item__prefix-icon" v-if="item.icon">
+                  <up-icon :name="item.icon" :customStyle="addStyle(iconStyle)"></up-icon>
+                </view>
+              </template>
+              <slot v-if="$slots.content" name="content" :item="item" :keyName="keyName" :index="index" />
+              <slot
+                v-else-if="!$slots.content && ($slots.default || $slots.$default)"
+                :item="item"
+                :keyName="keyName"
+                :index="index"
+              />
               <text
+                v-else
                 :class="[item.disabled && 'u-tabs__wrapper__nav__item__text--disabled']"
                 class="u-tabs__wrapper__nav__item__text"
                 :style="[textStyle(index)]"
@@ -49,8 +68,8 @@
               ref="u-tabs__wrapper__nav__line"
               :style="[
                 {
-                  width: $u.addUnit(lineWidth),
-                  height: $u.addUnit(lineHeight),
+                  width: addUnit(lineWidth),
+                  height: addUnit(lineHeight),
                   background: lineColor,
                   backgroundSize: lineBgSize
                 }
@@ -63,10 +82,10 @@
               ref="u-tabs__wrapper__nav__line"
               :style="[
                 {
-                  width: $u.addUnit(lineWidth),
+                  width: addUnit(lineWidth),
                   transform: `translate(${lineOffsetLeft}px)`,
                   transitionDuration: `${firstTime ? 0 : duration}ms`,
-                  height: $u.addUnit(lineHeight),
+                  height: addUnit(lineHeight),
                   background: lineColor,
                   backgroundSize: lineBgSize
                 }
@@ -85,9 +104,11 @@
 const animation = uni.requireNativePlugin('animation');
 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 defProps from '../../libs/config/props.js';
+import { addUnit, addStyle, deepMerge, getPx, sleep, getWindowInfo } from '../../libs/function/index';
 /**
  * Tabs 标签
  * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。
@@ -97,7 +118,8 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {String}	keyName	 从`list`元素对象中读取的键名（默认 'name' ）
  * @event {Function(index)} change 标签改变时触发 index: 点击了第几个tab，索引从0开始
  * @event {Function(index)} click 点击标签时触发 index: 点击了第几个tab，索引从0开始
- * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
+ * @event {Function(index)} longPress 长按标签时触发 index: 点击了第几个tab，索引从0开始
+ * @example <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" @longPress="longPress"></u-tabs>
  */
 export default {
   name: 'u-tabs',
@@ -121,7 +143,11 @@ export default {
       handler(newValue, oldValue) {
         // 内外部值不相等时，才尝试移动滑块
         if (newValue !== this.innerCurrent) {
-          this.innerCurrent = newValue;
+          if (typeof newValue == 'string') {
+            this.innerCurrent = parseInt(newValue);
+          } else {
+            this.innerCurrent = newValue;
+          }
           this.$nextTick(() => {
             this.resize();
           });
@@ -140,24 +166,25 @@ export default {
       return (index) => {
         const style = {};
         // 取当期是否激活的样式
-        const customeStyle =
-          index === this.innerCurrent ? uni.$u.addStyle(this.activeStyle) : uni.$u.addStyle(this.inactiveStyle);
+        const customeStyle = index == this.innerCurrent ? addStyle(this.activeStyle) : addStyle(this.inactiveStyle);
         // 如果当前菜单被禁用，则加上对应颜色，需要在此做处理，是因为nvue下，无法在style样式中通过!import覆盖标签的内联样式
         if (this.list[index].disabled) {
           style.color = '#c8c9cc';
         }
-        return uni.$u.deepMerge(customeStyle, style);
+        return deepMerge(customeStyle, style);
       };
     },
     propsBadge() {
-      return uni.$u.props.badge;
+      return defProps.badge;
     }
   },
   async mounted() {
     this.init();
   },
-  emits: ['click', 'change'],
+  emits: ['click', 'longPress', 'change', 'update:current'],
   methods: {
+    addStyle,
+    addUnit,
     setLineLeft() {
       const tabItem = this.list[this.innerCurrent];
       if (!tabItem) {
@@ -166,7 +193,7 @@ export default {
       // 获取滑块该移动的位置
       let lineOffsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => total + curr.rect.width, 0);
       // 获取下划线的数值px表示法
-      const lineWidth = uni.$u.getPx(this.lineWidth);
+      const lineWidth = getPx(this.lineWidth);
       this.lineOffsetLeft = lineOffsetLeft + (tabItem.rect.width - lineWidth) / 2;
       // #ifdef APP-NVUE
       // 第一次移动滑块，无需过渡时间
@@ -195,33 +222,54 @@ export default {
     // 点击某一个标签
     clickHandler(item, index) {
       // 因为标签可能为disabled状态，所以click是一定会发出的，但是change事件是需要可用的状态才发出
-      this.$emit('click', {
-        ...item,
+      this.$emit(
+        'click',
+        {
+          ...item,
+          index
+        },
         index
-      });
+      );
       // 如果disabled状态，返回
       if (item.disabled) return;
+      // 如果点击当前不触发change
+      if (this.innerCurrent == index) return;
       this.innerCurrent = index;
       this.resize();
-      this.$emit('change', {
+      this.$emit('update:current', index);
+      this.$emit(
+        'change',
+        {
+          ...item,
+          index
+        },
+        index
+      );
+    },
+    // 长按事件
+    longPressHandler(item, index) {
+      this.$emit('longPress', {
         ...item,
         index
       });
     },
     init() {
-      uni.$u.sleep().then(() => {
+      sleep().then(() => {
         this.resize();
       });
     },
     setScrollLeft() {
       // 当前活动tab的布局信息，有tab菜单的width和left(为元素左边界到父元素左边界的距离)等信息
+      if (this.innerCurrent < 0) {
+        this.innerCurrent = 0;
+      }
       const tabRect = this.list[this.innerCurrent];
       // 累加得到当前item到左边的距离
       const offsetLeft = this.list.slice(0, this.innerCurrent).reduce((total, curr) => {
         return total + curr.rect.width;
       }, 0);
       // 此处为屏幕宽度
-      const windowWidth = uni.$u.sys().windowWidth;
+      const windowWidth = getWindowInfo().windowWidth;
       // 将活动的tabs-item移动到屏幕正中间，实际上是对scroll-view的移动
       let scrollLeft =
         offsetLeft -
@@ -239,6 +287,12 @@ export default {
         return;
       }
       Promise.all([this.getTabsRect(), this.getAllItemRect()]).then(([tabsRect, itemRect = []]) => {
+        // 兼容在swiper组件中使用
+        if (tabsRect.left > tabsRect.width) {
+          tabsRect.right = tabsRect.right - Math.floor(tabsRect.left / tabsRect.width) * tabsRect.width;
+          tabsRect.left = tabsRect.left % tabsRect.width;
+        }
+        // console.log(tabsRect)
         this.tabsRect = tabsRect;
         this.scrollViewWidth = 0;
         itemRect.map((item, index) => {

package/uview-plus/components/u-tabs-item/props.js

@@ -1,4 +1,5 @@
-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-tabs-item/u-tabs-item.vue

@@ -4,9 +4,9 @@
   </swiper-item>
 </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';
 /**
  * TabsItem  tabs标签组件的自组件
  * @description tabs标签组件，在标签多的时候，可以配置为左右滑动，标签少的时候，可以禁止滑动。 该组件的一个特点是配置为滚动模式时，激活的tab会自动移动到组件的中间位置。