@10yun/cv-mobile-ui 0.5.43 → 0.5.45

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

@@ -1,166 +1,160 @@
 <template>
-	<view
-	    class="u-switch cursor-pointer"
-	    :class="[disabled && 'u-switch--disabled']"
-	    :style="[switchStyle, addStyle(customStyle)]"
-	    @tap="clickHandler"
-	>
-		<view
-		    class="u-switch__bg"
-		    :style="[bgStyle]"
-		>
-		</view>
-		<view
-		    class="u-switch__node"
-		    <!-- #ifdef VUE3 -->
-			:class="[modelValue && 'u-switch__node--on']"
-			<!-- #endif -->
-			<!-- #ifdef VUE2 -->
-			:class="[value && 'u-switch__node--on']"
-			<!-- #endif -->
-		    :style="[nodeStyle]"
-		    ref="u-switch__node"
-		>
-			<up-loading-icon
-			    :show="loading"
-			    mode="circle"
-			    timingFunction='linear'
-			    <!-- #ifdef VUE3 -->
-				:color="modelValue ? activeColor : '#AAABAD'"
-				<!-- #endif -->
-				<!-- #ifdef VUE2 -->
-				:color="value ? activeColor : '#AAABAD'"
-				<!-- #endif -->
-			    :size="size * 0.6"
-			/>
-		</view>
-	</view>
+  <view
+    class="u-switch cursor-pointer"
+    :class="[disabled && 'u-switch--disabled']"
+    :style="[switchStyle, addStyle(customStyle)]"
+    @tap="clickHandler"
+  >
+    <view class="u-switch__bg" :style="[bgStyle]"></view>
+    <!-- #ifdef VUE2 -->
+    <view class="u-switch__node" :class="[value && 'u-switch__node--on']" :style="[nodeStyle]" ref="u-switch__node">
+      <up-loading-icon
+        :show="loading"
+        mode="circle"
+        timingFunction="linear"
+        :color="value ? activeColor : '#AAABAD'"
+        :size="size * 0.6"
+      />
+    </view>
+    <!-- #endif -->
+    <!-- #ifdef VUE3 -->
+    <view class="u-switch__node" :class="[modelValue && 'u-switch__node--on']" :style="[nodeStyle]" ref="u-switch__node">
+      <up-loading-icon
+        :show="loading"
+        mode="circle"
+        timingFunction="linear"
+        :color="modelValue ? activeColor : '#AAABAD'"
+        :size="size * 0.6"
+      />
+    </view>
+    <!-- #endif -->
+  </view>
 </template>
 <script>
