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

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

@@ -1,126 +1,127 @@
-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: {
     // 列表数组，元素可为字符串，如为对象可通过keyName指定目标属性名
     list: {
       type: Array,
-      default: defprops.swiper.list
+      default: () => defProps.swiper.list
     },
     // 是否显示面板指示器
     indicator: {
       type: Boolean,
-      default: defprops.swiper.indicator
+      default: () => defProps.swiper.indicator
     },
     // 指示器非激活颜色
     indicatorActiveColor: {
       type: String,
-      default: defprops.swiper.indicatorActiveColor
+      default: () => defProps.swiper.indicatorActiveColor
     },
     // 指示器的激活颜色
     indicatorInactiveColor: {
       type: String,
-      default: defprops.swiper.indicatorInactiveColor
+      default: () => defProps.swiper.indicatorInactiveColor
     },
     // 指示器样式，可通过bottom，left，right进行定位
     indicatorStyle: {
       type: [String, Object],
-      default: defprops.swiper.indicatorStyle
+      default: () => defProps.swiper.indicatorStyle
     },
     // 指示器模式，line-线型，dot-点型
     indicatorMode: {
       type: String,
-      default: defprops.swiper.indicatorMode
+      default: () => defProps.swiper.indicatorMode
     },
     // 是否自动切换
     autoplay: {
       type: Boolean,
-      default: defprops.swiper.autoplay
+      default: () => defProps.swiper.autoplay
     },
     // 当前所在滑块的 index
     current: {
       type: [String, Number],
-      default: defprops.swiper.current
+      default: () => defProps.swiper.current
     },
     // 当前所在滑块的 item-id ，不能与 current 被同时指定
     currentItemId: {
       type: String,
-      default: defprops.swiper.currentItemId
+      default: () => defProps.swiper.currentItemId
     },
     // 滑块自动切换时间间隔
     interval: {
       type: [String, Number],
-      default: defprops.swiper.interval
+      default: () => defProps.swiper.interval
     },
     // 滑块切换过程所需时间
     duration: {
       type: [String, Number],
-      default: defprops.swiper.duration
+      default: () => defProps.swiper.duration
     },
     // 播放到末尾后是否重新回到开头
     circular: {
       type: Boolean,
-      default: defprops.swiper.circular
+      default: () => defProps.swiper.circular
     },
     // 前边距，可用于露出前一项的一小部分，nvue和支付宝不支持
     previousMargin: {
       type: [String, Number],
-      default: defprops.swiper.previousMargin
+      default: () => defProps.swiper.previousMargin
     },
     // 后边距，可用于露出后一项的一小部分，nvue和支付宝不支持
     nextMargin: {
       type: [String, Number],
-      default: defprops.swiper.nextMargin
+      default: () => defProps.swiper.nextMargin
     },
     // 当开启时，会根据滑动速度，连续滑动多屏，支付宝不支持
     acceleration: {
       type: Boolean,
-      default: defprops.swiper.acceleration
+      default: () => defProps.swiper.acceleration
     },
     // 同时显示的滑块数量，nvue、支付宝小程序不支持
     displayMultipleItems: {
       type: Number,
-      default: defprops.swiper.displayMultipleItems
+      default: () => defProps.swiper.displayMultipleItems
     },
     // 指定swiper切换缓动动画类型，有效值：default、linear、easeInCubic、easeOutCubic、easeInOutCubic
     // 只对微信小程序有效
     easingFunction: {
       type: String,
-      default: defprops.swiper.easingFunction
+      default: () => defProps.swiper.easingFunction
     },
     // list数组中指定对象的目标属性名
     keyName: {
       type: String,
-      default: defprops.swiper.keyName
+      default: () => defProps.swiper.keyName
     },
     // 图片的裁剪模式
     imgMode: {
       type: String,
-      default: defprops.swiper.imgMode
+      default: () => defProps.swiper.imgMode
     },
     // 组件高度
     height: {
       type: [String, Number],
-      default: defprops.swiper.height
+      default: () => defProps.swiper.height
     },
     // 背景颜色
     bgColor: {
       type: String,
-      default: defprops.swiper.bgColor
+      default: () => defProps.swiper.bgColor
     },
     // 组件圆角，数值或带单位的字符串
     radius: {
       type: [String, Number],
-      default: defprops.swiper.radius
+      default: () => defProps.swiper.radius
     },
     // 是否加载中
     loading: {
       type: Boolean,
-      default: defprops.swiper.loading
+      default: () => defProps.swiper.loading
     },
     // 是否显示标题，要求数组对象中有title属性
     showTitle: {
       type: Boolean,
-      default: defprops.swiper.showTitle
+      default: () => defProps.swiper.showTitle
     }
   }
-};
+});

package/uview-plus/components/u-swiper/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;
@@ -9,6 +24,9 @@ view, scroll-view, swiper-item {
   align-content: flex-start;
 }
 /* #endif */
+.u-swiper__wrapper {
+  flex: 1;
+}
 .u-swiper {
   /* #ifndef APP-NVUE */
   display: flex;
@@ -55,4 +73,4 @@ view, scroll-view, swiper-item {
 .u-swiper__indicator {
   position: absolute;
   bottom: 10px;
-}
+}

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

@@ -1,5 +1,8 @@
 @import '../../libs/css/components.scss';
 
+.u-swiper__wrapper {
+  flex: 1;
+}
 .u-swiper {
   @include flex;
   justify-content: center;

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;
-}
+}