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

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

@@ -1,85 +1,92 @@
-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: {
     // 是否开启顶部安全区适配
     safeAreaInsetTop: {
       type: Boolean,
-      default: defprops.navbar.safeAreaInsetTop
+      default: () => defProps.navbar.safeAreaInsetTop
     },
     // 固定在顶部时，是否生成一个等高元素，以防止塌陷
     placeholder: {
       type: Boolean,
-      default: defprops.navbar.placeholder
+      default: () => defProps.navbar.placeholder
     },
     // 是否固定在顶部
     fixed: {
       type: Boolean,
-      default: defprops.navbar.fixed
+      default: () => defProps.navbar.fixed
     },
     // 是否显示下边框
     border: {
       type: Boolean,
-      default: defprops.navbar.border
+      default: () => defProps.navbar.border
     },
     // 左边的图标
     leftIcon: {
       type: String,
-      default: defprops.navbar.leftIcon
+      default: () => defProps.navbar.leftIcon
     },
     // 左边的提示文字
     leftText: {
       type: String,
-      default: defprops.navbar.leftText
+      default: () => defProps.navbar.leftText
     },
     // 左右的提示文字
     rightText: {
       type: String,
-      default: defprops.navbar.rightText
+      default: () => defProps.navbar.rightText
     },
     // 右边的图标
     rightIcon: {
       type: String,
-      default: defprops.navbar.rightIcon
+      default: () => defProps.navbar.rightIcon
     },
     // 标题
     title: {
       type: [String, Number],
-      default: defprops.navbar.title
+      default: () => defProps.navbar.title
+    },
+    // 标题颜色
+    titleColor: {
+      type: String,
+      default: () => defProps.navbar.titleColor
     },
     // 背景颜色
     bgColor: {
       type: String,
-      default: defprops.navbar.bgColor
+      default: () => defProps.navbar.bgColor
     },
     // 标题的宽度
     titleWidth: {
       type: [String, Number],
-      default: defprops.navbar.titleWidth
+      default: () => defProps.navbar.titleWidth
     },
     // 导航栏高度
     height: {
       type: [String, Number],
-      default: defprops.navbar.height
+      default: () => defProps.navbar.height
     },
     // 左侧返回图标的大小
     leftIconSize: {
       type: [String, Number],
-      default: defprops.navbar.leftIconSize
+      default: () => defProps.navbar.leftIconSize
     },
     // 左侧返回图标的颜色
     leftIconColor: {
       type: String,
-      default: defprops.navbar.leftIconColor
+      default: () => defProps.navbar.leftIconColor
     },
     // 点击左侧区域(返回图标)，是否自动返回上一页
     autoBack: {
       type: Boolean,
-      default: defprops.navbar.autoBack
+      default: () => defProps.navbar.autoBack
     },
     // 标题的样式，对象或字符串
     titleStyle: {
       type: [String, Object],
-      default: defprops.navbar.titleStyle
+      default: () => defProps.navbar.titleStyle
     }
   }
-};
+});

package/uview-plus/components/u-navbar/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;
@@ -59,4 +74,4 @@ view, scroll-view, swiper-item {
 .u-navbar__content__right__text {
   font-size: 15px;
   margin-left: 3px;
-}
+}

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

@@ -1,10 +1,10 @@
 <template>
-  <view class="u-navbar">
+  <view class="u-navbar" :class="[customClass]">
     <view
       class="u-navbar__placeholder"
       v-if="fixed && placeholder"
       :style="{
-        height: $u.addUnit($u.getPx(height) + $u.sys().statusBarHeight, 'px')
+        height: addUnit(getPx(height) + getWindowInfo().statusBarHeight, 'px')
       }"
     ></view>
     <view :class="[fixed && 'u-navbar--fixed']">
@@ -13,7 +13,7 @@
         class="u-navbar__content"
         :class="[border && 'u-border-bottom']"
         :style="{
-          height: $u.addUnit(height),
+          height: addUnit(height),
           backgroundColor: bgColor
         }"
       >
@@ -41,9 +41,10 @@
             class="u-line-1 u-navbar__content__title"
             :style="[
               {
-                width: $u.addUnit(titleWidth)
+                width: addUnit(titleWidth),
+                color: titleColor
               },
-              $u.addStyle(titleStyle)
+              addStyle(titleStyle)
             ]"
           >
             {{ title }}
