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

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

@@ -93,6 +93,11 @@ export const props = defineMixin({
       type: String,
       default: () => defProps.picker.keyName
     },
+    // 选项对象中，需要获取的属性值键名
+    valueName: {
+      type: String,
+      default: () => defProps.picker.valueName
+    },
     // 是否允许点击遮罩关闭选择器
     closeOnClickOverlay: {
       type: Boolean,
@@ -117,6 +122,31 @@ export const props = defineMixin({
     zIndex: {
       type: [String, Number],
       default: () => defProps.picker.zIndex
+    },
+    // 弹窗背景色，设置为transparent可去除白色背景
+    bgColor: {
+      type: String,
+      default: () => defProps.picker.bgColor
+    },
+    // 是否显示圆角
+    round: {
+      type: [Boolean, String, Number],
+      default: () => defProps.picker.round
+    },
+    // 动画时长，单位ms
+    duration: {
+      type: [String, Number],
+      default: () => defProps.picker.duration
+    },
+    // 遮罩的透明度，0-1之间
+    overlayOpacity: {
+      type: [Number, String],
+      default: () => defProps.picker.overlayOpacity
+    },
+    // 是否页面内展示
+    pageInline: {
+      type: Boolean,
+      default: () => defProps.picker.pageInline
     }
   }
 });

package/uview-plus/components/u-picker/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-picker {
   position: relative;
 }

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

@@ -1,5 +1,3 @@
-@import '../../libs/css/components.scss';
-
 .u-picker {
   position: relative;
   &-input {

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

@@ -1,5 +1,5 @@
 <template>
-  <view class="u-picker-warrper">
+  <view class="u-picker-wraper">
     <view v-if="hasInput" class="u-picker-input cursor-pointer" @click="onShowByClickInput">
       <slot :value="inputLabel"></slot>
       <slot name="trigger" :value="inputLabel"></slot>
@@ -9,9 +9,19 @@
         v-model="inputLabel"
         v-bind="inputPropsInner"
       ></up-input>
-      <div class="input-cover"></div>
+      <cover-view class="input-cover"></cover-view>
     </view>
-    <up-popup :show="show || (hasInput && showByClickInput)" :mode="popupMode" :zIndex="zIndex" @close="closeHandler">
+    <up-popup
+      :show="show || (hasInput && showByClickInput)"
+      :mode="popupMode"
+      :zIndex="zIndex"
+      :bgColor="bgColor"
+      :round="round"
+      :duration="duration"
+      :pageInline="pageInline"
+      :overlayOpacity="overlayOpacity"
+      @close="closeHandler"
+    >
       <view class="u-picker">
         <up-toolbar
           v-if="showToolbar"
@@ -31,11 +41,11 @@
         <slot name="toolbar-bottom"></slot>
         <picker-view
           class="u-picker__view"
-          :indicatorStyle="`height: ${addUnit(itemHeight)}`"
+          :indicatorStyle="`height: ${addUnit(itemHeight, 'px')}`"
           :value="innerIndex"
           :immediateChange="immediateChange"
           :style="{
-            height: `${addUnit(visibleItemCount * itemHeight)}`
+            height: `${addUnit(visibleItemCount * itemHeight, 'px')}`
           }"
           @change="changeHandler"
         >
@@ -47,8 +57,8 @@
               v-for="(item1, index1) in item"
               :key="index1"
               :style="{
-                height: addUnit(itemHeight),
-                lineHeight: addUnit(itemHeight),
+                height: addUnit(itemHeight, 'px'),
+                lineHeight: addUnit(itemHeight, 'px'),
                 fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
                 display: 'block'
               }"
@@ -83,6 +93,10 @@
  * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器（默认 false ）
  * @property {Array}			defaultIndex		各列的默认索引
  * @property {Boolean}			immediateChange		是否在手指松开时立即触发change事件（默认 true ）
+ * @property {String | Number}	round				圆角值（默认 0）
+ * @property {String }	        bgColor				背景色值（默认 '' ）
+ * @property {String | Number}	duration			动画时长，单位ms （默认 300 ）
+ * @property {String | Number}	overlayDuration		遮罩层动画时长，单位ms （默认 350 ）
  * @event {Function} close		关闭选择器时触发
  * @event {Function} cancel		点击取消按钮触发
  * @event {Function} change		当选择值变化时触发
@@ -111,6 +125,14 @@ export default {
     };
   },
   watch: {
+    // 监听columns参数的变化
+    columns: {
+      immediate: true,
+      deep: true,
+      handler(n) {
+        this.setColumns(n);
+      }
+    },
     // 监听默认索引的变化，重新设置对应的值
     defaultIndex: {
       immediate: true,
@@ -124,12 +146,42 @@ export default {
         }
       }
     },
