seimin 1 year ago
parent
commit
ba56f76496
1 changed files with 14 additions and 3 deletions
  1. 14 3
      components/ld-select/ld-select.vue

+ 14 - 3
components/ld-select/ld-select.vue

@@ -1,9 +1,10 @@
1
 <template>
1
 <template>
2
   <view class="main">
2
   <view class="main">
3
     <view class="input" :style="disabled?'background-color:#f5f7fa':''">
3
     <view class="input" :style="disabled?'background-color:#f5f7fa':''">
4
-      <input @click="showModal" v-model="_value" :style="disabled?'color:#c0c4cc':''" :placeholder="placeholder"
4
+      <input v-model="_value" :style="disabled?'color:#c0c4cc':''" :placeholder="placeholder"
5
         disabled />
5
         disabled />
6
       <text v-if="clearable&&!disabled" @click="empty" class="selectIcon iconcross"></text>
6
       <text v-if="clearable&&!disabled" @click="empty" class="selectIcon iconcross"></text>
7
+      <view class="mask" @click="showModal"></view>
7
     </view>
8
     </view>
8
     <view class="select-modal" :class="isShowModal?'show':''" @tap="hideModal">
9
     <view class="select-modal" :class="isShowModal?'show':''" @tap="hideModal">
9
       <view class="select-dialog" @tap.stop="" :style="{backgroundColor:bgColor}">
10
       <view class="select-dialog" @tap.stop="" :style="{backgroundColor:bgColor}">
@@ -11,14 +12,14 @@
11
           <view class="action text-blue" @tap="cancelClick">{{cancelText}}</view>
12
           <view class="action text-blue" @tap="cancelClick">{{cancelText}}</view>
12
           <view class="action text-green" @tap="confirmClick">{{confirmText}}</view>
13
           <view class="action text-green" @tap="confirmClick">{{confirmText}}</view>
13
         </view>
14
         </view>
14
-        <view class="select-content">
15
+        <scroll-view scroll-y class="select-content">
15
           <view class="select-item" v-for="(item,index) in list" :key="index"
16
           <view class="select-item" v-for="(item,index) in list" :key="index"
16
             :style="valueIndexOf(item)?'color:'+selectColor+';background-color:'+selectBgColor+';':'color:'+color+';'"
17
             :style="valueIndexOf(item)?'color:'+selectColor+';background-color:'+selectBgColor+';':'color:'+color+';'"
17
             @click="select(item)">
18
             @click="select(item)">
18
             <view class="title">{{getLabelKeyValue(item)}}</view>
19
             <view class="title">{{getLabelKeyValue(item)}}</view>
19
             <text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
20
             <text class="selectIcon icongou" v-if="valueIndexOf(item)"></text>
20
           </view>
21
           </view>
21
-        </view>
22
+        </scroll-view>
22
       </view>
23
       </view>
23
     </view>
24
     </view>
24
   </view>
25
   </view>
@@ -242,6 +243,16 @@
242
     border-style: solid;
243
     border-style: solid;
243
     border-width: 1rpx;
244
     border-width: 1rpx;
244
     border-color: rgba(0, 0, 0, 0.1);
245
     border-color: rgba(0, 0, 0, 0.1);
246
+    position: relative;
247
+    
248
+    .mask{
249
+      content: '';
250
+      position: absolute;
251
+      top: 0;
252
+      right: 0;
253
+      bottom: 0;
254
+      left: 0;
255
+    }
245
 
256
 
246
     input {
257
     input {
247
       flex: 1;
258
       flex: 1;