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

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

@@ -1 +1,184 @@
-<template>
  <u-popup
    mode="center"
    :zoom="zoom"
    :show="show"
    :customStyle="{
      borderRadius: '6px',
      overflow: 'hidden',
      marginTop: `-${$u.addUnit(negativeTop)}`
    }"
    :closeOnClickOverlay="closeOnClickOverlay"
    :safeAreaInsetBottom="false"
    :duration="400"
    @click="clickHandler"
  >
    <view
      class="u-modal"
      :style="{
        width: $u.addUnit(width)
      }"
    >
      <text class="u-modal__title" v-if="title">{{ title }}</text>
      <view
        class="u-modal__content"
        :style="{
          paddingTop: `${title ? 12 : 25}px`
        }"
      >
        <slot>
          <text class="u-modal__content__text">{{ content }}</text>
        </slot>
      </view>
      <view class="u-modal__button-group--confirm-button" v-if="$slots.confirmButton">
        <slot name="confirmButton"></slot>
      </view>
      <template v-else>
        <u-line></u-line>
        <view
          class="u-modal__button-group"
          :style="{
            flexDirection: buttonReverse ? 'row-reverse' : 'row'
          }"
        >
          <view
            class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
            :hover-stay-time="150"
            hover-class="u-modal__button-group__wrapper--hover"
            :class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
            v-if="showCancelButton"
            @tap="cancelHandler"
          >
            <text
              class="u-modal__button-group__wrapper__text"
              :style="{
                color: cancelColor
              }"
            >
              {{ cancelText }}
            </text>
          </view>
          <u-line direction="column" v-if="showConfirmButton && showCancelButton"></u-line>
          <view
            class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
            :hover-stay-time="150"
            hover-class="u-modal__button-group__wrapper--hover"
            :class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
            v-if="showConfirmButton"
            @tap="confirmHandler"
          >
            <u-loading-icon v-if="loading"></u-loading-icon>
            <text
              v-else
              class="u-modal__button-group__wrapper__text"
              :style="{
                color: confirmColor
              }"
            >
              {{ confirmText }}
            </text>
          </view>
        </view>
      </template>
    </view>
  </u-popup>
 * Modal 模态框
 * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
 * @tutorial https://ijry.github.io/uview-plus/components/modul.html
 * @property {Boolean}			show				是否显示模态框，请赋值给show （默认 false ）
 * @property {String}			title				标题内容
 * @property {String}			content				模态框内容，如传入slot内容，则此参数无效
 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
 * @property {Boolean}			showConfirmButton	是否显示确认按钮 （默认 true ）
 * @property {Boolean}			showCancelButton	是否显示取消按钮 （默认 false ）
 * @property {String}			confirmColor		确认按钮的颜色 （默认 '#2979ff' ）
 * @property {String}			cancelColor			取消按钮的颜色 （默认 '#606266' ）
 * @property {Boolean}			buttonReverse		对调确认和取消的位置 （默认 false ）
 * @property {Boolean}			zoom				是否开启缩放模式 （默认 true ）
 * @property {Boolean}			asyncClose			是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭Modal （默认 false ）
 * @property {String | Number}	negativeTop			往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
 * @property {String | Number}	width				modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
 * @property {String}			confirmButtonShape	确认按钮的样式,如设置，将不会显示取消按钮
 * @event {Function} confirm	点击确认按钮时触发
 * @event {Function} cancel		点击取消按钮时触发
 * @event {Function} close		点击遮罩关闭出发，closeOnClickOverlay为true有效
 * @example <u-loadmore :status="status" icon-type="iconType" load-text="loadText" />
 */
  name: 'u-modal',
  mixins: [mpMixin, mixin, props],
  data() {
    return {
      loading: false
    };
  },
  watch: {
    show(n) {
      // 为了避免第一次打开modal，又使用了异步关闭的loading
      // 第二次打开modal时，loading依然存在的情况
      if (n && this.loading) this.loading = false;
    }
  },
  methods: {
    // 点击确定按钮
    confirmHandler() {
      // 如果配置了异步关闭，将按钮值为loading状态
      if (this.asyncClose) {
        this.loading = true;
      }
      this.$emit('confirm');
    },
    // 点击取消按钮
    cancelHandler() {
      this.$emit('cancel');
    },
    // 点击遮罩
    // 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
    // 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
    // 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
    // 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
    clickHandler() {
      if (this.closeOnClickOverlay) {
        this.$emit('close');
      }
    }
  }
