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

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

@@ -1,47 +1,68 @@
 <template>
-  <u-popup :show="show" @close="closeHandler">
-    <view class="u-picker">
-      <u-toolbar
-        v-if="showToolbar"
-        :cancelColor="cancelColor"
-        :confirmColor="confirmColor"
-        :cancelText="cancelText"
-        :confirmText="confirmText"
-        :title="title"
-        @cancel="cancel"
-        @confirm="confirm"
-      ></u-toolbar>
-      <picker-view
-        class="u-picker__view"
-        :indicatorStyle="`height: ${$u.addUnit(itemHeight)}`"
-        :value="innerIndex"
-        :immediateChange="immediateChange"
-        :style="{
-          height: `${$u.addUnit(visibleItemCount * itemHeight)}`
-        }"
-        @change="changeHandler"
-      >
-        <picker-view-column v-for="(item, index) in innerColumns" :key="index" class="u-picker__view__column">
-          <text
-            v-if="$u.test.array(item)"
-            class="u-picker__view__column__item u-line-1"
-            v-for="(item1, index1) in item"
-            :key="index1"
-            :style="{
-              height: $u.addUnit(itemHeight),
-              lineHeight: $u.addUnit(itemHeight),
-              fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal'
-            }"
-          >
-            {{ getItemText(item1) }}
-          </text>
-        </picker-view-column>
-      </picker-view>
-      <view v-if="loading" class="u-picker--loading">
-        <u-loading-icon mode="circle"></u-loading-icon>
-      </view>
+  <view class="u-picker-warrper">
+    <view v-if="hasInput" class="u-picker-input cursor-pointer" @click="onShowByClickInput">
+      <slot :value="inputLabel"></slot>
+      <slot name="trigger" :value="inputLabel"></slot>
+      <up-input
+        v-if="!$slots['default'] && !$slots['$default'] && !$slots['trigger']"
+        :readonly="true"
+        v-model="inputLabel"
+        v-bind="inputPropsInner"
+      ></up-input>
+      <div class="input-cover"></div>
     </view>
-  </u-popup>
+    <u-popup :show="show || (hasInput && showByClickInput)" :mode="popupMode" :zIndex="zIndex" @close="closeHandler">
+      <view class="u-picker">
+        <u-toolbar
+          v-if="showToolbar"
+          :cancelColor="cancelColor"
+          :confirmColor="confirmColor"
+          :cancelText="cancelText"
+          :confirmText="confirmText"
+          :title="title"
+          :rightSlot="toolbarRightSlot ? true : false"
+          @cancel="cancel"
+          @confirm="confirm"
+        >
+          <template #right>
+            <slot name="toolbar-right"></slot>
+          </template>
+        </u-toolbar>
+        <slot name="toolbar-bottom"></slot>
+        <picker-view
+          class="u-picker__view"
+          :indicatorStyle="`height: ${addUnit(itemHeight)}`"
+          :value="innerIndex"
+          :immediateChange="immediateChange"
+          :style="{
+            height: `${addUnit(visibleItemCount * itemHeight)}`
+          }"
+          @change="changeHandler"
+        >
+          <picker-view-column v-for="(item, index) in innerColumns" :key="index" class="u-picker__view__column">
+            <view
+              v-if="testArray(item)"
+              class="u-picker__view__column__item u-line-1"
+              :class="[index1 === innerIndex[index] && 'u-picker__view__column__item--selected']"
+              v-for="(item1, index1) in item"
+              :key="index1"
+              :style="{
+                height: addUnit(itemHeight),
+                lineHeight: addUnit(itemHeight),
+                fontWeight: index1 === innerIndex[index] ? 'bold' : 'normal',
+                display: 'block'
+              }"
+            >
+              {{ getItemText(item1) }}
+            </view>
+          </picker-view-column>
+        </picker-view>
+        <view v-if="loading" class="u-picker--loading">
+          <u-loading-icon mode="circle"></u-loading-icon>
+        </view>
+      </view>
+    </u-popup>
+  </view>
 </template>
 <script>
 /**
@@ -61,15 +82,17 @@
  * @property {String}			keyName				选项对象中，需要展示的属性键名（默认 'text' ）
  * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩关闭选择器（默认 false ）
  * @property {Array}			defaultIndex		各列的默认索引
- * @property {Boolean}			immediateChange		是否在手指松开时立即触发change事件（默认 false ）
+ * @property {Boolean}			immediateChange		是否在手指松开时立即触发change事件（默认 true ）
  * @event {Function} close		关闭选择器时触发
  * @event {Function} cancel		点击取消按钮触发
  * @event {Function} change		当选择值变化时触发
  * @event {Function} confirm	点击确定按钮，返回当前选择的值
  */
