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

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

@@ -1,6 +1,6 @@
 <template>
   <view class="u-toast">
-    <u-overlay :show="isShow" :custom-style="overlayStyle">
+    <u-overlay :show="isShow" :zIndex="tmpConfig.overlay ? 10070 : -1" :custom-style="overlayStyle">
       <view
         class="u-toast__content"
         :style="[contentStyle]"
@@ -32,8 +32,11 @@
   </view>
 </template>
 <script>
-import mpMixin from '../../libs/mixin/mpMixin.js';
-import mixin from '../../libs/mixin/mixin.js';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+import { os, getWindowInfo, deepMerge, type2icon } from '../../libs/function/index';
+import color from '../../libs/config/color';
+import { hexToRgb } from '../../libs/function/colorGradient';
 /**
  * toast 消息提示
  * @description 此组件表现形式类似uni的uni.showToastAPI，但也有不同的地方。
@@ -44,7 +47,7 @@ import mixin from '../../libs/mixin/mixin.js';
  * @property {String}			icon		图标，或者绝对路径的图片
  * @property {String}			type		主题类型 （默认 default）
  * @property {Boolean}			show		是否显示该组件 （默认 false）
- * @property {Boolean}			overlay		是否显示透明遮罩，防止点击穿透 （默认 false ）
+ * @property {Boolean}			overlay		是否显示透明遮罩，防止点击穿透 （默认 true ）
  * @property {String}			position	位置 （默认 'center' ）
  * @property {Object}			params		跳转的参数
  * @property {String | Number}  duration	展示时间，单位ms （默认 2000 ）
@@ -70,7 +73,7 @@ export default {
         icon: true, // 显示的图标
         position: 'center', // toast出现的位置
         complete: null, // 执行完后的回调函数
-        overlay: false, // 是否防止触摸穿透
+        overlay: true, // 是否防止触摸穿透
         loading: false // 是否加载中状态
       },
       tmpConfig: {} // 将用户配置和内置配置合并后的临时配置变量
@@ -82,10 +85,14 @@ export default {
       if (!this.tmpConfig.icon || this.tmpConfig.icon == 'none') {
         return '';
       }
-      if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
-        return uni.$u.type2icon(this.tmpConfig.type);
+      if (this.tmpConfig.icon === true) {
+        if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
+          return type2icon(this.tmpConfig.type);
+        } else {
+          return '';
+        }
       } else {
-        return '';
+        return this.tmpConfig.icon;
       }
     },
     overlayStyle() {
@@ -104,24 +111,24 @@ export default {
       style.marginRight = '4px';
       // #ifdef APP-NVUE
       // iOSAPP下，图标有1px的向下偏移，这里进行修正
-      if (uni.$u.os() === 'ios') {
+      if (os() === 'ios') {
         style.marginTop = '-1px';
       }
       // #endif
       return style;
     },
     loadingIconColor() {
-      let color = 'rgb(255, 255, 255)';
+      let colorTmp = 'rgb(255, 255, 255)';
       if (['error', 'warning', 'success', 'primary'].includes(this.tmpConfig.type)) {
         // loading-icon组件内部会对color参数进行一个透明度处理，该方法要求传入的颜色值
         // 必须为rgb格式的，所以这里做一个处理
-        color = uni.$u.hexToRgb(uni.$u.color[this.tmpConfig.type]);
+        colorTmp = hexToRgb(color[this.tmpConfig.type]);
       }
-      return color;
+      return colorTmp;
     },
     // 内容盒子的样式
     contentStyle() {
-      const windowHeight = uni.$u.sys().windowHeight,
+      const windowHeight = getWindowInfo().windowHeight,
         style = {};
       let value = 0;
       // 根据top和bottom，对Y轴进行窗体高度的百分比偏移
@@ -148,16 +155,19 @@ export default {
     // 显示toast组件，由父组件通过this.$refs.xxx.show(options)形式调用
     show(options) {
       // 不将结果合并到this.config变量，避免多次调用u-toast，前后的配置造成混乱
-      this.tmpConfig = uni.$u.deepMerge(this.config, options);
+      this.tmpConfig = deepMerge(this.config, options);
       // 清除定时器
       this.clearTimer();
       this.isShow = true;
-      this.timer = setTimeout(() => {
-        // 倒计时结束，清除定时器，隐藏toast组件
-        this.clearTimer();
-        // 判断是否存在callback方法，如果存在就执行
-        typeof this.tmpConfig.complete === 'function' && this.tmpConfig.complete();
-      }, this.tmpConfig.duration);
+      // -1时不自动关闭
+      if (this.tmpConfig.duration !== -1) {
+        this.timer = setTimeout(() => {
+          // 倒计时结束，清除定时器，隐藏toast组件
+          this.clearTimer();
+          // 判断是否存在callback方法，如果存在就执行
+          typeof this.tmpConfig.complete === 'function' && this.tmpConfig.complete();
+        }, this.tmpConfig.duration);
+      }
     },
     // 隐藏toast组件，由父组件通过this.$refs.xxx.hide()形式调用
     hide() {
@@ -170,7 +180,7 @@ export default {
       this.timer = null;
     }
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clearTimer();
   }
 };

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

@@ -1,35 +1,41 @@
-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: {
     // 是否展示工具条
     show: {
       type: Boolean,
-      default: defprops.toolbar.show
+      default: () => defProps.toolbar.show
     },
     // 取消按钮的文字
     cancelText: {
       type: String,
-      default: defprops.toolbar.cancelText
+      default: () => defProps.toolbar.cancelText
     },
     // 确认按钮的文字
     confirmText: {
       type: String,
-      default: defprops.toolbar.confirmText
+      default: () => defProps.toolbar.confirmText
     },
     // 取消按钮的颜色
     cancelColor: {
       type: String,
-      default: defprops.toolbar.cancelColor
+      default: () => defProps.toolbar.cancelColor
     },
     // 确认按钮的颜色
     confirmColor: {
       type: String,
-      default: defprops.toolbar.confirmColor
+      default: () => defProps.toolbar.confirmColor
     },
     // 标题文字
     title: {
       type: String,
-      default: defprops.toolbar.title
+      default: () => defProps.toolbar.title
+    },
+    // 开启右侧插槽
+    rightSlot: {
+      type: Boolean,
+      default: false
     }
   }
-};
+});

package/uview-plus/components/u-toolbar/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;
@@ -27,11 +42,18 @@ view, scroll-view, swiper-item {
   color: var(--u-main-color);
   padding: 0 60rpx;
   font-size: 16px;
+  font-weight: bold;
   flex: 1;
   text-align: center;
 }
+.u-toolbar__wrapper__left, .u-toolbar__wrapper__right {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+}
 .u-toolbar__wrapper__confirm {
   color: var(--u-primary);
   font-size: 15px;
   padding: 0 15px;
-}
+}

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

@@ -18,11 +18,16 @@
     color: $u-main-color;
     padding: 0 60rpx;
     font-size: 16px;
+    font-weight: bold;
     flex: 1;
     text-align: center;
   }
 
   &__wrapper {
+    &__left,
+    &__right {
+      @include flex;
+    }
     &__confirm {
       color: $u-primary;
       font-size: 15px;

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

@@ -14,7 +14,7 @@ export default {
         cancelText: '取消',
         confirmText: '确认',
         cancelColor: '#909193',
-        confirmColor: '#3c9cff',
+        confirmColor: '',
         title: ''
     }
 

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

@@ -1,34 +1,41 @@
 <template>
   <view class="u-toolbar" @touchmove.stop.prevent="noop" v-if="show">
-    <view class="u-toolbar__cancel__wrapper" hover-class="u-hover-class">
-      <text
-        class="u-toolbar__wrapper__cancel"
-        @tap="cancel"
-        :style="{
-          color: cancelColor
-        }"
-      >
-        {{ cancelText }}
-      </text>
+    <view class="u-toolbar__left">
+      <view class="u-toolbar__cancel__wrapper" hover-class="u-hover-class">
+        <text
+          class="u-toolbar__wrapper__cancel"
+          @tap="cancel"
+          :style="{
+            color: cancelColor
+          }"
+        >
+          {{ cancelText }}
+        </text>
+      </view>
     </view>
     <text class="u-toolbar__title u-line-1" v-if="title">{{ title }}</text>
-    <view class="u-toolbar__confirm__wrapper" hover-class="u-hover-class">
-      <text
-        class="u-toolbar__wrapper__confirm"
-        @tap="confirm"
-        :style="{
-          color: confirmColor
-        }"
-      >
-        {{ confirmText }}
-      </text>
+    <view class="u-toolbar__right">
+      <view v-if="!rightSlot" class="u-toolbar__confirm__wrapper" hover-class="u-hover-class">
+        <text
+          class="u-toolbar__wrapper__confirm"
+          @tap="confirm"
+          :style="{
+            color: confirmColor
+          }"
+        >
+          {{ confirmText }}
+        </text>
+      </view>
+      <template v-else>
+        <slot name="right"></slot>
+      </template>
     </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';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
 /**
  * Toolbar 工具条
  * @description
@@ -45,6 +52,10 @@ import mixin from '../../libs/mixin/mixin.js';
 export default {
   name: 'u-toolbar',
   mixins: [mpMixin, mixin, props],
+  emits: ['confirm', 'cancel'],
+  created() {
+    // console.log(this.$slots)
+  },
   methods: {
     // 点击取消按钮
     cancel() {

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

@@ -1,60 +1,61 @@
-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: {
     // 需要显示的提示文字
     text: {
       type: [String, Number],
-      default: defprops.tooltip.text
+      default: () => defProps.tooltip.text
     },
     // 点击复制按钮时，复制的文本，为空则使用text值
     copyText: {
       type: [String, Number],
-      default: defprops.tooltip.copyText
+      default: () => defProps.tooltip.copyText
     },
     // 文本大小
     size: {
       type: [String, Number],
-      default: defprops.tooltip.size
+      default: () => defProps.tooltip.size
     },
     // 字体颜色
     color: {
       type: String,
-      default: defprops.tooltip.color
+      default: () => defProps.tooltip.color
     },
     // 弹出提示框时，文本的背景色
     bgColor: {
       type: String,
-      default: defprops.tooltip.bgColor
+      default: () => defProps.tooltip.bgColor
     },
     // 弹出提示的方向，top-上方，bottom-下方
     direction: {
       type: String,
-      default: defprops.tooltip.direction
+      default: () => defProps.tooltip.direction
     },
     // 弹出提示的z-index，nvue无效
     zIndex: {
       type: [String, Number],
-      default: defprops.tooltip.zIndex
+      default: () => defProps.tooltip.zIndex
     },
     // 是否显示复制按钮
     showCopy: {
       type: Boolean,
-      default: defprops.tooltip.showCopy
+      default: () => defProps.tooltip.showCopy
     },
     // 扩展的按钮组
     buttons: {
       type: Array,
-      default: defprops.tooltip.buttons
+      default: () => defProps.tooltip.buttons
     },
     // 是否显示透明遮罩以防止触摸穿透
     overlay: {
       type: Boolean,
-      default: defprops.tooltip.overlay
+      default: () => defProps.tooltip.overlay
     },
     // 是否显示复制成功或者失败的toast
     showToast: {
       type: Boolean,
-      default: defprops.tooltip.showToast
+      default: () => defProps.tooltip.showToast
     }
   }
-};
+});

package/uview-plus/components/u-tooltip/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;
@@ -72,4 +87,4 @@ view, scroll-view, swiper-item {
 }
 .u-tooltip__wrapper__popup__indicator--hover {
   background-color: #58595b;
-}
+}

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

@@ -18,7 +18,7 @@ export default {
         direction: 'top',
         zIndex: 10071,
         showCopy: true,
-        buttons: () => [],
+        buttons: [],
         overlay: true,
         showToast: true
     }

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-tooltip" :style="[$u.addStyle(customStyle)]">
+  <view class="u-tooltip" :style="[addStyle(customStyle)]">
     <u-overlay
       :show="showTooltip && tooltipTop !== -10000 && overlay"
       customStyle="backgroundColor: rgba(0, 0, 0, 0)"
@@ -26,7 +26,7 @@
         duration="300"
         :customStyle="{
           position: 'absolute',
-          top: $u.addUnit(tooltipTop),
+          top: addUnit(tooltipTop),
           zIndex: zIndex,
           ...tooltipStyle
         }"
@@ -39,8 +39,8 @@
             :style="[
               indicatorStyle,
               {
-                width: $u.addUnit(indicatorWidth),
-                height: $u.addUnit(indicatorWidth)
+                width: addUnit(indicatorWidth),
+                height: addUnit(indicatorWidth)
               }
             ]"
           >
@@ -69,16 +69,13 @@
   </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, getPx, guid, toast, sleep, getWindowInfo } from '../../libs/function/index';
 // #ifdef APP-NVUE
 const dom = uni.requireNativePlugin('dom');
 // #endif
-// #ifdef H5
-// import ClipboardJS from "./clipboard.min.js"
-import ClipboardJS from 'clipboard';
-// #endif
 /**
  * Tooltip
  * @description
@@ -106,8 +103,8 @@ export default {
       // 是否展示气泡
       showTooltip: true,
       // 生成唯一id，防止一个页面多个组件，造成干扰
-      textId: uni.$u.guid(),
-      tooltipId: uni.$u.guid(),
+      textId: guid(),
+      tooltipId: guid(),
       // 初始时甚至为很大的值，让其移到屏幕外面，为了计算元素的尺寸
       tooltipTop: -10000,
       // 气泡的位置信息
@@ -144,16 +141,17 @@ export default {
       const style = {
           transform: `translateY(${this.direction === 'top' ? '-100%' : '100%'})`
         },
-        sys = uni.$u.sys(),
-        getPx = uni.$u.getPx,
-        addUnit = uni.$u.addUnit;
+        sysInfo = getWindowInfo();
       if (this.tooltipInfo.width / 2 > this.textInfo.left + this.textInfo.width / 2 - this.screenGap) {
         this.indicatorStyle = {};
         style.left = `-${addUnit(this.textInfo.left - this.screenGap)}`;
         this.indicatorStyle.left = addUnit(this.textInfo.width / 2 - getPx(style.left) - this.indicatorWidth / 2);
-      } else if (this.tooltipInfo.width / 2 > sys.windowWidth - this.textInfo.right + this.textInfo.width / 2 - this.screenGap) {
+      } else if (
+        this.tooltipInfo.width / 2 >
+        sysInfo.windowWidth - this.textInfo.right + this.textInfo.width / 2 - this.screenGap
+      ) {
         this.indicatorStyle = {};
-        style.right = `-${addUnit(sys.windowWidth - this.textInfo.right - this.screenGap)}`;
+        style.right = `-${addUnit(sysInfo.windowWidth - this.textInfo.right - this.screenGap)}`;
         this.indicatorStyle.right = addUnit(this.textInfo.width / 2 - getPx(style.right) - this.indicatorWidth / 2);
       } else {
         const left = Math.abs(this.textInfo.width / 2 - this.tooltipInfo.width / 2);
@@ -173,7 +171,10 @@ export default {
   mounted() {
     this.init();
   },
+  emits: ['click'],
   methods: {
+    addStyle,
+    addUnit,
     init() {
       this.getElRect();
     },
@@ -218,7 +219,7 @@ export default {
       // 调用之前，先将指示器调整到屏幕外，方便获取尺寸
       this.showTooltip = true;
       this.tooltipTop = -10000;
-      uni.$u.sleep(500).then(() => {
+      sleep(500).then(() => {
         this.queryRect(this.tooltipId).then((size) => {
           this.tooltipInfo = size;
           // 获取气泡尺寸之后，将其隐藏，为了让下次切换气泡显示与隐藏时，有淡入淡出的效果
@@ -234,42 +235,19 @@ export default {
       // 关闭组件
       this.showTooltip = false;
       this.$emit('click', 0);
-      // #ifndef H5
       uni.setClipboardData({
         // 优先使用copyText字段，如果没有，则默认使用text字段当做复制的内容
         data: this.copyText || this.text,
         success: () => {
-          this.showToast && uni.$u.toast('复制成功');
+          this.showToast && toast('复制成功');
         },
         fail: () => {
-          this.showToast && uni.$u.toast('复制失败');
+          this.showToast && toast('复制失败');
         },
         complete: () => {
           this.showTooltip = false;
         }
       });
-      // #endif
-      // #ifdef H5
-      let event = window.event || e || {};
-      let clipboard = new ClipboardJS('', {
-        text: () => this.copyText || this.text
-      });
-      clipboard.on('success', (e) => {
-        this.showToast && uni.$u.toast('复制成功');
-        clipboard.off('success');
-        clipboard.off('error');
-        // 在单页应用中，需要销毁DOM的监听
-        clipboard.destroy();
-      });
-      clipboard.on('error', (e) => {
-        this.showToast && uni.$u.toast('复制失败');
-        clipboard.off('success');
-        clipboard.off('error');
-        // 在单页应用中，需要销毁DOM的监听
-        clipboard.destroy();
-      });
-      clipboard.onClick(event);
-      // #endif
     }
   }
 };

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

@@ -1,4 +1,5 @@
-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: {}
-};
+});

package/uview-plus/components/u-tr/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;

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

@@ -2,9 +2,9 @@
   <view class="u-tr"></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';
 /**
  * Tr
  * @description

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

@@ -1,25 +1,26 @@
-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: {
     // 是否展示组件
     show: {
       type: Boolean,
-      default: defprops.transition.show
+      default: () => defProps.transition.show
     },
     // 使用的动画模式
     mode: {
       type: String,
-      default: defprops.transition.mode
+      default: () => defProps.transition.mode
     },
     // 动画的执行时间，单位ms
     duration: {
       type: [String, Number],
-      default: defprops.transition.duration
+      default: () => defProps.transition.duration
     },
     // 使用的动画过渡函数
     timingFunction: {
       type: String,
-      default: defprops.transition.timingFunction
+      default: () => defProps.transition.timingFunction
     }
   }
-};
+});