@@ -60,9 +61,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 config from '../../libs/config/config';
+import { addUnit, addStyle, getPx, getWindowInfo } from '../../libs/function/index';
 /**
  * Navbar 自定义导航栏
  * @description 此组件一般用于在特殊情况下，需要自定义导航栏的时候用到，一般建议使用uni-app带的导航栏。
@@ -71,11 +74,12 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
  * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
  * @property {Boolean}			border				导航栏底部是否显示下边框 （默认 false ）
- * @property {String}			leftIcon			左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
+ * @property {String}			leftIcon			左边返回图标的名称，只能为uview-pls自带的图标 （默认 'arrow-left' ）
  * @property {String}			leftText			左边的提示文字
  * @property {String}			rightText			右边的提示文字
- * @property {String}			rightIcon			右边返回图标的名称，只能为uView自带的图标
+ * @property {String}			rightIcon			右边返回图标的名称，只能为uview-plus自带的图标
  * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
+ * @property {String}			titleColor			文字颜色 （默认 '' ）
  * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
  * @property {String | Number}	titleWidth			导航栏标题的最大宽度，内容超出会以省略号隐藏 （默认 '400rpx' ）
  * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
@@ -93,13 +97,22 @@ export default {
   data() {
     return {};
   },
+  emits: ['leftClick', 'rightClick'],
   methods: {
+    addStyle,
+    addUnit,
+    getWindowInfo,
+    getPx,
     // 点击左侧区域
     leftClick() {
       // 如果配置了autoBack，自动返回上一页
       this.$emit('leftClick');
-      if (this.autoBack) {
-        uni.navigateBack();
+      if (config.interceptor.navbarLeftClick != null) {
+        config.interceptor.navbarLeftClick();
+      } else {
+        if (this.autoBack) {
+          uni.navigateBack();
+        }
       }
     },
     // 点击右侧区域

package/uview-plus/components/u-navbar-mini/props.js

@@ -0,0 +1,51 @@
+import { defineMixin } from '../../libs/vue';
+
+export const props = defineMixin({
+  props: {
+    // 是否开启顶部安全区适配
+    safeAreaInsetTop: {
+      type: Boolean,
+      default: () => true
+    },
+    // 是否固定在顶部
+    fixed: {
+      type: Boolean,
+      default: () => true
+    },
+    // 左边的图标
+    leftIcon: {
+      type: String,
+      default: 'arrow-leftward'
+    },
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: () => 'rgba(0,0,0,.15)'
+    },
+    // 导航栏高度
+    height: {
+      type: [String, Number],
+      default: () => '32px'
+    },
+    // 图标的大小
+    iconSize: {
+      type: [String, Number],
+      default: '20px'
+    },
+    // 图标的颜色
+    iconColor: {
+      type: String,
+      default: '#fff'
+    },
+    // 点击左侧区域(返回图标)，是否自动返回上一页
+    autoBack: {
+      type: Boolean,
+      default: () => true
+    },
+    // 首页路径
+    homeUrl: {
+      type: [String],
+      default: ''
+    }
+  }
+});

package/uview-plus/components/u-navbar-mini/style.css

@@ -0,0 +1,60 @@
+/* #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-navbar-mini__inner {
+  width: 180rpx;
+  overflow: hidden;
+}
+.u-navbar-mini--fixed {
+  position: fixed;
+  left: 20px;
+  right: 0;
+  top: 10px;
+  z-index: 11;
+}
+.u-navbar-mini__content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  padding: 0 15px;
+  border-radius: 20px;
+  align-items: center;
+  height: 36px;
+  background-color: #9acafc;
+  position: relative;
+  justify-content: space-between;
+}
+.u-navbar-mini__content__left {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+}
+.u-navbar-mini__content__left--hover {
+  opacity: 0.7;
+}

package/uview-plus/components/u-navbar-mini/style.scss

@@ -0,0 +1,38 @@
+@import '../../libs/css/components.scss';
+
+.u-navbar-mini {
+  &__inner {
+    width: 180rpx;
+    overflow: hidden;
+  }
+
+  &--fixed {
+    position: fixed;
+    left: 20px;
+    right: 0;
+    top: 10px;
+    z-index: 11;
+  }
+
+  &__content {
+    @include flex(row);
+    padding: 0 15px;
+    border-radius: 20px;
+    align-items: center;
+    height: 36px;
+    background-color: #9acafc;
+    position: relative;
+    justify-content: space-between;
+
+    &__left {
+      @include flex(row);
+      align-items: center;
+    }
+
+    &__left {
+      &--hover {
+        opacity: 0.7;
+      }
+    }
+  }
+}

package/uview-plus/components/u-navbar-mini/u-navbar-mini.vue

@@ -0,0 +1,89 @@
+<template>
+  <view class="u-navbar-mini" :class="[customClass]">
+    <view class="u-navbar-mini__inner" :class="[fixed && 'u-navbar-mini--fixed']">
+      <u-status-bar v-if="safeAreaInsetTop"></u-status-bar>
+      <view
+        class="u-navbar-mini__content"
+        :style="{
+          height: addUnit(height),
+          backgroundColor: bgColor
+        }"
+      >
+        <view
+          class="u-navbar-mini__content__left"
+          hover-class="u-navbar-mini__content__left--hover"
+          hover-start-time="150"
+          @tap="leftClick"
+        >
+          <slot name="left">
+            <up-icon :name="leftIcon" :size="iconSize" :color="iconColor"></up-icon>
+          </slot>
+        </view>
+        <view style="padding: 10px 10px">
+          <up-line direction="col" color="#fff" length="16px"></up-line>
+        </view>
+        <view class="u-navbar-mini__content__center" @tap="homeClick">
+          <slot name="center">
+            <up-icon name="home" :size="iconSize" :color="iconColor"></up-icon>
+          </slot>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit, addStyle, getPx, sys } from '../../libs/function/index';
+/**
+ * NavbarMini 迷你导航栏
+ * @description 此组件一般用于在全屏页面中，典型的如微信小程序左上角。
+ * @tutorial https://ijry.github.io/uview-plus/components/navbar-mini.html
+ * @property {Boolean}			safeAreaInsetTop	是否开启顶部安全区适配  （默认 true ）
+ * @property {Boolean}			placeholder			固定在顶部时，是否生成一个等高元素，以防止塌陷 （默认 false ）
+ * @property {Boolean}			fixed				导航栏是否固定在顶部 （默认 false ）
+ * @property {String}			leftIcon			左边返回图标的名称，只能为uView自带的图标 （默认 'arrow-left' ）
+ * @property {String}			title				导航栏标题，如设置为空字符，将会隐藏标题占位区域
+ * @property {String}			bgColor				导航栏背景设置 （默认 '#ffffff' ）
+ * @property {String | Number}	height				导航栏高度(不包括状态栏高度在内，内部自动加上)（默认 '44px' ）
+ * @property {String | Number}	iconSize			左侧返回图标的大小（默认 20px ）
+ * @property {String | Number}	leftIconColor		左侧返回图标的颜色（默认 #303133 ）
+ * @property {Boolean}	        autoBack			点击左侧区域(返回图标)，是否自动返回上一页（默认 false ）
+ * @property {Object | String}	titleStyle			标题的样式，对象或字符串
+ * @event {Function} leftClick		点击左侧区域
+ * @event {Function} rightClick		点击右侧区域
+ * @example <u-navbar-mini @click-left="onClickBack"></u-navbar-mini>
+ */
+export default {
+  name: 'u-navbar-mini',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {};
+  },
+  emits: ['leftClick', 'homeClick'],
+  created() {},
+  methods: {
+    addStyle,
+    addUnit,
+    sys,
+    getPx,
+    // 点击左侧区域
+    leftClick() {
+      // 如果配置了autoBack，自动返回上一页
+      this.$emit('leftClick');
+      if (this.autoBack) {
+        uni.navigateBack();
+      }
+    },
+    homeClick() {
+      if (this.homeUrl) {
+        uni.reLaunch({ url: this.homeUrl });
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-navbar-wu/props.js

@@ -0,0 +1,102 @@
+export default {
+  props: {
+    // 是否开启顶部安全区适配
+    safeAreaInsetTop: {
+      type: Boolean,
+      default: true
+    },
+    // 固定在顶部时，是否生成一个等高元素，以防止塌陷
+    placeholder: {
+      type: Boolean,
+      default: false
+    },
+    // 是否固定在顶部
+    fixed: {
+      type: Boolean,
+      default: true
+    },
+    // 是否显示下边框
+    border: {
+      type: Boolean,
+      default: false
+    },
+    // 左边的图标
+    leftIcon: {
+      type: String,
+      default: 'arrow-left'
+    },
+    // 左边的提示文字
+    leftText: {
+      type: String,
+      default: ''
+    },
+    // 左边的提示文字
+    rightText: {
+      type: String,
+      default: ''
+    },
+    // 右边的图标
+    rightIcon: {
+      type: String,
+      default: ''
+    },
+    // 标题
+    title: {
+      type: [String, Number],
+      default: ''
+    },
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: '#ffffff'
+    },
+    // 标题的宽度
+    titleWidth: {
+      type: [String, Number],
+      default: '400rpx'
+    },
+    // 导航栏高度
+    height: {
+      type: [String, Number],
+      default: '44px'
+    },
+    // 左侧返回图标的大小
+    leftIconSize: {
+      type: [String, Number],
+      default: '20px'
+    },
+    // 左侧返回图标的颜色
+    leftIconColor: {
+      type: String,
+      default: '#303133'
+    },
+    // 点击左侧区域(返回图标)，是否自动返回上一页
+    autoBack: {
+      type: Boolean,
+      default: false
+    },
+    // 标题的样式，对象或字符串
+    titleStyle: {
+      type: [String, Object],
+      default: ''
+    },
+    
+    
+    // 是否显示左边
+    showLeft: {
+      type: Boolean,
+      default: true
+    },
+    // 小程序端导航栏右侧是否预留胶囊位置
+    mpRightReserveCapsule: {
+      type: Boolean,
+      default: true
+    },
+    // 键盘高度
+    keyboardHeight: {
+      type: String,
+      default: '0rpx'
+    },
+    ...uni.$w?.props?.navbar
+  }
+};