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

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

@@ -10,7 +10,7 @@
 export default {
     // swiper 组件
     swiper: {
-        list: () => [],
+        list: [],
         indicator: false,
         indicatorActiveColor: '#FFFFFF',
         indicatorInactiveColor: 'rgba(255, 255, 255, 0.35)',

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

@@ -3,18 +3,19 @@
     class="u-swiper"
     :style="{
       backgroundColor: bgColor,
-      height: $u.addUnit(height),
-      borderRadius: $u.addUnit(radius)
+      height: addUnit(height),
+      borderRadius: addUnit(radius)
     }"
   >
     <view class="u-swiper__loading" v-if="loading">
-      <u-loading-icon mode="circle"></u-loading-icon>
+      <up-loading-icon mode="circle"></up-loading-icon>
     </view>
     <swiper
       v-else
       class="u-swiper__wrapper"
       :style="{
-        height: $u.addUnit(height)
+        flex: '1',
+        height: addUnit(height)
       }"
       @change="change"
       :circular="circular"
@@ -23,67 +24,71 @@
       :autoplay="autoplay"
       :current="current"
       :currentItemId="currentItemId"
-      :previousMargin="$u.addUnit(previousMargin)"
-      :nextMargin="$u.addUnit(nextMargin)"
+      :previousMargin="addUnit(previousMargin)"
+      :nextMargin="addUnit(nextMargin)"
       :acceleration="acceleration"
-      :displayMultipleItems="displayMultipleItems"
+      :displayMultipleItems="list.length > 0 ? displayMultipleItems : 0"
       :easingFunction="easingFunction"
     >
       <swiper-item class="u-swiper__wrapper__item" v-for="(item, index) in list" :key="index">
-        <view class="u-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
-          <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
-          <image
-            class="u-swiper__wrapper__item__wrapper__image"
-            v-if="getItemType(item) === 'image'"
-            :src="getSource(item)"
-            :mode="imgMode"
-            @tap="clickHandler(index)"
-            :style="{
-              height: $u.addUnit(height),
-              borderRadius: $u.addUnit(radius)
-            }"
-          ></image>
-          <video
-            class="u-swiper__wrapper__item__wrapper__video"
-            v-if="getItemType(item) === 'video'"
-            :id="`video-${index}`"
-            :enable-progress-gesture="false"
-            :src="getSource(item)"
-            :poster="getPoster(item)"
-            :title="showTitle && $u.test.object(item) && item.title ? item.title : ''"
-            :style="{
-              height: $u.addUnit(height)
-            }"
-            controls
-            @tap="clickHandler(index)"
-          ></video>
-          <text
-            v-if="showTitle && $u.test.object(item) && item.title && $u.test.image(getSource(item))"
-            class="u-swiper__wrapper__item__wrapper__title u-line-1"
-          >
-            {{ item.title }}
-          </text>
-        </view>
+        <slot :item="item" :index="index">
+          <view class="u-swiper__wrapper__item__wrapper" :style="[itemStyle(index)]">
+            <!-- 在nvue中，image图片的宽度默认为屏幕宽度，需要通过flex:1撑开，另外必须设置高度才能显示图片 -->
+            <image
+              class="u-swiper__wrapper__item__wrapper__image"
+              v-if="getItemType(item) === 'image'"
+              :src="getSource(item)"
+              :mode="imgMode"
+              @tap="clickHandler(index)"
+              :style="{
+                height: addUnit(height),
+                borderRadius: addUnit(radius)
+              }"
+            ></image>
+            <video
+              class="u-swiper__wrapper__item__wrapper__video"
+              v-if="getItemType(item) === 'video'"
+              :id="`video-${index}`"
+              :enable-progress-gesture="false"
+              :src="getSource(item)"
+              :poster="getPoster(item)"
+              :title="showTitle && testObject(item) && item.title ? item.title : ''"
+              :style="{
+                height: addUnit(height)
+              }"
+              controls
+              @tap="clickHandler(index)"
+            ></video>
+            <view
+              v-if="showTitle && testObject(item) && item.title && testImage(getSource(item))"
+              class="u-swiper__wrapper__item__wrapper__title"
+            >
+              <text class="u-line-1">{{ item.title }}</text>
+            </view>
+          </view>
+        </slot>
       </swiper-item>
     </swiper>
-    <view class="u-swiper__indicator" :style="[$u.addStyle(indicatorStyle)]">
+    <view class="u-swiper__indicator" :style="[addStyle(indicatorStyle)]">
       <slot name="indicator">