-	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 选择开关一般用于只有两个选择，且只能选其一的场景。
-	 * @tutorial https://ijry.github.io/uview-plus/components/switch.html
-	 * @property {Boolean}						loading			是否处于加载中（默认 false ）
-	 * @property {Boolean}						disabled		是否禁用（默认 false ）
-	 * @property {String | Number}				size			开关尺寸，单位px （默认 25 ）
-	 * @property {String}						activeColor		打开时的背景色 （默认 '#2979ff' ）
-	 * @property {String} 						inactiveColor	关闭时的背景色 （默认 '#ffffff' ）
-	 * @property {Boolean | String | Number}	value			通过v-model双向绑定的值 （默认 false ）
-	 * @property {Boolean | String | Number}	activeValue		打开选择器时通过change事件发出的值 （默认 true ）
-	 * @property {Boolean | String | Number}	inactiveValue	关闭选择器时通过change事件发出的值 （默认 false ）
-	 * @property {Boolean}						asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
-	 * @property {String | Number}				space			圆点与外边框的距离 （默认 0 ）
-	 * @property {Object}						customStyle		定义需要用到的外部样式
-	 *
-	 * @event {Function} change 在switch打开或关闭时触发
-	 * @example <up-switch v-model="checked" active-color="red" inactive-color="#eee"></up-switch>
-	 */
-	export default {
-		name: "u-switch",
-		mixins: [mpMixin, mixin,props],
-		watch: {
-			// #ifdef VUE3
-			modelValue: {
-				immediate: true,
-				handler(n) {
-					if(n !== this.inactiveValue && n !== this.activeValue) {
-						error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
-					}
-				}
-			},
-			// #endif
-        	// #ifdef VUE2
-			value: {
-				immediate: true,
-				handler(n) {
-					if(n !== this.inactiveValue && n !== this.activeValue) {
-						error('v-model绑定的值必须为inactiveValue、activeValue二者之一')
-					}
-				}
-			}
-			// #endif
-		},
-		data() {
-			return {
-				bgColor: '#ffffff'
-			}
-		},
-		computed: {
-			isActive(){
-				// #ifdef VUE3
-				return this.modelValue === this.activeValue;
-				// #endif
-        		// #ifdef VUE2
-				return this.value === this.activeValue;
-				// #endif
-			},
-			switchStyle() {
-				let style = {}
-				// 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
-				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边框颜色设置为透明(跟非激活颜色一致)
-				// 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
-				if(this.customInactiveColor) {
-					style.borderColor = 'rgba(0, 0, 0, 0)'
-				}
-				style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor
-				return style;
-			},
-			nodeStyle() {
-				let style = {}
-				// 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
-				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 = addUnit(Number(this.size) * 2 - this.size / 2)
-				style.height = addUnit(this.size)
-				style.backgroundColor = this.inactiveColor
-				// 打开时，让此元素收缩，否则反之
-				style.transform = `scale(${this.isActive ? 0 : 1})`
-				return style
-			},
-			customInactiveColor() {
-				// 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
-				return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff'
-			}
-		},
-		// #ifdef VUE3
-		emits: ['update:modelValue', 'change'],
-    	// #endif
-		methods: {
-			addStyle,
-			clickHandler() {
-				if (!this.disabled && !this.loading) {
-					const oldValue = this.isActive ? this.inactiveValue : this.activeValue
-					if(!this.asyncChange) {
-						// #ifdef VUE3
-						this.$emit("update:modelValue", oldValue);
-						// #endif
-						// #ifdef VUE2
-						this.$emit("input", oldValue);
-						// #endif
-					}
-					// 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
-					this.$nextTick(() => {
-						this.$emit('change', oldValue)
-					})
-				}
-			}
-		}
-	};
+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 选择开关一般用于只有两个选择，且只能选其一的场景。
+ * @tutorial https://uview-plus.jiangruyi.com/components/switch.html
+ * @property {Boolean}						loading			是否处于加载中（默认 false ）
+ * @property {Boolean}						disabled		是否禁用（默认 false ）
+ * @property {String | Number}				size			开关尺寸，单位px （默认 25 ）
+ * @property {String}						activeColor		打开时的背景色 （默认 '#2979ff' ）
+ * @property {String} 						inactiveColor	关闭时的背景色 （默认 '#ffffff' ）
+ * @property {Boolean | String | Number}	value			通过v-model双向绑定的值 （默认 false ）
+ * @property {Boolean | String | Number}	activeValue		打开选择器时通过change事件发出的值 （默认 true ）
+ * @property {Boolean | String | Number}	inactiveValue	关闭选择器时通过change事件发出的值 （默认 false ）
+ * @property {Boolean}						asyncChange		是否开启异步变更，开启后需要手动控制输入值 （默认 false ）
+ * @property {String | Number}				space			圆点与外边框的距离 （默认 0 ）
+ * @property {Object}						customStyle		定义需要用到的外部样式
+ *
+ * @event {Function} change 在switch打开或关闭时触发
+ * @example <up-switch v-model="checked" active-color="red" inactive-color="#eee"></up-switch>
+ */
+export default {
+  name: 'u-switch',
+  mixins: [mpMixin, mixin, props],
+  watch: {
+    // #ifdef VUE3
+    modelValue: {
+      immediate: true,
+      handler(n) {
+        if (n !== this.inactiveValue && n !== this.activeValue) {
+          error('v-model绑定的值必须为inactiveValue、activeValue二者之一');
+        }
+      }
+    },
+    // #endif
+    // #ifdef VUE2
+    value: {
+      immediate: true,
+      handler(n) {
+        if (n !== this.inactiveValue && n !== this.activeValue) {
+          error('v-model绑定的值必须为inactiveValue、activeValue二者之一');
+        }
+      }
+    }
+    // #endif
+  },
+  data() {
+    return {
+      bgColor: '#ffffff'
+    };
+  },
+  computed: {
+    isActive() {
+      // #ifdef VUE3
+      return this.modelValue === this.activeValue;
+      // #endif
+      // #ifdef VUE2
+      return this.value === this.activeValue;
+      // #endif
+    },
+    switchStyle() {
+      let style = {};
+      // 这里需要加2，是为了腾出边框的距离，否则圆点node会和外边框紧贴在一起
+      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边框颜色设置为透明(跟非激活颜色一致)
+      // 这里不能简单的设置为非激活的颜色，否则打开状态时，会有边框，所以需要透明
+      if (this.customInactiveColor) {
+        style.borderColor = 'rgba(0, 0, 0, 0)';
+      }
+      style.backgroundColor = this.isActive ? this.activeColor : this.inactiveColor;
+      return style;
+    },
+    nodeStyle() {
+      let style = {};
+      // 如果自定义非激活颜色，将node圆点的尺寸减少两个像素，让其与外边框距离更大一点
+      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 = addUnit(Number(this.size) * 2 - this.size / 2);
+      style.height = addUnit(this.size);
+      style.backgroundColor = this.inactiveColor;
+      // 打开时，让此元素收缩，否则反之
+      style.transform = `scale(${this.isActive ? 0 : 1})`;
+      return style;
+    },
+    customInactiveColor() {
+      // 之所以需要判断是否自定义了“非激活”颜色，是为了让node圆点离外边框更宽一点的距离
+      return this.inactiveColor !== '#fff' && this.inactiveColor !== '#ffffff';
+    }
+  },
+  // #ifdef VUE3
+  emits: ['update:modelValue', 'change'],
+  // #endif
+  methods: {
+    addStyle,
+    clickHandler() {
+      if (!this.disabled && !this.loading) {
+        const oldValue = this.isActive ? this.inactiveValue : this.activeValue;
+        if (!this.asyncChange) {
+          // #ifdef VUE3
+          this.$emit('update:modelValue', oldValue);
+          // #endif
+          // #ifdef VUE2
+          this.$emit('input', oldValue);
+          // #endif
+        }
+        // 放到下一个生命周期，因为双向绑定的value修改父组件状态需要时间，且是异步的
+        this.$nextTick(() => {
+          this.$emit('change', oldValue);
+        });
+      }
+    }
+  }
+};
 </script>
 <style scoped>
 @import './style.css';

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