-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 { addUnit, deepClone, sleep } from '../../libs/function/index';
+import test from '../../libs/function/test';
 export default {
   name: 'u-picker',
   mixins: [mpMixin, mixin, props],
@@ -82,15 +105,23 @@ export default {
       // 各列的值
       innerColumns: [],
       // 上一次的变化列索引
-      columnIndex: 0
+      columnIndex: 0,
+      showByClickInput: false,
+      currentActiveValue: [] //当前用户选中，但是还没确认的值，用户没做change操作时候，点击确认可以默认选中第一个
     };
   },
   watch: {
     // 监听默认索引的变化，重新设置对应的值
     defaultIndex: {
       immediate: true,
-      handler(n) {
-        this.setIndexs(n, true);
+      deep: true,
+      handler(n, o) {
+        // 修复uniapp调用子组件直接:defaultIndex="[0]"这样写
+        // v-model的值变化时候导致defaultIndexwatch也会执行的问题
+        //单纯vue不会出现
+        if (!o || n.join('/') != o.join('/')) {
+          this.setIndexs(n, true);
+        }
       }
     },
     // 监听columns参数的变化
@@ -102,11 +133,61 @@ export default {
       }
     }
   },
-  emits: ['close', 'cancel', 'confirm', 'change'],
+  emits: ['close', 'cancel', 'confirm', 'change', 'update:modelValue', 'update:show'],
+  computed: {
+    // input的props
+    inputPropsInner() {
+      return {
+        border: this.inputBorder,
+        placeholder: this.placeholder,
+        disabled: this.disabled,
+        disabledColor: this.disabledColor,
+        ...this.inputProps
+      };
+    },
+    //已选&&已确认的值显示在input上面的文案
+    inputLabel() {
+      let firstItem = this.innerColumns[0] && this.innerColumns[0][0];
+      // //区分是不是对象数组
+      if (firstItem && Object.prototype.toString.call(firstItem) === '[object Object]') {
+        let res = this.innerColumns[0].filter((item) => this.modelValue.includes(item['id']));
+        res = res.map((item) => item[this.keyName]);
+        return res.join('/');
+      } else {
+        //用户确定的值，才显示到输入框
+        return this.modelValue.join('/');
+      }
+    },
+    //已选，待确认的值
+    inputValue() {
+      let items = this.innerColumns.map((item, index) => item[this.innerIndex[index]]);
+      let res = [];
+      //区分是不是对象数组
+      if (items[0] && Object.prototype.toString.call(items[0]) === '[object Object]') {
+        //对象数组返回id集合
+        items.forEach((element) => {
+          res.push(element && element['id']);
+        });
+      } else {
+        //非对象数组返回元素集合
+        items.forEach((element, index) => {
+          res.push(element);
+        });
+      }
+      return res;
+    }
+  },
   methods: {
+    addUnit,
+    testArray: test.array,
+    onShowByClickInput() {
+      if (!this.disabled) {
+        this.showByClickInput = !this.showByClickInput;
+      }
+    },
     // 获取item需要显示的文字，判别为对象还是文本
     getItemText(item) {
-      if (uni.$u.test.object(item)) {
+      if (test.object(item)) {
         return item[this.keyName];
       } else {
         return item;
@@ -115,15 +196,41 @@ export default {
     // 关闭选择器
     closeHandler() {
       if (this.closeOnClickOverlay) {
+        if (this.hasInput) {
+          this.showByClickInput = false;
+        }
+        this.$emit('update:show', false);
         this.$emit('close');
       }
     },
     // 点击工具栏的取消按钮
     cancel() {
+      if (this.hasInput) {
+        this.showByClickInput = false;
+      }
+      this.$emit('update:show', false);
       this.$emit('cancel');
     },
     // 点击工具栏的确定按钮
     confirm() {
+      //如果用户有没有触发过change
+      if (!this.currentActiveValue.length) {
+        let arr = [0];
+        //如果有默认值&&默认值的数组长度是正确的，就用默认值
+        if (Array.isArray(this.defaultIndex) && this.defaultIndex.length == this.innerColumns.length) {
+          arr = [...this.defaultIndex];
+        } else {
+          //否则默认都选中第一个
+          arr = Array(this.innerColumns.length).fill(0);
+        }
+        this.setLastIndex(arr);
+        this.setIndexs(arr);
+      }
+      this.$emit('update:modelValue', this.inputValue);
+      if (this.hasInput) {
+        this.showByClickInput = false;
+      }
+      this.$emit('update:show', false);
       this.$emit('confirm', {
         indexs: this.innerIndex,
         value: this.innerColumns.map((item, index) => item[this.innerIndex[index]]),
@@ -135,6 +242,8 @@ export default {
       const { value } = e.detail;
       let index = 0,
         columnIndex = 0;
+      //记录用户选中但是还没确认的值
+      this.currentActiveValue = value;
       // 通过对比前后两次的列索引，得出当前变化的是哪一列
       for (let i = 0; i < value.length; i++) {
         let item = value[i];
@@ -152,10 +261,15 @@ export default {
       // 将当前的各项变化索引，设置为"上一次"的索引变化值
       this.setLastIndex(value);
       this.setIndexs(value);
+      //如果是非自带输入框才会在change时候触发v-model绑值的变化
+      //否则会非常的奇怪，用户未确认，值就变了
+      if (!this.hasInput) {
+        this.$emit('update:modelValue', this.inputValue);
+      }
       this.$emit('change', {
         // #ifndef MP-WEIXIN || MP-LARK
         // 微信小程序不能传递this，会因为循环引用而报错
-        picker: this,
+        // picker: this,
         // #endif
         value: this.innerColumns.map((item, index) => item[value[index]]),
         index,
@@ -167,7 +281,7 @@ export default {
     },
     // 设置index索引，此方法可被外部调用设置
     setIndexs(index, setLastIndex) {
-      this.innerIndex = uni.$u.deepClone(index);
+      this.innerIndex = deepClone(index);
       if (setLastIndex) {
         this.setLastIndex(index);
       }
@@ -176,14 +290,16 @@ export default {
     setLastIndex(index) {
       // 当能进入此方法，意味着当前设置的各列默认索引，即为“上一次”的选中值，需要记录，是因为changeHandler中
       // 需要拿前后的变化值进行对比，得出当前发生改变的是哪一列
-      this.lastIndex = uni.$u.deepClone(index);
+      this.lastIndex = deepClone(index);
     },
     // 设置对应列选项的所有值
     setColumnValues(columnIndex, values) {
       // 替换innerColumns数组中columnIndex索引的值为values，使用的是数组的splice方法
       this.innerColumns.splice(columnIndex, 1, values);
+      // 替换完成之后将修改列之后的已选值置空
+      this.setLastIndex(this.innerIndex.slice(0, columnIndex));
       // 拷贝一份原有的innerIndex做临时变量，将大于当前变化列的所有的列的默认索引设置为0
-      let tmpIndex = uni.$u.deepClone(this.innerIndex);
+      let tmpIndex = deepClone(this.innerIndex);
       for (let i = 0; i < this.innerColumns.length; i++) {
         if (i > this.columnIndex) {
           tmpIndex[i] = 0;
@@ -197,14 +313,14 @@ export default {
       // 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
       // 索引如果在外部change的回调中调用getColumnValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
       (async () => {
-        await uni.$u.sleep();
+        await sleep();
       })();
       return this.innerColumns[columnIndex];
     },
     // 设置整体各列的columns的值
     setColumns(columns) {
       // console.log(columns)
-      this.innerColumns = uni.$u.deepClone(columns);
+      this.innerColumns = deepClone(columns);
       // 如果在设置各列数据时，没有被设置默认的各列索引defaultIndex，那么用0去填充它，数组长度为列的数量
       if (this.innerIndex.length === 0) {
         this.innerIndex = new Array(columns.length).fill(0);
@@ -219,7 +335,7 @@ export default {
       // 进行同步阻塞，因为外部得到change事件之后，可能需要执行setColumnValues更新列的值
       // 索引如果在外部change的回调中调用getValues的话，可能无法得到变更后的列值，这里进行一定延时，保证值的准确性
       (async () => {
-        await uni.$u.sleep();
+        await sleep();
       })();
       return this.innerColumns.map((item, index) => item[this.innerIndex[index]]);
     }

package/uview-plus/components/u-picker-column/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-picker-column/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;
@@ -8,4 +23,4 @@ view, scroll-view, swiper-item {
   align-items: stretch;
   align-content: flex-start;
 }
-/* #endif */
+/* #endif */

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

@@ -4,9 +4,9 @@
   </picker-view-column>
 </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';
 /**
  * PickerColumn
  * @description

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

@@ -0,0 +1,10 @@
+.u-picker-data__trigger {
+  position: relative;
+}
+.u-picker-data__trigger__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}

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

@@ -0,0 +1,12 @@
+.u-picker-data {
+  &__trigger {
+    position: relative;
+    &__cover {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+<template>
+  <view class="u-picker-data">
+    <view class="u-picker-data__trigger">
+      <slot name="trigger" :current="current"></slot>
+      <up-input
+        v-if="!$slots['trigger']"
+        :modelValue="current"
+        disabled
+        disabledColor="#ffffff"
+        :placeholder="title"
+        border="none"
+      ></up-input>
+      <view @click="show = true" class="u-picker-data__trigger__cover"></view>
+    </view>
+    <up-picker
+      :show="show"
+      :columns="optionsInner"
+      :keyName="labelKey"
+      :defaultIndex="defaultIndex"
+      @confirm="select"
+      @cancel="cancel"
+    ></up-picker>
+  </view>
+</template>
+<script>
+export default {
+  props: {
+    modelValue: {
+      type: [String, Number],
+      default: ''
+    },
+    title: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    options: {
+      type: Array,
+      default: () => {
+        return [];
+      }
+    },
+    valueKey: {
+      type: String,
+      default: 'id'
+    },
+    labelKey: {
+      type: String,
+      default: 'name'
+    }
+  },
+  data() {
+    return {
+      show: false,
+      current: '',
+      defaultIndex: []
+    };
+  },
+  created() {
+    if (this.modelValue) {
+      this.options.forEach((ele, index) => {
+        if (ele[this.valueKey] == this.modelValue) {
+          this.current = ele[this.labelKey];
+          this.defaultIndex = [index];
+        }
+      });
+    }
+  },
+  watch: {
+    modelValue() {
+      if (this.modelValue) {
+        this.options.forEach((ele) => {
+          if (ele[this.valueKey] == this.modelValue) {
+            this.current = ele[this.labelKey];
+            this.defaultIndex = [index];
+          }
+        });
+      }
+    }
+  },
+  computed: {
+    optionsInner() {
+      return [this.options];
+    }
+  },
+  emits: ['update:modelValue'],
+  methods: {
+    hideKeyboard() {
+      uni.hideKeyboard();
+    },
+    cancel() {
+      this.show = false;
+    },
+    select(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];
+    }
+  }
+};
+</script>
+<style scoped>
+@import './style.css';
+</style>

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

@@ -15,7 +15,7 @@ export default {
         mode: 'bottom',
         duration: 300,
         closeable: false,
-        overlayStyle: () => {},
+        overlayStyle: {},
         closeOnClickOverlay: true,
         zIndex: 10075,
         safeAreaInsetBottom: true,

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

@@ -1,80 +1,81 @@
-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.popup.show
+      default: () => defProps.popup.show
     },
     // 是否显示遮罩
     overlay: {
       type: Boolean,
-      default: defprops.popup.overlay
+      default: () => defProps.popup.overlay
     },
     // 弹出的方向，可选值为 top bottom right left center
     mode: {
       type: String,
-      default: defprops.popup.mode
+      default: () => defProps.popup.mode
     },
     // 动画时长，单位ms
     duration: {
       type: [String, Number],
-      default: defprops.popup.duration
+      default: () => defProps.popup.duration
     },
     // 是否显示关闭图标
     closeable: {
       type: Boolean,
-      default: defprops.popup.closeable
+      default: () => defProps.popup.closeable
     },
     // 自定义遮罩的样式
     overlayStyle: {
       type: [Object, String],
-      default: defprops.popup.overlayStyle
+      default: () => defProps.popup.overlayStyle
     },
     // 点击遮罩是否关闭弹窗
     closeOnClickOverlay: {
       type: Boolean,
-      default: defprops.popup.closeOnClickOverlay
+      default: () => defProps.popup.closeOnClickOverlay
     },
     // 层级
     zIndex: {
       type: [String, Number],
-      default: defprops.popup.zIndex
+      default: () => defProps.popup.zIndex
     },
     // 是否为iPhoneX留出底部安全距离
     safeAreaInsetBottom: {
       type: Boolean,
-      default: defprops.popup.safeAreaInsetBottom
+      default: () => defProps.popup.safeAreaInsetBottom
     },
     // 是否留出顶部安全距离（状态栏高度）
     safeAreaInsetTop: {
       type: Boolean,
-      default: defprops.popup.safeAreaInsetTop
+      default: () => defProps.popup.safeAreaInsetTop
     },
     // 自定义关闭图标位置，top-left为左上角，top-right为右上角，bottom-left为左下角，bottom-right为右下角
     closeIconPos: {
       type: String,
-      default: defprops.popup.closeIconPos
+      default: () => defProps.popup.closeIconPos
     },
     // 是否显示圆角
     round: {
       type: [Boolean, String, Number],
-      default: defprops.popup.round
+      default: () => defProps.popup.round
     },
     // mode=center，也即中部弹出时，是否使用缩放模式
     zoom: {
       type: Boolean,
-      default: defprops.popup.zoom
+      default: () => defProps.popup.zoom
     },
     // 弹窗背景色，设置为transparent可去除白色背景
     bgColor: {
       type: String,
-      default: defprops.popup.bgColor
+      default: () => defProps.popup.bgColor
     },
     // 遮罩的透明度，0-1之间
     overlayOpacity: {
       type: [Number, String],
-      default: defprops.popup.overlayOpacity
+      default: () => defProps.popup.overlayOpacity
     }
   }
-};
+});

package/uview-plus/components/u-popup/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;
@@ -12,6 +27,16 @@ view, scroll-view, swiper-item {
 .u-popup {
   flex: 1;
 }
+.u-popup__trigger {
+  position: relative;
+}
+.u-popup__trigger__cover {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
 .u-popup__content {
   background-color: #fff;
   position: relative;
@@ -67,4 +92,4 @@ view, scroll-view, swiper-item {
 .u-popup__content__close--bottom-right {
   right: 15px;
   bottom: 15px;
-}
+}