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

package/uview-plus/components/u-cate-tab/u-cate-tab.vue

@@ -0,0 +1,3 @@
+<template>
  <view class="u-cate-tab">
    <view class="u-cate-tab__wrap">
      <scroll-view
        class="u-cate-tab__view u-cate-tab__menu-scroll-view"
        scroll-y
        scroll-with-animation
        :scroll-top="scrollTop"
        :scroll-into-view="itemId"
      >
        <view
          v-for="(item, index) in tabList"
          :key="index"
          class="u-cate-tab__item"
          :class="[innerCurrent == index ? 'u-cate-tab__item-active' : '']"
          @tap.stop="swichMenu(index)"
        >
          <slot name="tabItem" :item="item"></slot>
          <text v-if="!$slots['tabItem']" class="u-line-1">{{ item[tabKeyName] }}</text>
        </view>
      </scroll-view>
      <scroll-view
        :scroll-top="scrollRightTop"
        scroll-with-animation
        scroll-y
        class="u-cate-tab__right-box"
        @scroll="rightScroll"
      >
        <view class="u-cate-tab__page-view">
          <view class="u-cate-tab__page-item" :id="'item' + index" v-for="(item, index) in tabList" :key="index">
            <slot name="itemList" :item="item"></slot>
            <template v-if="!$slots['itemList']">
              <view class="item-title">
                <text>{{ item[tabKeyName] }}</text>
              </view>
              <view class="item-container">
                <template v-for="(item1, index1) in item.children" :key="index1">
                  <slot name="pageItem" :pageItem="item1">
                    <view class="thumb-box">
                      <image class="item-menu-image" :src="item1.icon" mode=""></image>
                      <view class="item-menu-name">{{ item1[itemKeyName] }}</view>
                    </view>
                  </slot>
                </template>
              </view>
            </template>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
  name: 'up-cate-tab',
  props: {
    tabList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tabKeyName: {
      type: String,
      default: 'name'
    },
    itemKeyName: {
      type: String,
      default: 'name'
    },
    current: {
      type: Number,
      default: 0
    }
  },
  watch: {
    tabList() {
      this.getMenuItemTop();
    }
  },
  emits: ['update:current'],
  data() {
    return {
      scrollTop: 0, //tab标题的滚动条位置
      oldScrollTop: 0,
      innerCurrent: 0, // 预设当前项的值
      menuHeight: 0, // 左边菜单的高度
      menuItemHeight: 0, // 左边菜单item的高度
      itemId: '', // 栏目右边scroll-view用于滚动的id
      menuItemPos: [],
      rects: [],
      arr: [],
      scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
      timer: null // 定时器
    };
  },
  onMounted() {
    this.innerCurrent = this.current;
    this.leftMenuStatus(this.innerCurrent);
    this.getMenuItemTop();
  },
  watch: {
    current(nval) {
      this.innerCurrent = nval;
      this.leftMenuStatus(this.innerCurrent);
    }
  },
  methods: {
    // 点击左边的栏目切换
    async swichMenu(index) {
      if (this.arr.length == 0) {
        await this.getMenuItemTop();
      }
      if (index == this.innerCurrent) return;
      this.scrollRightTop = this.oldScrollTop;
      this.$nextTick(function () {
        this.scrollRightTop = this.arr[index];
        this.innerCurrent = index;
        this.leftMenuStatus(index);
        this.$emit('update:current', index);
      });
    },
    // 获取一个目标元素的高度
    getElRect(elClass, dataVal) {
      new Promise((resolve, reject) => {
        const query = uni.createSelectorQuery().in(this);
        query
          .select('.' + elClass)
          .fields(
            {
              size: true
            },
            (res) => {
              // 如果节点尚未生成，res值为null，循环调用执行
              if (!res) {
                setTimeout(() => {
                  this.getElRect(elClass);
                }, 10);
                return;
              }
              this[dataVal] = res.height;
              resolve();
            }
          )
          .exec();
      });
    },
    // 观测元素相交状态
    async observer() {
      this.tabList.map((val, index) => {
        let observer = uni.createIntersectionObserver(this);
        // 检测右边scroll-view的id为itemxx的元素与u-cate-tab__right-box的相交状态
        // 如果跟.u-cate-tab__right-box底部相交，就动态设置左边栏目的活动状态
        observer
          .relativeTo('.u-cate-tab__right-box', {
            top: 0
          })
          .observe('#item' + index, (res) => {
            if (res.intersectionRatio > 0) {
              let id = res.id.substring(4);
              this.leftMenuStatus(id);
            }
          });
      });
    },
    // 设置左边菜单的滚动状态
    async leftMenuStatus(index) {
      this.innerCurrent = index;
      this.$emit('update:current', index);
      // 如果为0，意味着尚未初始化
      if (this.menuHeight == 0 || this.menuItemHeight == 0) {
        await this.getElRect('u-cate-tab__menu-scroll-view', 'menuHeight');
        await this.getElRect('u-cate-tab__item', 'menuItemHeight');
      }
      // 将菜单活动item垂直居中
      this.scrollTop = index * this.menuItemHeight + this.menuItemHeight / 2 - this.menuHeight / 2;
    },
    // 获取右边菜单每个item到顶部的距离
    getMenuItemTop() {
      new Promise((resolve) => {
        let selectorQuery = uni.createSelectorQuery().in(this);
        selectorQuery
          .selectAll('.u-cate-tab__page-item')
          .boundingClientRect((rects) => {
            // 如果节点尚未生成，rects值为[](因为用selectAll，所以返回的是数组)，循环调用执行
            if (!rects.length) {
              setTimeout(() => {
                this.getMenuItemTop();
              }, 10);
              return;
            }
            this.rects = rects;
            rects.forEach((rect) => {
              // 这里减去rects[0].top，是因为第一项顶部可能不是贴到导航栏(比如有个搜索框的情况)
              this.arr.push(rect.top - rects[0].top);
              resolve();
            });
          })
          .exec();
      });
    },
    // 右边菜单滚动
    async rightScroll(e) {
      this.oldScrollTop = e.detail.scrollTop;
      // console.log(e.detail.scrollTop)
      // console.log(JSON.stringify(this.arr))
      if (this.arr.length == 0) {
        await this.getMenuItemTop();
      }
      if (this.timer) return;
      if (!this.menuHeight) {
        await this.getElRect('u-cate-tab__menu-scroll-view', 'menuHeight');
      }
      setTimeout(() => {
        // 节流
        this.timer = null;
        // scrollHeight为右边菜单垂直中点位置
        let scrollHeight = e.detail.scrollTop + 1;
        // console.log(e.detail.scrollTop)
        for (let i = 0; i < this.arr.length; i++) {
          let height1 = this.arr[i];
          let height2 = this.arr[i + 1];
          // console.log('i', i)
          // console.log('height1', height1)
          // console.log('height2', height2)
          // 如果不存在height2，意味着数据循环已经到了最后一个，设置左边菜单为最后一项即可
          if (!height2 || (scrollHeight >= height1 && scrollHeight <= height2)) {
            // console.log('scrollHeight', scrollHeight)
            // console.log('height1', height1)
            // console.log('height2', height2)
            this.leftMenuStatus(i);
            return;
          }
        }
      }, 10);
    }
  }