@@ -18,6 +18,11 @@ export const props = defineMixin({
       type: Boolean,
       default: () => defProps.tabbar.border
     },
+    // 上方边框颜色
+    borderColor: {
+      type: String,
+      default: () => defProps.tabbar.borderColor
+    },
     // 元素层级z-index
     zIndex: {
       type: [String, Number],
@@ -42,6 +47,11 @@ export const props = defineMixin({
     placeholder: {
       type: Boolean,
       default: () => defProps.tabbar.placeholder
+    },
+    // 背景色
+    backgroundColor: {
+      type: String,
+      default: () => defProps.tabbar.backgroundColor
     }
   }
 });

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

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.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;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-tabbar {
   /* #ifndef APP-NVUE */
   display: flex;

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

@@ -1,5 +1,3 @@
-@import '../../libs/css/components.scss';
-
 .u-tabbar {
   @include flex(column);
   flex: 1;

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

@@ -17,6 +17,8 @@ export default {
         activeColor: '#1989fa',
         inactiveColor: '#7d7e80',
         fixed: true,
-        placeholder: true
+        placeholder: true,
+        borderColor: '',
+        backgroundColor: ''
     }
 }

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

@@ -32,7 +32,7 @@ const dom = uni.requireNativePlugin('dom');
 /**
  * Tabbar 底部导航栏
  * @description 此组件提供了自定义tabbar的能力。
- * @tutorial https://ijry.github.io/uview-plus/components/tabbar.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/tabbar.html
  * @property {String | Number}	value				当前匹配项的name
  * @property {Boolean}			safeAreaInsetBottom	是否为iPhoneX留出底部安全距离（默认 true ）
  * @property {Boolean}			border				是否显示上方边框（默认 true ）
@@ -41,6 +41,7 @@ const dom = uni.requireNativePlugin('dom');
  * @property {String}			inactiveColor		未选中标签的颜色（默认 '#7d7e80' ）
  * @property {Boolean}			fixed				是否固定在底部（默认 true ）
  * @property {Boolean}			placeholder			fixed定位固定在底部时，是否生成一个等高元素防止塌陷（默认 true ）
+ * @property {String}			backgroundColor		背景色（默认 '#ffffff' ）
  * @property {Object}			customStyle			定义需要用到的外部样式
  *
  * @example <up-tabbar :value="value2" :placeholder="false" @change="name => value2 = name" :fixed="false" :safeAreaInsetBottom="false"><up-tabbar-item text="首页" icon="home" dot ></up-tabbar-item></up-tabbar>
@@ -58,6 +59,12 @@ export default {
       const style = {
         zIndex: this.zIndex
       };
+      if (this.borderColor) {
+        style.borderColor = this.borderColor + ' !important';
+      }
+      if (this.backgroundColor) {
+        style.backgroundColor = this.backgroundColor;
+      }
       // 合并来自父组件的customStyle样式
       return deepMerge(style, addStyle(this.customStyle));
     },

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

@@ -7,7 +7,7 @@ export const props = defineMixin({
       type: [String, Number, null],
       default: () => defProps.tabbarItem.name
     },
-    // uView内置图标或者绝对路径的图片
+    // uview-plus内置图标或者绝对路径的图片
     icon: {
       icon: String,
       default: () => defProps.tabbarItem.icon
@@ -31,6 +31,11 @@ export const props = defineMixin({
     badgeStyle: {
       type: [Object, String],
       default: () => defProps.tabbarItem.badgeStyle
+    },
+    // 模式，默认普通模式，midButton中间按钮模式
+    mode: {
+      type: String,
+      default: () => defProps.tabbarItem.mode
     }
   }
 });

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

@@ -1,29 +1,3 @@
-/* #ifndef APP-NVUE */
-.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;
-  flex-grow: 0;
-  flex-basis: auto;
-  align-items: stretch;
-  align-content: flex-start;
-}
-/* #endif */
 .u-tabbar-item {
   /* #ifndef APP-NVUE */
   display: flex;
@@ -54,6 +28,29 @@
   font-size: 12px;
   color: var(--u-content-color);
 }
+.u-tabbar-item--mid-button {
+  /* #ifndef APP-NVUE */
+  transform: translateY(-10px);
+  /* #endif */
+}
+.u-tabbar-item--mid-button-cover {
+  background-color: #fff;
+  position: absolute;
+  top: 22px;
+  left: -10px;
+  width: 90px;
+  bottom: 0;
+}
+.u-tabbar-item__icon--mid-button {
+  width: 70px;
+  height: 70px;
+  border-radius: 100px;
+  background-color: #ffffff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 /* #ifdef MP */
 :host {
   flex: 1;

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

@@ -1,4 +1,3 @@
-@import '../../libs/css/components.scss';
 .u-tabbar-item {
   @include flex(column);
   align-items: center;
@@ -26,6 +25,34 @@
   }
 }
 
+// 中间按钮样式
+.u-tabbar-item--mid-button {
+  /* #ifndef APP-NVUE */
+  transform: translateY(-10px);
+  /* #endif */
+}
+
+.u-tabbar-item--mid-button-cover {
+  background-color: #fff;
+  position: absolute;
+  top: 22px;
+  left: -10px;
+  // right: -10px;
+  width: 90px;
+  bottom: 0;
+}
+
+.u-tabbar-item__icon--mid-button {
+  width: 70px;
+  height: 70px;
+  border-radius: 100px;
+  background-color: #ffffff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
 /* #ifdef MP */
 // 由于小程序都使用shadow DOM形式实现，需要给影子宿主设置flex: 1才能让其撑开
 :host {

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

@@ -15,6 +15,7 @@ export default {
         badge: null,
         dot: false,
         text: '',
-        badgeStyle: 'top: 6px;right:2px;'
+        badgeStyle: 'top: 6px;right:2px;',
+        mode: ''
     }
 }

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

@@ -1,11 +1,17 @@
 <template>
-  <view class="u-tabbar-item" :style="[addStyle(customStyle)]" @tap="clickHandler">
-    <view class="u-tabbar-item__icon">
+  <view
+    class="u-tabbar-item"
+    :style="[addStyle(customStyle)]"
+    :class="[isMidButton ? 'u-tabbar-item--mid-button' : '']"
+    @tap="clickHandler"
+  >
+    <view class="u-tabbar-item__icon" :class="[isMidButton ? 'u-tabbar-item__icon--mid-button' : '']">
+      <view class="u-tabbar-item--mid-button-cover" v-if="isMidButton"></view>
       <up-icon
         v-if="icon"
         :name="icon"
         :color="isActive ? parentData.activeColor : parentData.inactiveColor"
-        :size="20"
+        :size="isMidButton ? 26 : 20"
       ></up-icon>
       <template v-else>
         <slot v-if="isActive" name="active-icon" />
@@ -40,7 +46,7 @@ import { addStyle, error } from '../../libs/function/index';
 /**
  * TabbarItem 底部导航栏子组件
  * @description 此组件提供了自定义tabbar的能力。
- * @tutorial https://ijry.github.io/uview-plus/components/tabbar.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/tabbar.html
  * @property {String | Number}	name		item标签的名称，作为与u-tabbar的value参数匹配的标识符
  * @property {String}			icon		uView内置图标或者绝对路径的图片
  * @property {String | Number}	badge		右上角的角标提示信息
@@ -68,6 +74,12 @@ export default {
   options: {
     virtualHost: true //将自定义节点设置成虚拟的，更加接近Vue组件的表现。我们不希望自定义组件的这个节点本身可以设置样式、响应 flex 布局等
   },
+  computed: {
+    // 计算是否为中间按钮
+    isMidButton() {
+      return this.mode === 'midButton';
+    }
+  },
   created() {
     this.init();
   },
@@ -78,7 +90,7 @@ export default {
       // 支付宝小程序不支持provide/inject，所以使用这个方法获取整个父组件，在created定义，避免循环引用
       this.updateParentData();
       if (!this.parent) {
-        error('u-tabbar-item必须搭配u-tabbar组件使用');
+        error('up-tabbar-item必须搭配up-tabbar组件使用');
       }
       // 本子组件在u-tabbar的children数组中的索引
       const index = this.parent.children.indexOf(this);