-        <u-swiper-indicator
+        <up-swiper-indicator
           v-if="!loading && indicator && !showTitle"
           :indicatorActiveColor="indicatorActiveColor"
           :indicatorInactiveColor="indicatorInactiveColor"
           :length="list.length"
           :current="currentIndex"
           :indicatorMode="indicatorMode"
-        ></u-swiper-indicator>
+        ></up-swiper-indicator>
       </slot>
     </view>
   </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.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, error } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * Swiper 轮播图
  * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
@@ -130,6 +135,7 @@ export default {
       this.currentIndex = val; // 和上游数据关联上
     }
   },
+  emits: ['click', 'change', 'update:current'],
   computed: {
     itemStyle() {
       return (index) => {
@@ -138,7 +144,7 @@ export default {
         // 左右流出空间的写法不支持nvue和头条
         // 只有配置了此二值，才加上对应的圆角，以及缩放
         if (this.nextMargin && this.previousMargin) {
-          style.borderRadius = uni.$u.addUnit(this.radius);
+          style.borderRadius = addUnit(this.radius);
           if (index !== this.currentIndex) style.transform = 'scale(0.92)';
         }
         // #endif
@@ -147,10 +153,14 @@ export default {
     }
   },
   methods: {
+    addStyle,
+    addUnit,
+    testObject: test.object,
+    testImage: test.image,
     getItemType(item) {
-      if (typeof item === 'string') return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image';
+      if (typeof item === 'string') return test.video(this.getSource(item)) ? 'video' : 'image';
       if (typeof item === 'object' && this.keyName) {
-        if (!item.type) return uni.$u.test.video(this.getSource(item)) ? 'video' : 'image';
+        if (!item.type) return test.video(this.getSource(item)) ? 'video' : 'image';
         if (item.type === 'image') return 'image';
         if (item.type === 'video') return 'video';
         return 'image';
@@ -160,7 +170,7 @@ export default {
     getSource(item) {
       if (typeof item === 'string') return item;
       if (typeof item === 'object' && this.keyName) return item[this.keyName];
-      else uni.$u.error('请按格式传递列表参数');
+      else error('请按格式传递列表参数');
       return '';
     },
     // 轮播切换事件
@@ -169,12 +179,13 @@ export default {
       const { current } = e.detail;
       this.pauseVideo(this.currentIndex);
       this.currentIndex = current;
+      this.$emit('update:current', this.currentIndex);
       this.$emit('change', e.detail);
     },
     // 切换轮播时，暂停视频播放
     pauseVideo(index) {
       const lastItem = this.getSource(this.list[index]);
-      if (uni.$u.test.video(lastItem)) {
+      if (test.video(lastItem)) {
         // 当视频隐藏时，暂停播放
         const video = uni.createVideoContext(`video-${index}`, this);
         video.pause();

package/uview-plus/components/u-swiper-indicator/props.js

@@ -1,30 +1,31 @@
-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: {
     // 轮播的长度
     length: {
       type: [String, Number],
-      default: defprops.swiperIndicator.length
+      default: () => defProps.swiperIndicator.length
     },
     // 当前处于活动状态的轮播的索引
     current: {
       type: [String, Number],
-      default: defprops.swiperIndicator.current
+      default: () => defProps.swiperIndicator.current
     },
     // 指示器非激活颜色
     indicatorActiveColor: {
       type: String,
-      default: defprops.swiperIndicator.indicatorActiveColor
+      default: () => defProps.swiperIndicator.indicatorActiveColor
     },
     // 指示器的激活颜色
     indicatorInactiveColor: {
       type: String,
-      default: defprops.swiperIndicator.indicatorInactiveColor
+      default: () => defProps.swiperIndicator.indicatorInactiveColor
     },
     // 指示器模式，line-线型，dot-点型
     indicatorMode: {
       type: String,
-      default: defprops.swiperIndicator.indicatorMode
+      default: () => defProps.swiperIndicator.indicatorMode
     }
   }
-};
+});

package/uview-plus/components/u-swiper-indicator/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;
@@ -34,4 +49,4 @@ view, scroll-view, swiper-item {
 }
 .u-swiper-indicator__wrapper__dot--active {
   width: 12px;
-}
+}

package/uview-plus/components/u-swiper-indicator/u-swiper-indicator.vue

@@ -5,7 +5,7 @@
       v-if="indicatorMode === 'line'"
       :class="[`u-swiper-indicator__wrapper--${indicatorMode}`]"
       :style="{
-        width: $u.addUnit(lineWidth * length),
+        width: addUnit(lineWidth * length),
         backgroundColor: indicatorInactiveColor
       }"
     >
@@ -23,9 +23,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 { addUnit } from '../../libs/function/index';
 /**
  * SwiperIndicator 轮播图指示器
  * @description 该组件一般用于导航轮播，广告展示等场景,可开箱即用，
@@ -49,8 +50,8 @@ export default {
     // 指示器为线型的样式
     lineStyle() {
       let style = {};
-      style.width = uni.$u.addUnit(this.lineWidth);
-      style.transform = `translateX(${uni.$u.addUnit(this.current * this.lineWidth)})`;
+      style.width = addUnit(this.lineWidth);
+      style.transform = `translateX(${addUnit(this.current * this.lineWidth)})`;
       style.backgroundColor = this.indicatorActiveColor;
       return style;
     },
@@ -62,6 +63,9 @@ export default {
         return style;
       };
     }
+  },
+  methods: {
+    addUnit
   }
 };
 </script>

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

@@ -1,63 +1,64 @@
-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: {
     // 是否为加载中状态
     loading: {
       type: Boolean,
-      default: defprops.switch.loading
+      default: () => defProps.switch.loading
     },
     // 是否为禁用装填
     disabled: {
       type: Boolean,
-      default: defprops.switch.disabled
+      default: () => defProps.switch.disabled
     },
     // 开关尺寸，单位px
     size: {
       type: [String, Number],
-      default: defprops.switch.size
+      default: () => defProps.switch.size
     },
     // 打开时的背景颜色
     activeColor: {
       type: String,
-      default: defprops.switch.activeColor
+      default: () => defProps.switch.activeColor
     },
     // 关闭时的背景颜色
     inactiveColor: {
       type: String,
-      default: defprops.switch.inactiveColor
+      default: () => defProps.switch.inactiveColor
     },
     // 通过v-model双向绑定的值
     // #ifdef VUE3
     modelValue: {
       type: [Boolean, String, Number],
-      default: defprops.switch.value
+      default: () => defProps.switch.value
     },
     // #endif
     // #ifdef VUE2
     value: {
       type: [Boolean, String, Number],
-      default: defprops.switch.value
+      default: () => defProps.switch.value
     },
     // #endif
     // switch打开时的值
     activeValue: {
       type: [String, Number, Boolean],
-      default: defprops.switch.activeValue
+      default: () => defProps.switch.activeValue
     },
     // switch关闭时的值
     inactiveValue: {
       type: [String, Number, Boolean],
-      default: defprops.switch.inactiveValue
+      default: () => defProps.switch.inactiveValue
     },
     // 是否开启异步变更，开启后需要手动控制输入值
     asyncChange: {
       type: Boolean,
-      default: defprops.switch.asyncChange
+      default: () => defProps.switch.asyncChange
     },
     // 圆点与外边框的距离
     space: {
       type: [String, Number],
-      default: defprops.switch.space
+      default: () => defProps.switch.space
     }
   }
-};
+});

package/uview-plus/components/u-switch/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;
@@ -55,4 +70,4 @@ view, scroll-view, swiper-item {
 }
 .u-switch--disabled {
   opacity: 0.6;
-}
+}

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

@@ -1,8 +1,8 @@
 <template>
 	<view
-	    class="u-switch"
+	    class="u-switch cursor-pointer"
 	    :class="[disabled && 'u-switch--disabled']"
-	    :style="[switchStyle, $u.addStyle(customStyle)]"
+	    :style="[switchStyle, addStyle(customStyle)]"
 	    @tap="clickHandler"
 	>
 		<view
@@ -37,9 +37,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, addUnit, error } from '../../libs/function/index';
 	/**
 	 * switch 开关选择器
 	 * @description 选择开关一般用于只有两个选择，且只能选其一的场景。
@@ -68,7 +69,7 @@
 				immediate: true,
 				handler(n) {
 					if(n !== this.inactiveValue && n !== this.activeValue) {
-						uni.$u.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+						error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
 					}
 				}
 			},
@@ -78,7 +79,7 @@
 				immediate: true,
 				handler(n) {
 					if(n !== this.inactiveValue && n !== this.activeValue) {
-						uni.$u.error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
+						error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
 					}
 				}
 			}
@@ -101,8 +102,8 @@
 			switchStyle() {
 				let style = {}
 				// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
-				style.width = uni.$u.addUnit(this.size * 2 + 2)
-				style.height = uni.$u.addUnit(Number(this.size) + 2)
+				style.width = addUnit(this.size * 2 + 2)
+				style.height = addUnit(Number(this.size) + 2)
 				// style.borderColor = this.value ? 'rgba(0, 0, 0, 0)' : 'rgba(0, 0, 0, 0.12)'
 				// 如果自定义了“非激活”演示，name边框颜色设置为透明(跟非激活颜色一致)
 				// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
@@ -115,17 +116,17 @@
 			nodeStyle() {
 				let style = {}
 				// 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
-				style.width = uni.$u.addUnit(this.size - this.space)
-				style.height = uni.$u.addUnit(this.size - this.space)
-				const translateX = this.isActive ? uni.$u.addUnit(this.space) : uni.$u.addUnit(this.size);
+				style.width = addUnit(this.size - this.space)
+				style.height = addUnit(this.size - this.space)
+				const translateX = this.isActive ? addUnit(this.space) : addUnit(this.size);
 				style.transform = `translateX(-${translateX})`
 				return style
 			},
 			bgStyle() {
 				let style = {}
 				// 这里配置一个多余的元素在HTML中，是为了让switch切换时，有更良好的背景色扩充体验(见实际效果)
-				style.width = uni.$u.addUnit(Number(this.size) * 2 - this.size / 2)
-				style.height = uni.$u.addUnit(this.size)
+				style.width = addUnit(Number(this.size) * 2 - this.size / 2)
+				style.height = addUnit(this.size)
 				style.backgroundColor = this.inactiveColor
 				// 打开时，让此元素收缩，否则反之
 				style.transform = `scale(${this.isActive ? 0 : 1})`
@@ -140,6 +141,7 @@
 		emits: ['update:modelValue', 'change'],
     	// #endif
 		methods: {
+			addStyle,
 			clickHandler() {
 				if (!this.disabled && !this.loading) {
 					const oldValue = this.isActive ? this.inactiveValue : this.activeValue

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

@@ -1,45 +1,47 @@
-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: {
     // 当前匹配项的name
     value: {
       type: [String, Number, null],
-      default: defprops.tabbar.value
+      default: () => defProps.tabbar.value
     },
     // 是否为iPhoneX留出底部安全距离
     safeAreaInsetBottom: {
       type: Boolean,
-      default: defprops.tabbar.safeAreaInsetBottom
+      default: () => defProps.tabbar.safeAreaInsetBottom
     },
     // 是否显示上方边框
     border: {
       type: Boolean,
-      default: defprops.tabbar.border
+      default: () => defProps.tabbar.border
     },
     // 元素层级z-index
     zIndex: {
       type: [String, Number],
-      default: defprops.tabbar.zIndex
+      default: () => defProps.tabbar.zIndex
     },
     // 选中标签的颜色
     activeColor: {
       type: String,
-      default: defprops.tabbar.activeColor
+      default: () => defProps.tabbar.activeColor
     },
     // 未选中标签的颜色
     inactiveColor: {
       type: String,
-      default: defprops.tabbar.inactiveColor
+      default: () => defProps.tabbar.inactiveColor
     },
     // 是否固定在底部
     fixed: {
       type: Boolean,
-      default: defprops.tabbar.fixed
+      default: () => defProps.tabbar.fixed
     },
     // fixed定位固定在底部时，是否生成一个等高元素防止塌陷
     placeholder: {
       type: Boolean,
-      default: defprops.tabbar.placeholder
+      default: () => defProps.tabbar.placeholder
     }
   }
-};
+});

package/uview-plus/components/u-tabbar/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;
@@ -37,4 +52,4 @@ view, scroll-view, swiper-item {
   bottom: 0;
   left: 0;
   right: 0;
-}
+}

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

@@ -22,9 +22,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, deepMerge, sleep } from '../../libs/function/index';
 // #ifdef APP-NVUE
 const dom = uni.requireNativePlugin('dom');
 // #endif
@@ -58,7 +59,7 @@ export default {
         zIndex: this.zIndex
       };
       // 合并来自父组件的customStyle样式
-      return uni.$u.deepMerge(style, uni.$u.addStyle(this.customStyle));
+      return deepMerge(style, addStyle(this.customStyle));
     },
     // 监听多个参数的变化，通过在computed执行对应的操作
     updateChild() {
@@ -93,7 +94,7 @@ export default {
     async setPlaceholderHeight() {
       if (!this.fixed || !this.placeholder) return;
       // 延时一定时间
-      await uni.$u.sleep(20);
+      await sleep(20);
       // #ifndef APP-NVUE
       this.$uGetRect('.u-tabbar__content').then(({ height = 50 }) => {
         // 修复IOS safearea bottom 未填充高度