Update 优化picker组件

UI/XYH.APP/src/components/vber/picker-m/vb-picker-m.vue

@@ -121,6 +121,11 @@ function showPopup() {
   if (isShow.value != false) {
     show.value = true
   }
+  if (valIndex.value.length < columnList.value.length) {
+    for (let i = 0; i < columnList.value.length - valIndex.value.length; i++) {
+      valIndex.value.push(0)
+    }
+  }
 }
 
 function hidePopup(type?: "confirm" | "cancel" | "maskClick") {
@@ -139,6 +144,10 @@ function hidePopup(type?: "confirm" | "cancel" | "maskClick") {
   }
 }
 function bindShowPopup() {
+  uni.hideKeyboard()
+  if (props.disabled) {
+    return
+  }
   showPopup()
 }
 function bindClear() {
@@ -237,16 +246,19 @@ function init() {
 onLoad(init)
 </script>
 <template>
-  <view class="is-link">
-    <uni-easyinput
-      type="text"
-      v-model="valText"
-      @focus="bindShowPopup"
-      @clear="bindClear"
-      :inputBorder="false"
-      :placeholder="_placeholder"
-      :disabled="disabled"
-    />
+  <view class="is-link vb-picker" @click="bindShowPopup" :class="{ 'is-disabled': disabled }">
+    <view class="vb-picker" @click="bindShowPopup" :class="{ 'is-disabled': disabled }">
+      <view class="vb-picker__content">
+        <view class="vb-picker__text" v-if="valText">{{ valText }}</view>
+        <view class="vb-picker__placeholder" v-else-if="_placeholder">{{ _placeholder }}</view>
+        <i
+          v-if="valText && !disabled"
+          class="vb-picker__icon-clera"
+          :style="{ color: show ? 'var(--vb-color)' : '#c0c4cc' }"
+          @click.stop="bindClear"
+        ></i>
+      </view>
+    </view>
   </view>
   <view class="vb-popup" v-if="show">
     <view class="vb-popup-content">

UI/XYH.APP/src/components/vber/picker/vb-picker.vue

@@ -75,7 +75,10 @@ const getCol = () => {
   return valIndex.value.length > 0 ? columnList.value[valIndex.value[0]] : columnList.value[0]
 }
 const getVal = () => {
-  return getCol()[props.map.value]
+  if (getCol()) {
+    return getCol()[props.map.value]
+  }
+  return ""
 }
 
 const changeValue = () => {
@@ -111,6 +114,10 @@ function hidePopup(type?: "confirm" | "cancel" | "maskClick") {
 }
 
 function bindShowPopup() {
+  uni.hideKeyboard()
+  if (props.disabled) {
+    return
+  }
   showPopup()
 }
 function bindClear() {
@@ -172,16 +179,17 @@ function init() {
 onLoad(init)
 </script>
 <template>
-  <view class="is-link">
-    <uni-easyinput
-      type="text"
-      v-model="valText"
-      @focus="bindShowPopup"
-      @clear="bindClear"
-      :inputBorder="false"
-      :placeholder="_placeholder"
-      :disabled="disabled"
-    />
+  <view class="vb-picker" @click="bindShowPopup" :class="{ 'is-disabled': disabled }">
+    <view class="vb-picker__content">
+      <view class="vb-picker__text" v-if="valText">{{ valText }}</view>
+      <view class="vb-picker__placeholder" v-else-if="placeholder">{{ placeholder }}</view>
+      <i
+        v-if="valText && !disabled"
+        class="vb-picker__icon-clera"
+        :style="{ color: show ? 'var(--vb-color)' : '#c0c4cc' }"
+        @click.stop="bindClear"
+      ></i>
+    </view>
   </view>
   <view ref="popupRef" class="vb-popup" v-if="show">
     <view class="vb-popup-content">
@@ -207,3 +215,5 @@ onLoad(init)
     <view class="vb-popup__mask" @click="bindMaskClick"></view>
   </view>
 </template>
+
+<style></style>

UI/XYH.APP/src/static/scss/vb-component/_popup.scss

@@ -1,3 +1,49 @@
+.vb-picker {
+  &.is-disabled {
+    background-color: #f7f6f6;
+    color: #d5d5d5;
+    .vb-picker__content {
+      --arrow-color: #d5d5d5;
+    }
+  }
+  &__content {
+    --arrow-color: var(--vb-color);
+    display: flex;
+    align-items: center;
+    padding-left: 10px;
+    flex: 1;
+    height: 35px;
+    &::before {
+      position: absolute;
+      top: 50%;
+      right: 10px;
+      transform: translateY(-50%) rotate(-135deg);
+      content: "";
+      width: 7px;
+      height: 7px;
+      border-left: 1px solid var(--arrow-color);
+      border-bottom: 1px solid var(--arrow-color);
+    }
+  }
+
+  &__placeholder {
+    color: #999999;
+  }
+  &__icon-clera {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 2;
+    font-family: uniicons;
+    text-decoration: none;
+    text-align: center;
+    font-size: 24px;
+    &:before {
+      content: "\e66d";
+    }
+  }
+}
 .vb-popup {
   &-content {
     padding: 10px;