+<template>
+  <u-popup
+    mode="center"
+    :zoom="zoom"
+    :show="show"
+    :class="[customClass]"
+    :customStyle="{
+      borderRadius: '6px',
+      overflow: 'hidden',
+      marginTop: `-${addUnit(negativeTop)}`
+    }"
+    :closeOnClickOverlay="closeOnClickOverlay"
+    :safeAreaInsetBottom="false"
+    :duration="400"
+    @click="clickHandler"
+  >
+    <view
+      class="u-modal"
+      :style="{
+        width: addUnit(width)
+      }"
+    >
+      <view class="u-modal__title" v-if="title">{{ title }}</view>
+      <view class="u-modal__content" :style="contentStyleCpu">
+        <slot>
+          <text class="u-modal__content__text" :style="{ textAlign: contentTextAlign }">
+            {{ content }}
+          </text>
+        </slot>
+      </view>
+      <view class="u-modal__button-group--confirm-button" v-if="$slots.confirmButton">
+        <slot name="confirmButton"></slot>
+      </view>
+      <template v-else>
+        <u-line></u-line>
+        <view
+          class="u-modal__button-group"
+          :style="{
+            flexDirection: buttonReverse ? 'row-reverse' : 'row'
+          }"
+        >
+          <view
+            class="u-modal__button-group__wrapper u-modal__button-group__wrapper--cancel"
+            :hover-stay-time="150"
+            hover-class="u-modal__button-group__wrapper--hover"
+            :class="[showCancelButton && !showConfirmButton && 'u-modal__button-group__wrapper--only-cancel']"
+            v-if="showCancelButton"
+            @tap="cancelHandler"
+          >
+            <text
+              class="u-modal__button-group__wrapper__text"
+              :style="{
+                color: cancelColor
+              }"
+            >
+              {{ cancelText }}
+            </text>
+          </view>
+          <u-line direction="column" v-if="showConfirmButton && showCancelButton"></u-line>
+          <view
+            class="u-modal__button-group__wrapper u-modal__button-group__wrapper--confirm"
+            :hover-stay-time="150"
+            hover-class="u-modal__button-group__wrapper--hover"
+            :class="[!showCancelButton && showConfirmButton && 'u-modal__button-group__wrapper--only-confirm']"
+            v-if="showConfirmButton"
+            @tap="confirmHandler"
+          >
+            <u-loading-icon v-if="loading"></u-loading-icon>
+            <text
+              v-else
+              class="u-modal__button-group__wrapper__text"
+              :style="{
+                color: confirmColor
+              }"
+            >
+              {{ confirmText }}
+            </text>
+          </view>
+        </view>
+      </template>
+    </view>
+  </u-popup>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { addUnit } from '../../libs/function/index';
+/**
+ * Modal 模态框
+ * @description 弹出模态框，常用于消息提示、消息确认、在当前页面内完成特定的交互操作。
+ * @tutorial https://ijry.github.io/uview-plus/components/modul.html
+ * @property {Boolean}			show				是否显示模态框，请赋值给show （默认 false ）
+ * @property {String}			title				标题内容
+ * @property {String}			content				模态框内容，如传入slot内容，则此参数无效
+ * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
+ * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
+ * @property {Boolean}			showConfirmButton	是否显示确认按钮 （默认 true ）
+ * @property {Boolean}			showCancelButton	是否显示取消按钮 （默认 false ）
+ * @property {String}			confirmColor		确认按钮的颜色 （默认 '#2979ff' ）
+ * @property {String}			cancelColor			取消按钮的颜色 （默认 '#606266' ）
+ * @property {Boolean}			buttonReverse		对调确认和取消的位置 （默认 false ）
+ * @property {Boolean}			zoom				是否开启缩放模式 （默认 true ）
+ * @property {Boolean}			asyncClose			是否异步关闭，只对确定按钮有效，见上方说明 （默认 false ）
+ * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭Modal （默认 false ）
+ * @property {String | Number}	negativeTop			往上偏移的值，给一个负的margin-top，往上偏移，避免和键盘重合的情况，单位任意，数值则默认为px单位 （默认 0 ）
+ * @property {String | Number}	width				modal宽度，不支持百分比，可以数值，px，rpx单位 （默认 '650rpx' ）
+ * @property {String}			confirmButtonShape	确认按钮的样式,如设置，将不会显示取消按钮
+ * @event {Function} confirm	点击确认按钮时触发
+ * @event {Function} cancel		点击取消按钮时触发
+ * @event {Function} close		点击遮罩关闭出发，closeOnClickOverlay为true有效
+ * @example <u-modal :show="show" />
+ */
+export default {
+  name: 'u-modal',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {
+      loading: false
+    };
+  },
+  watch: {
+    show(n) {
+      // 为了避免第一次打开modal，又使用了异步关闭的loading
+      // 第二次打开modal时，loading依然存在的情况
+      if (n && this.loading) this.loading = false;
+    }
+  },
+  emits: ['confirm', 'cancel', 'close', 'update:show', 'cancelOnAsync'],
+  computed: {
+    contentStyleCpu() {
+      let style = this.contentStyle;
+      style.paddingTop = `${this.title ? 12 : 25}px`;
+      return style;
+    }
+  },
+  methods: {
+    addUnit,
+    // 点击确定按钮
+    confirmHandler() {
+      // 如果配置了异步关闭，将按钮值为loading状态
+      if (this.asyncClose) {
+        this.loading = true;
+      } else {
+        this.$emit('update:show', false);
+      }
+      this.$emit('confirm');
+    },
+    // 点击取消按钮
+    cancelHandler() {
+      // 如果点击了确定按钮，确定按钮正在请求接口执行异步操作，那么限制不能取消。
+      if (this.asyncClose && this.loading) {
+        if (this.asyncCloseTip) {
+          uni.showToast({
+            title: this.asyncCloseTip,
+            icon: 'none'
+          });
+        }
+        this.$emit('cancelOnAsync');
+      } else {
+        // 如果配置了取消时异步关闭
+        if (!this.asyncCancelClose) {
+          this.$emit('update:show', false);
+        }
+      }
+      this.$emit('cancel');
+    },
+    // 点击遮罩
+    // 从原理上来说，modal的遮罩点击，并不是真的点击到了遮罩
+    // 因为modal依赖于popup的中部弹窗类型，中部弹窗比较特殊，虽有然遮罩，但是为了让弹窗内容能flex居中
+    // 多了一个透明的遮罩，此透明的遮罩会覆盖在灰色的遮罩上，所以实际上是点击不到灰色遮罩的，popup内部在
+    // 透明遮罩的子元素做了.stop处理，所以点击内容区，也不会导致误触发
+    clickHandler() {
+      if (this.closeOnClickOverlay) {
+        this.$emit('update:show', false);
+        this.$emit('close');
+      }
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -7,7 +7,7 @@
  * @lastTime     : 2021-08-20 17:16:18
  * @FilePath     : /u-view2.0/uview-ui/libs/config/props/navbar.js
  */
-import color from '../color'
+import color from '../../libs/config/color'
 export default {
     // navbar 组件
     navbar: {
@@ -20,6 +20,7 @@ export default {
         rightText: '',
         rightIcon: '',
         title: '',
+        titleColor: '',
         bgColor: '#ffffff',
         titleWidth: '400rpx',
         height: '44px',

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