+@import './style.css';
+</style>

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

@@ -1,111 +1,112 @@
-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: {
     // 标题
     title: {
       type: [String, Number],
-      default: defprops.cell.title
+      default: () => defProps.cell.title
     },
     // 标题下方的描述信息
     label: {
       type: [String, Number],
-      default: defprops.cell.label
+      default: () => defProps.cell.label
     },
     // 右侧的内容
     value: {
       type: [String, Number],
-      default: defprops.cell.value
+      default: () => defProps.cell.value
     },
     // 左侧图标名称，或者图片链接(本地文件建议使用绝对地址)
     icon: {
       type: String,
-      default: defprops.cell.icon
+      default: () => defProps.cell.icon
     },
     // 是否禁用cell
     disabled: {
       type: Boolean,
-      default: defprops.cell.disabled
+      default: () => defProps.cell.disabled
     },
     // 是否显示下边框
     border: {
       type: Boolean,
-      default: defprops.cell.border
+      default: () => defProps.cell.border
     },
     // 内容是否垂直居中(主要是针对右侧的value部分)
     center: {
       type: Boolean,
-      default: defprops.cell.center
+      default: () => defProps.cell.center
     },
     // 点击后跳转的URL地址
     url: {
       type: String,
-      default: defprops.cell.url
+      default: () => defProps.cell.url
     },
     // 链接跳转的方式，内部使用的是uView封装的route方法，可能会进行拦截操作
     linkType: {
       type: String,
-      default: defprops.cell.linkType
+      default: () => defProps.cell.linkType
     },
     // 是否开启点击反馈(表现为点击时加上灰色背景)
     clickable: {
       type: Boolean,
-      default: defprops.cell.clickable
+      default: () => defProps.cell.clickable
     },
     // 是否展示右侧箭头并开启点击反馈
     isLink: {
       type: Boolean,
-      default: defprops.cell.isLink
+      default: () => defProps.cell.isLink
     },
     // 是否显示表单状态下的必填星号(此组件可能会内嵌入input组件)
     required: {
       type: Boolean,
-      default: defprops.cell.required
+      default: () => defProps.cell.required
     },
     // 右侧的图标箭头
     rightIcon: {
       type: String,
-      default: defprops.cell.rightIcon
+      default: () => defProps.cell.rightIcon
     },
     // 右侧箭头的方向，可选值为：left，up，down
     arrowDirection: {
       type: String,
-      default: defprops.cell.arrowDirection
+      default: () => defProps.cell.arrowDirection
     },
     // 左侧图标样式
     iconStyle: {
       type: [Object, String],
       default: () => {
-        return uni.$u.props.cell.iconStyle;
+        return defProps.cell.iconStyle;
       }
     },
     // 右侧箭头图标的样式
     rightIconStyle: {
       type: [Object, String],
       default: () => {
-        return uni.$u.props.cell.rightIconStyle;
+        return defProps.cell.rightIconStyle;
       }
     },
     // 标题的样式
     titleStyle: {
       type: [Object, String],
       default: () => {
-        return uni.$u.props.cell.titleStyle;
+        return defProps.cell.titleStyle;
       }
     },
     // 单位元的大小，可选值为large
     size: {
       type: String,
-      default: defprops.cell.size
+      default: () => defProps.cell.size
     },
     // 点击cell是否阻止事件传播
     stop: {
       type: Boolean,
-      default: defprops.cell.stop
+      default: () => defProps.cell.stop
     },
     // 标识符，cell被点击时返回
     name: {
       type: [Number, String],
-      default: defprops.cell.name
+      default: () => defProps.cell.name
     }
   }