-    // 监听columns参数的变化
-    columns: {
+    modelValue: {
       immediate: true,
       deep: true,
-      handler(n) {
-        this.setColumns(n);
+      handler(n, o) {
+        // 修复uniapp调用子组件直接:defaultIndex="[0]"这样写
+        // v-model的值变化时候导致defaultIndexwatch也会执行的问题
+        //单纯vue不会出现
+        if (!o || n.join('/') != o.join('/')) {
+          let arr = [];
+          if (n != null) {
+            n.forEach((element, index) => {
+              let currentCols = this.getColumnValues(index);
+              if (!Array.isArray(currentCols) && currentCols.length === 0) {
+                return;
+              }
+              if (typeof currentCols[0] === 'object') {
+                currentCols.forEach((item, index2) => {
+                  if (item[this.valueName] == element) {
+                    arr.push(index2);
+                  }
+                });
+              } else {
+                currentCols.forEach((item, index2) => {
+                  if (item == element) {
+                    arr.push(index2);
+                  }
+                });
+              }
+            });
+            // alert(arr)
+            if (arr.length == 0 && this.defaultIndex) {
+            } else {
+              this.setIndexs(arr, true);
+            }
+          }
+        }
       }
     }
   },
@@ -164,9 +216,9 @@ export default {
       let res = [];
       //区分是不是对象数组
       if (items[0] && Object.prototype.toString.call(items[0]) === '[object Object]') {
-        //对象数组返回id集合
+        //对象数组返回属性值集合
         items.forEach((element) => {
-          res.push(element && element['id']);
+          res.push(element && element[this.valueName]);
         });
       } else {
         //非对象数组返回元素集合
@@ -199,6 +251,7 @@ export default {
         if (this.hasInput) {
           this.showByClickInput = false;
         }
+        this.setDefault();
         this.$emit('update:show', false);
         this.$emit('close');
       }
@@ -208,14 +261,13 @@ export default {
       if (this.hasInput) {
         this.showByClickInput = false;
       }
+      this.setDefault();
       this.$emit('update:show', false);
       this.$emit('cancel');
     },
-    // 点击工具栏的确定按钮
-    confirm() {
-      //如果用户有没有触发过change
-      if (!this.currentActiveValue.length) {
-        let arr = [0];
+    setDefault() {
+      let arr = [0];
+      if (this.lastIndex.length == 0) {
         //如果有默认值&&默认值的数组长度是正确的，就用默认值
         if (Array.isArray(this.defaultIndex) && this.defaultIndex.length == this.innerColumns.length) {
           arr = [...this.defaultIndex];
@@ -223,13 +275,23 @@ export default {
           //否则默认都选中第一个
           arr = Array(this.innerColumns.length).fill(0);
         }
-        this.setLastIndex(arr);
-        this.setIndexs(arr);
+      } else {
+        arr = deepClone(this.lastIndex);
+      }
+      this.setLastIndex(arr);
+      this.setIndexs(arr);
+    },
+    // 点击工具栏的确定按钮
+    confirm() {
+      // 如果用户有没有触发过change
+      if (!this.currentActiveValue.length) {
+        this.setDefault();
       }
       this.$emit('update:modelValue', this.inputValue);
       if (this.hasInput) {
         this.showByClickInput = false;
       }
+      this.setLastIndex(this.innerIndex);
       this.$emit('update:show', false);
       this.$emit('confirm', {
         indexs: this.innerIndex,
@@ -247,7 +309,7 @@ export default {
       // 通过对比前后两次的列索引，得出当前变化的是哪一列
       for (let i = 0; i < value.length; i++) {
         let item = value[i];
-        if (item !== (this.lastIndex[i] || 0)) {
+        if (item !== undefined && item !== (this.lastIndex[i] || 0)) {
           // 把undefined转为合法假值0
           // 设置columnIndex为当前变化列的索引
           columnIndex = i;
@@ -259,13 +321,13 @@ export default {
       this.columnIndex = columnIndex;
       const values = this.innerColumns;
       // 将当前的各项变化索引，设置为"上一次"的索引变化值
-      this.setLastIndex(value);
+      // this.setLastIndex(value)
       this.setIndexs(value);
       //如果是非自带输入框才会在change时候触发v-model绑值的变化
       //否则会非常的奇怪，用户未确认，值就变了
-      if (!this.hasInput) {
-        this.$emit('update:modelValue', this.inputValue);
-      }
+      // if (!this.hasInput) {
+      // 	this.$emit('update:modelValue', this.inputValue)
+      // }
       this.$emit('change', {
         // #ifndef MP-WEIXIN || MP-LARK
         // 微信小程序不能传递this，会因为循环引用而报错

package/uview-plus/components/u-picker-column/u-picker-column.vue

@@ -20,6 +20,4 @@ export default {
   mixins: [mpMixin, mixin, props]
 };
 </script>
-<style scoped>
-@import './style.css';
-</style>
+<style scoped></style>

package/uview-plus/components/u-picker-data/style.css

@@ -7,4 +7,5 @@
   left: 0;
   right: 0;
   bottom: 0;
+  z-index: 10;
 }

package/uview-plus/components/u-picker-data/style.scss

@@ -7,6 +7,7 @@
       left: 0;
       right: 0;
       bottom: 0;
+      z-index: 10;
     }
   }
 }

package/uview-plus/components/u-picker-data/u-picker-data.vue

@@ -17,13 +17,16 @@
       :columns="optionsInner"
       :keyName="labelKey"
       :defaultIndex="defaultIndex"
-      @confirm="select"
+      @confirm="confirm"
       @cancel="cancel"
+      @close="close"
     ></up-picker>
   </view>
 </template>
 <script>
+import { formValidate } from '../../libs/function/index';
 export default {
+  name: 'u-picker-data',
   props: {
     modelValue: {
       type: [String, Number],
@@ -67,17 +70,21 @@ export default {
           this.defaultIndex = [index];
         }
       });
+    } else {
+      this.clear();
     }
   },
   watch: {
     modelValue() {
       if (this.modelValue) {
-        this.options.forEach((ele) => {
+        this.options.forEach((ele, index) => {
           if (ele[this.valueKey] == this.modelValue) {
             this.current = ele[this.labelKey];
             this.defaultIndex = [index];
           }
         });
+      } else {
+        this.clear();
       }
     }
   },
@@ -86,21 +93,32 @@ export default {
       return [this.options];
     }
   },
-  emits: ['update:modelValue'],
+  emits: ['update:modelValue', 'cancel', 'close', 'confirm'],
   methods: {
     hideKeyboard() {
       uni.hideKeyboard();
     },
     cancel() {
       this.show = false;
+      this.$emit('cancel');
     },
-    select(e) {
+    close() {
+      this.$emit('close');
+    },
+    clear() {
+      this.current = '';
+      this.defaultIndex = [];
+    },
+    confirm(e) {
       const { columnIndex, index, value } = e;
       this.show = false;
       // console.log(value);
       this.$emit('update:modelValue', value[0][this.valueKey]);
       this.defaultIndex = columnIndex;
       this.current = value[0][this.labelKey];
+      this.$emit('confirm');
+      // 表单验证
+      formValidate(this, 'change');
     }
   }
 };

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

@@ -0,0 +1,59 @@
+import { defineMixin } from '../../libs/vue';
+import defProps from '../../libs/config/props.js';
+
+export const props = defineMixin({
+  props: {
+    // 显示的文字内容
+    text: {
+      type: [String, Number],
+      default: ''
+    },
+    // 文字颜色
+    color: {
+      type: String,
+      default: '#333'
+    },
+    // 背景颜色
+    bgColor: {
+      type: String,
+      default: '#f7f7f7'
+    },
+    // 弹出框背景颜色
+    popupBgColor: {
+      type: String,
+      default: '#f7f7f7'
+    },
+    // 弹出框位置
+    placement: {
+      type: String,
+      default: 'top'
+    },
+    // 触发方式
+    triggerMode: {
+      type: String,
+      default: 'click'
+    },
+    // 是否显示 (manual模式下使用)
+    show: {
+      type: Boolean,
+      default: false
+    },
+    // z-index值
+    zIndex: {
+      type: [Number, String],
+      default: 10070
+    },
+    // 强制定位
+    forcePosition: {
+      type: Object,
+      default() {
+        return {};
+      }
+    },
+    // 弹出方向
+    direction: {
+      type: String,
+      default: 'top'
+    }
+  }
+});

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

@@ -0,0 +1,8 @@
+.up-popover__content {
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  flex-direction: row;
+  align-items: center;
+  padding: 12px 16px;
+}

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

@@ -0,0 +1,7 @@
+.up-popover {
+  &__content {
+    @include flex;
+    align-items: center;
+    padding: 12px 16px;
+  }
+}

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

@@ -0,0 +1,84 @@
+<template>
+  <view class="up-popover">
+    <up-tooltip
+      ref="tooltip"
+      :text="text"
+      :color="color"
+      :bg-color="bgColor"
+      :popup-bg-color="popupBgColor"
+      :placement="placement"
+      :trigger-mode="triggerMode"
+      :show="show"
+      :z-index="zIndex"
+      :force-position="forcePosition"
+      :direction="direction"
+      @open="onOpen"
+      @close="onClose"
+      @click="onClick"
+    >
+      <template #trigger>
+        <slot name="trigger"></slot>
+      </template>
+      <template #content>
+        <view class="up-popover__content">
+          <slot name="content">
+            <text>{{ text }}</text>
+          </slot>
+        </view>
+      </template>
+    </up-tooltip>
+  </view>
+</template>
+<script>
+import { props } from './props';
+import { mpMixin } from '../../libs/mixin/mpMixin';
+import { mixin } from '../../libs/mixin/mixin';
+/**
+ * popover 气泡弹出框
+ * @description 基于tooltip二次封装的popover组件，用于展示更丰富的内容
+ * @tutorial https://www.uviewui.com/components/popover.html
+ * @property {String | Number}	text			显示的文字内容
+ * @property {String}			color			文字颜色
+ * @property {String}			bgColor			背景颜色
+ * @property {String}			popupBgColor	弹出框背景颜色
+ * @property {String}			placement		弹出框位置 (top, bottom, left, right)
+ * @property {String}			triggerMode		触发方式 (hover, click, manual)
+ * @property {Boolean}			show			是否显示 (manual模式下使用)
+ * @property {Number | String}	zIndex			z-index值
+ * @property {Object}			forcePosition	强制定位 {top, left, right, bottom}
+ * @property {String}			direction		弹出方向 (top, bottom, left, right)
+ * @event {Function}			open			弹出框打开时触发
+ * @event {Function}			close			弹出框关闭时触发
+ * @event {Function}			click			点击触发器时触发
+ * @example <up-popover text="提示内容"><template #trigger><up-button>点击</up-button></template></up-popover>
+ */
+export default {
+  name: 'up-popover',
+  mixins: [mpMixin, mixin, props],
+  data() {
+    return {};
+  },
+  methods: {
+    onOpen() {
+      this.$emit('open');
+    },
+    onClose() {
+      this.$emit('close');
+    },
+    onClick() {
+      this.$emit('click');
+    },
+    // 打开popover
+    open() {
+      this.$refs.tooltip && this.$refs.tooltip.open();
+    },
+    // 关闭popover
+    close() {
+      this.$refs.tooltip && this.$refs.tooltip.close();
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

package/uview-plus/components/u-popup/_doc/readme.md

@@ -4,7 +4,7 @@
 
 该组件用于展示弹窗、信息提示等内容，支持上、下、左、右和中部弹出。组件只提供容器，内部内容由用户自定义，超强扩展性，丝滑的动画。
 
-## [查看文档](https://ijry.github.io/uview-plus/components/popup.html)
+## [查看文档](https://uview-plus.jiangruyi.com/components/popup.html)
 
 ## [更多组件, 请查看 `u-ui` 组件库](https://ext.dcloud.net.cn/plugin?name=u--ui)
 (请勿下载插件zip)
@@ -13,4 +13,4 @@
 	<img src="https://wuui.cn/intr.png">
 </a>
 
-**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://ijry.github.io/uview-plus/components/qqFeedBack.html)**
+**如使用过程中有任何问题，或者您对u-ui有一些好的建议。<br>欢迎加入 [u-ui 交流群](https://uview-plus.jiangruyi.com/components/qqFeedBack.html)**

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

@@ -21,9 +21,13 @@ export default {
         safeAreaInsetBottom: true,
         safeAreaInsetTop: false,
         closeIconPos: 'top-right',
-        round: 0,
+        round: '20px',
         zoom: true,
         bgColor: '',
-        overlayOpacity: 0.5
+        overlayOpacity: 0.5,
+        pageInline: false,
+        touchable: false,
+        minHeight: '200px',
+        maxHeight: '600px'
     }
 }

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

@@ -76,6 +76,26 @@ export const props = defineMixin({
     overlayOpacity: {
       type: [Number, String],
       default: () => defProps.popup.overlayOpacity
+    },
+    // 是否页面内展示
+    pageInline: {
+      type: Boolean,
+      default: () => defProps.popup.pageInline
+    },
+    // 是否页开启手势滑动
+    touchable: {
+      type: Boolean,
+      default: () => defProps.popup.touchable
+    },
+    // 手势滑动最小高度
+    minHeight: {
+      type: [String],
+      default: () => defProps.popup.minHeight
+    },
+    // 手势滑动最大高度
+    maxHeight: {
+      type: [String],
+      default: () => defProps.popup.maxHeight
     }
   }
 });

package/uview-plus/components/u-popup/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-popup {
   flex: 1;
 }
@@ -71,6 +45,24 @@
   border-bottom-left-radius: 10px;
   border-bottom-right-radius: 10px;
 }
+.u-popup__content__touch-area {
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 42rpx;
+  z-index: 10;
+  /* #ifndef APP-NVUE */
+  display: flex;
+  /* #endif */
+  justify-content: center;
+  align-items: center;
+}
+.u-popup__content__indicator {
+  width: 100px;
+  height: 5px;
+  border-radius: 100px;
+  background-color: #c0c4cc;
+}
 .u-popup__content__close {
   position: absolute;
 }