-};
+});

package/uview-plus/components/u-cell/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;
@@ -17,7 +32,7 @@ view, scroll-view, swiper-item {
   /* #ifndef APP-NVUE */
   box-sizing: border-box;
   /* #endif */
-  padding: 10px 15px;
+  padding: 13px 15px;
   font-size: 15px;
   color: var(--u-main-color);
   align-items: center;
@@ -57,6 +72,8 @@ view, scroll-view, swiper-item {
 }
 .u-cell__title {
   flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 .u-cell__title-text {
   font-size: 15px;
@@ -77,6 +94,9 @@ view, scroll-view, swiper-item {
 }
 .u-cell__value {
   text-align: right;
+  /* #ifndef APP-NVUE */
+  margin-left: auto;
+  /* #endif */
   font-size: 14px;
   line-height: 24px;
   color: var(--u-content-color);
@@ -84,6 +104,26 @@ view, scroll-view, swiper-item {
 .u-cell__value--large {
   font-size: 15px;
 }
+.u-cell--required {
+  /* #ifndef APP-NVUE */
+  overflow: visible;
+  /* #endif */
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+}
+.u-cell--required:before {
+  position: absolute;
+  /* #ifndef APP-NVUE */
+  content: "*";
+  /* #endif */
+  left: -8px;
+  margin-top: 4rpx;
+  font-size: 14px;
+  color: var(--u-error);
+}
 .u-cell--clickable {
   background-color: var(--u-bg-color);
 }
@@ -95,4 +135,4 @@ view, scroll-view, swiper-item {
 }
 .u-cell--center {
   align-items: center;
-}
+}

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

@@ -1,6 +1,6 @@
 @import '../../libs/css/components.scss';
 
-$u-cell-padding: 10px 15px !default;
+$u-cell-padding: 13px 15px !default;
 $u-cell-font-size: 15px !default;
 $u-cell-line-height: 24px !default;
 $u-cell-color: $u-main-color !default;
@@ -76,6 +76,8 @@ $u-cell-label-margin-top: 5px !default;
 
   &__title {
     flex: $u-cell-title-flex;
+    display: flex;
+    flex-direction: column;
 
     &-text {
       font-size: $u-cell-title-font-size;
@@ -101,15 +103,36 @@ $u-cell-label-margin-top: 5px !default;
 
   &__value {
     text-align: right;
+    /* #ifndef APP-NVUE */
+    margin-left: auto;
+    /* #endif */
     font-size: $u-cell-value-font-size;
     line-height: $u-cell-line-height;
     color: $u-cell-value-color;
-
     &--large {
       font-size: $u-cell-value-font-size-large;
     }
   }
 
+  &--required {
+    /* #ifndef APP-NVUE */
+    overflow: visible;
+    /* #endif */
+    @include flex;
+    align-items: center;
+  }
+
+  &--required:before {
+    position: absolute;
+    /* #ifndef APP-NVUE */
+    content: '*';
+    /* #endif */
+    left: -8px;
+    margin-top: 4rpx;
+    font-size: 14px;
+    color: $u-error;
+  }
+
   &--clickable {
     background-color: $u-cell-clickable-color;
   }

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

@@ -2,29 +2,32 @@
   <view
     class="u-cell"
     :class="[customClass]"
-    :style="[$u.addStyle(customStyle)]"
+    :style="[addStyle(customStyle)]"
     :hover-class="!disabled && (clickable || isLink) ? 'u-cell--clickable' : ''"
     :hover-stay-time="250"
     @tap="clickHandler"
   >
     <view class="u-cell__body" :class="[center && 'u-cell--center', size === 'large' && 'u-cell__body--large']">
       <view class="u-cell__body__content">
-        <view class="u-cell__left-icon-wrap">
-          <slot name="icon">
-            <u-icon v-if="icon" :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></u-icon>
-          </slot>
+        <view class="u-cell__left-icon-wrap" v-if="$slots.icon || icon">
+          <slot name="icon" v-if="$slots.icon"></slot>
+          <u-icon v-else :name="icon" :custom-style="iconStyle" :size="size === 'large' ? 22 : 18"></u-icon>
         </view>
         <view class="u-cell__title">
-          <slot name="title">
-            <text
-              v-if="title"
-              class="u-cell__title-text"
-              :style="[titleTextStyle]"
-              :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__title-text--large']"
-            >
-              {{ title }}
-            </text>
-          </slot>
+          <!-- 将slot与默认内容用if/else分开主要是因为微信小程序不支持slot嵌套传递，这样才能解决collapse组件的slot不失效问题，label暂时未用到。 -->
+          <slot name="title" v-if="$slots.title || !title"></slot>
+          <text
+            v-else
+            class="u-cell__title-text"
+            :style="[titleTextStyle]"
+            :class="[
+              required && 'u-cell--required',
+              disabled && 'u-cell--disabled',
+              size === 'large' && 'u-cell__title-text--large'
+            ]"
+          >
+            {{ title }}
+          </text>
           <slot name="label">
             <text
               class="u-cell__label"
@@ -40,34 +43,42 @@
         <text
           class="u-cell__value"
           :class="[disabled && 'u-cell--disabled', size === 'large' && 'u-cell__value--large']"
-          v-if="!$u.test.empty(value)"
+          v-if="!testEmpty(value)"
         >
           {{ value }}
         </text>
       </slot>
-      <view class="u-cell__right-icon-wrap" :class="[`u-cell__right-icon-wrap--${arrowDirection}`]">
-        <slot name="right-icon">
-          <u-icon
-            v-if="isLink"
-            :name="rightIcon"
-            :custom-style="rightIconStyle"
-            :color="disabled ? '#c8c9cc' : 'info'"
-            :size="size === 'large' ? 18 : 16"
-          ></u-icon>
-        </slot>
+      <view
+        class="u-cell__right-icon-wrap"
+        v-if="$slots['right-icon'] || isLink"
+        :class="[`u-cell__right-icon-wrap--${arrowDirection}`]"
+      >
+        <u-icon
+          v-if="rightIcon && !$slots['right-icon']"
+          :name="rightIcon"
+          :custom-style="rightIconStyle"
+          :color="disabled ? '#c8c9cc' : 'info'"
+          :size="size === 'large' ? 18 : 16"
+        ></u-icon>
+        <slot v-else name="right-icon"></slot>
+      </view>
+      <view class="u-cell__right-icon-wrap" v-if="$slots['righticon']" :class="[`u-cell__right-icon-wrap--${arrowDirection}`]">
+        <slot name="righticon"></slot>
       </view>
     </view>
     <u-line v-if="border"></u-line>
   </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 } from '../../libs/function/index';
+import test from '../../libs/function/test';
 /**
  * cell  单元格
  * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
- * @tutorial https://uviewui.com/components/cell.html
+ * @tutorial https://uview-plus.jiangruyi.com/components/cell.html
  * @property {String | Number}	title			标题
  * @property {String | Number}	label			标题下方的描述信息
  * @property {String | Number}	value			右侧的内容
@@ -100,11 +111,13 @@ export default {
   mixins: [mpMixin, mixin, props],
   computed: {
     titleTextStyle() {
-      return uni.$u.addStyle(this.titleStyle);
+      return addStyle(this.titleStyle);
     }
   },
   emits: ['click'],
   methods: {
+    addStyle,
+    testEmpty: test.empty,
     // 点击cell
     clickHandler(e) {
       if (this.disabled) return;

package/uview-plus/components/u-cell-group/props.js

@@ -1,15 +1,16 @@
-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: {
     // 分组标题
     title: {
       type: String,
-      default: defprops.cellGroup.title
+      default: () => defProps.cellGroup.title
     },
     // 是否显示外边框
     border: {
       type: Boolean,
-      default: defprops.cellGroup.border
+      default: () => defProps.cellGroup.border
     }
   }
-};
+});

package/uview-plus/components/u-cell-group/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;
@@ -22,4 +37,4 @@ view, scroll-view, swiper-item {
 }
 .u-cell-group__wrapper {
   position: relative;
-}
+}