正文

vue 使用饿了么UI仿写teambition的筛选功能

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0720

这篇文章主要介绍了vue 如何使用饿了么UI仿写teambition的筛选功能，帮助大家更好的理解和学习使用vue框架

问题描述

teambition软件是企业办公协同软件，相信部分朋友的公司应该用过这款软件。里面的筛选功能挺有意思，本篇文章，就是仿写其功能。我们先看一下最终做出来的效果图

vue 使用饿了么UI仿写teambition的筛选功能

大致的功能效果有如下

  • 需求一：常用筛选条件放在上面直接看到，不常用筛选条件放在添加筛选条件里面
  • 需求二：筛选的方式有输入框筛选、下拉框筛选、时间选择器筛选等
  • 需求三：如果觉得常用筛选条件比较多的话，可以鼠标移入点击删除，使之进入不常用的筛选条件里
  • 需求四：也可以从不常用的筛选条件里面点击对应筛选条件使之“蹦到”常用筛选条件里
  • 需求五：点击重置使之恢复到初试的筛选条件
  • 需求六：用户若是没输入内容点击确认按钮，就提示用户要输入筛选条件

思路分析

对于需求一和需求二，我们首先要搞两个全屏幕弹框，然后在data中定义两个数组，一个是放常用条件的数组，另外一个是放不常用条件的数组，常用条件v-for到第一个弹框里面，不常用条件v-for到第二个弹框里面。数组里面的每一项都要配置好对应内容，比如要有筛选字段名字，比如姓名、年龄什么的。有了筛选筛选字段名字以后，还有有一个类型type，在html中我们要写三个类型的组件、比如input输入框组件，select组件，时间选择器组件。使用根据type类型通过v-show显示对应字段，比如input的type为1，select的type为2，时间选择器的type为3。是哪个type，就显示哪个组件。

对应两个数组如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
topData: [ // 配置常用的筛选项
    {
     wordTitle: "姓名",
     type: 1, // 1 为input 2为select 3为DatePicker
     content: "", // content为输入框绑定的输入数据
     options: [], // options为所有的下拉框内容,可以发请求拿到存进来，这里是模拟
     optionArr: [], // optionArr为选中的下拉框内容
     timeArr: [], // timeArr为日期选择区间
    },
    {
     wordTitle: "年龄",
     type: 1,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],
    },
    {
     wordTitle: "授课班级",
     type: 2,
     content: "",
     options: [ // 发请求获取下拉框选项
      {
       id: 1,
       value: "一班",
      },
      {
       id: 2,
       value: "二班",
      },
      {
       id: 3,
       value: "三班",
      },
     ],
     optionArr: [],
     timeArr: [],
    },
    {
     wordTitle: "入职时间",
     type: 3,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],
    },
   ],
   bottomData: [ // 配置不常用的筛选项
    {
     wordTitle: "工号",
     type: 1,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],
    },
    {
     wordTitle: "性别",
     type: 2,
     content: "",
     options: [
      {
       id: 1,
       value: "男",
      },
      {
       id: 2,
       value: "女",
      },
     ],
     optionArr: [],
     timeArr: [],
    },
   ],

对应html代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<div class="rightright">
 <el-input
  v-model.trim="item.content"
  clearable
  v-show="item.type == 1"
  placeholder="请输入"
  size="small"
  :popper-append-to-body="false"
 ></el-input>
 <el-select
  v-model="item.optionArr"
  v-show="item.type == 2"
  multiple
  placeholder="请选择"
 >
  <el-option
   v-for="whatItem in item.options"
   :key="whatItem.id"
   :label="whatItem.value"
   :value="whatItem.id"
   size="small"
  >
  </el-option>
 </el-select>
 <el-date-picker
  v-model="item.timeArr"
  v-show="item.type == 3"
  type="daterange"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
 >
 </el-date-picker>
</div>

完整代码在最后，大家先顺着思路看哦

对于需求三需求四，可描述为，删除上面的掉到下面。点击下面的蹦到上面。所以对应操作就是把上面数组某一项追加到下面数组，然后把上面数组的这一项删掉；把下面数组的某一项追加到上面数组，然后把这一行删掉。（注意还有一个索引）对应代码如下：

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 点击某一项的删除小图标，把这一项添加到bottomData数组中
    然后把这一项从topData数组中删除掉(根据索引判别是哪一项)
    最后删除一个就把索引置为初始索引 -1  */
  clickIcon(i) {
   this.bottomData.push(this.topData[i]);
   this.topData.splice(i, 1);
   this.whichIndex = -1;
  },
  // 点击底部的项的时候，通过事件对象，看看点击的是底部的哪一项
  // 然后把对应的那一项追加到topData中用于展示，同时把bottom数组
  // 中的哪一项进行删除
  clickBottomItem(event) {
   this.bottomData.forEach((item, index) => {
    if (item.wordTitle == event.target.innerText) {
     this.topData.push(item);
     this.bottomData.splice(index, 1);
    }
   });
  },

对于需求五需求六就简单了，对应代码如下，完整代码注释中已经写好了

完整代码

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
<template>
 <div id="app">
  <div class="filterBtn">
   <el-button type="primary" size="small" @click="filterMaskOne = true">
    数据筛选<i class="el-icon-s-operation el-icon--right"></i>
   </el-button>
   <transition name="fade">
    <div
     class="filterMaskOne"
     v-show="filterMaskOne"
     @click="filterMaskOne = false"
    >
     <div class="filterMaskOneContent" @click.stop>
      <div class="filterHeader">
       <span>数据筛选</span>
      </div>
      <div class="filterBody">
       <div class="outPrompt" v-show="topData.length == 0">
        暂无筛选条件，请添加筛选条件...
       </div>
       <div
        class="filterBodyCondition"
        v-for="(item, index) in topData"
        :key="index"
       >
        <div
         class="leftleft"
         @mouseenter="mouseEnterItem(index)"
         @mouseleave="mouseLeaveItem(index)"
        >
         <span
          >{{ item.wordTitle }}：
          <i
           class="el-icon-error"
           v-show="whichIndex == index"
           @click="clickIcon(index)"
          ></i>
         </span>
        </div>
        <div class="rightright">
         <el-input
          v-model.trim="item.content"
          clearable
          v-show="item.type == 1"
          placeholder="请输入"
          size="small"
          :popper-append-to-body="false"
         ></el-input>
         <el-select
          v-model="item.optionArr"
          v-show="item.type == 2"
          multiple
          placeholder="请选择"
         >
          <el-option
           v-for="whatItem in item.options"
           :key="whatItem.id"
           :label="whatItem.value"
           :value="whatItem.id"
           size="small"
          >
          </el-option>
         </el-select>
         <el-date-picker
          v-model="item.timeArr"
          v-show="item.type == 3"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
         >
         </el-date-picker>
        </div>
       </div>
      </div>
      <div class="filterFooter">
       <div class="filterBtn">
        <el-button
         type="text"
         icon="el-icon-circle-plus-outline"
         @click="filterMaskTwo = true"
         >添加筛选条件</el-button
        >
        <transition name="fade">
         <div
          class="filterMaskTwo"
          v-show="filterMaskTwo"
          @click="filterMaskTwo = false"
         >
          <div class="filterMaskContentTwo" @click.stop>
           <div class="innerPrompt" v-show="bottomData.length == 0">
            暂无内容...
           </div>
           <div
            class="contentTwoItem"
            @click="clickBottomItem"
            v-for="(item, index) in bottomData"
            :key="index"
           >
            <div class="mingzi">
             {{ item.wordTitle }}
            </div>
           </div>
          </div>
         </div>
        </transition>
       </div>
       <div class="resetAndConfirmBtns">
        <el-button size="small" @click="resetFilter">重置</el-button>
        <el-button type="primary" size="small" @click="confirmFilter"
         >确认</el-button
        >
       </div>
      </div>
     </div>
    </div>
   </transition>
  </div>
 </div>
</template>
 
<script>
export default {
 name: "app",
 data() {
  return {
   filterMaskOne: false, // 分别用于控制两个弹框的显示与隐藏
   filterMaskTwo: false,
   whichIndex: -1, // 用于记录点击的索引
   apiFilterArr:[], //存储用户填写的筛选内容
   topData: [ // 配置常用的筛选项
    {
     wordTitle: "姓名",
     type: 1, // 1 为input 2为select 3为DatePicker
     content: "", // content为输入框绑定的输入数据
     options: [], // options为所有的下拉框内容
     optionArr: [], // optionArr为选中的下拉框内容
     timeArr: [], // timeArr为日期选择区间
    },
    {
     wordTitle: "年龄",
     type: 1,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],
    },
    {
     wordTitle: "授课班级",
     type: 2,
     content: "",
     options: [ // 发请求获取下拉框选项
      {
       id: 1,
       value: "一班",
      },
      {
       id: 2,
       value: "二班",
      },
      {
       id: 3,
       value: "三班",
      },
     ],
     optionArr: [],
     timeArr: [],
    },
    {
     wordTitle: "入职时间",
     type: 3,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],
    },
   ],
   bottomData: [ // 配置不常用的筛选项
    {
     wordTitle: "工号",
     type: 1,
     content: "",
     options: [],
     optionArr: [],
     timeArr: [],
    },
    {
     wordTitle: "性别",
     type: 2,
     content: "",
     options: [
      {
       id: 1,
       value: "男",
      },
      {
       id: 2,
       value: "女",
      },
     ],
     optionArr: [],
     timeArr: [],
    },
   ],
  };
 },
 mounted() {
  // 在初始化加载的时候，我们就把我们配置的常用和不常用的筛选项保存一份
  // 当用户点击重置按钮的时候，再取出来使其恢复到最初的筛选条件状态
  sessionStorage.setItem("topData",JSON.stringify(this.topData))
  sessionStorage.setItem("bottomData",JSON.stringify(this.bottomData))
 },
 methods: {
  //鼠标移入显示删除小图标
  mouseEnterItem(index) {
   this.whichIndex = index;
  },
  // 鼠标离开将索引回复到默认-1
  mouseLeaveItem() {
   this.whichIndex = -1;
  },
  /* 点击某一项的删除小图标，把这一项添加到bottomData数组中
    然后把这一项从topData数组中删除掉(根据索引判别是哪一项)
    最后删除一个就把索引置为初始索引 -1  */
  clickIcon(i) {
   this.bottomData.push(this.topData[i]);
   this.topData.splice(i, 1);
   this.whichIndex = -1;
  },
  // 点击底部的项的时候，通过事件对象，看看点击的是底部的哪一项
  // 然后把对应的那一项追加到topData中用于展示，同时把bottom数组
  // 中的哪一项进行删除
  clickBottomItem(event) {
   this.bottomData.forEach((item, index) => {
    if (item.wordTitle == event.target.innerText) {
     this.topData.push(item);
     this.bottomData.splice(index, 1);
    }
   });
  },
  // 点击确认筛选
  async confirmFilter() {
   // 如果所有的输入框的content内容为空，且选中的下拉框数组为空，且时间选择器选中的数组为空
   // 就说明用户没有输入内容，那么我们就提示用户要输入内容以后再进行筛选
   let isEmpty = this.topData.every((item)=>{
    return (item.content == "") && (item.optionArr.length == 0) && (item.timeArr.length == 0)
   })
   if(isEmpty == true){
     this.$alert('请输入内容以后再进行筛选', '筛选提示', {
     confirmButtonText: '确定'
    });
   }else{
    // 收集参数发筛选请求，这里要分类型，把不为空的既有用户输入内容的
    // 存到存到数据筛选的数组中去，然后发请求给后端。
    this.topData.forEach((item)=>{
     if(item.type == 1){
      if(item.content != ""){
       let filterItem = {
        field:item.wordTitle,
        value:item.content
       }
       this.apiFilterArr.push(filterItem)
      }
     }else if(item.type == 2){
      if(item.optionArr.length > 0){
       let filterItem = {
        field:item.wordTitle,
        value:item.optionArr
       }
       this.apiFilterArr.push(filterItem)
      }
     }else if(item.type == 3){
      if(item.timeArr.length > 0){
       let filterItem = {
        field:item.wordTitle,
        value:item.timeArr
       }
       this.apiFilterArr.push(filterItem)
      }
     }
    })
    // 把筛选的内容放到一个数组里面，传递给后端（当然不一定把参数放到数组里面）
    // 具体以怎样的形式传递给后端，可以具体商量
    console.log("带着筛选内容发请求",this.apiFilterArr);
   }
  },
  // 重置时，再把最初的配置筛选项取出来赋给对应的两个数组
  resetFilter() {
   this.topData = JSON.parse(sessionStorage.getItem("topData"))
   this.bottomData = JSON.parse(sessionStorage.getItem("bottomData"))
  },
 },
};
</script>
<style lang="less" scoped>
.filterBtn {
 width: 114px;
 height: 40px;
 .filterMaskOne {
  top: 0;
  left: 0;
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.3);
  .filterMaskOneContent {
   position: absolute;
   top: 152px;
   right: 38px;
   width: 344px;
   height: 371px;
   background-color: #fff;
   box-shadow: 0px 0px 4px 3px rgba(194, 194, 194, 0.25);
   border-radius: 4px;
   .filterHeader {
    width: 344px;
    height: 48px;
    border-bottom: 1px solid #e9e9e9;
    span {
     display: inline-block;
     font-weight: 600;
     font-size: 16px;
     margin-left: 24px;
     margin-top: 16px;
    }
   }
   .filterBody {
    width: 344px;
    height: 275px;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
    padding: 12px 24px 0 24px;
    .outPrompt {
     color: #666;
    }
    .filterBodyCondition {
     width: 100%;
     min-height: 40px;
     display: flex;
     margin-bottom: 14px;
     .leftleft {
      width: 88px;
      height: 40px;
      display: flex;
      align-items: center;
      margin-right: 20px;
      span {
       position: relative;
       font-size: 14px;
       color: #333;
       i {
        color: #666;
        right: -8px;
        top: -8px;
        position: absolute;
        font-size: 15px;
        cursor: pointer;
       }
       i:hover {
        color: #5f95f7;
       }
      }
     }
     .rightright {
      width: calc(100% - 70px);
      height: 100%;
      /deep/ input::placeholder {
       color: rgba(0, 0, 0, 0.25);
       font-size: 13px;
      }
      /deep/ .el-input__inner {
       height: 40px;
       line-height: 40px;
      }
      /deep/ .el-select {
       .el-input--suffix {
        /deep/ input::placeholder {
         color: rgba(0, 0, 0, 0.25);
         font-size: 13px;
        }
        .el-input__inner {
         border: none;
        }
        .el-input__inner:hover {
         background: rgba(95, 149, 247, 0.05);
        }
       }
      }
      .el-date-editor {
       width: 100%;
       font-size: 12px;
      }
      .el-range-editor.el-input__inner {
       padding-left: 2px;
       padding-right: 0;
      }
      /deep/.el-range-input {
       font-size: 13px !important;
      }
      /deep/ .el-range-separator {
       padding: 0 !important;
       font-size: 12px !important;
       width: 8% !important;
       margin: 0;
      }
      /deep/ .el-range__close-icon {
       width: 16px;
      }
     }
    }
   }
   .filterFooter {
    width: 344px;
    height: 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-sizing: border-box;
    padding-left: 24px;
    padding-right: 12px;
    border-top: 1px solid #e9e9e9;
    .filterBtn {
     .filterMaskTwo {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.3);
      z-index: 1000;
      .filterMaskContentTwo {
       width: 240px;
       height: 320px;
       background: #ffffff;
       box-shadow: 0px 0px 4px 3px rgba(194, 194, 194, 0.25);
       border-radius: 4px;
       position: absolute;
       top: 360px;
       right: 180px;
       overflow-y: auto;
       box-sizing: border-box;
       padding: 12px 0 18px 0;
       overflow-x: hidden;
       .innerPrompt {
        color: #666;
        width: 100%;
        padding-left: 20px;
        margin-top: 12px;
       }
       .contentTwoItem {
        width: 100%;
        height: 36px;
        line-height: 36px;
        font-size: 14px;
        color: #333333;
        cursor: pointer;
        .mingzi {
         width: 100%;
         height: 36px;
         box-sizing: border-box;
         padding-left: 18px;
        }
       }
       .contentTwoItem:hover {
        background: rgba(95, 149, 247, 0.05);
       }
      }
     }
    }
   }
  }
 }
}
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
 transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
 opacity: 0;
}
</style>

总结

这里面需要注意的就是鼠标移入移出显示对应的删除小图标。思路大致就这样，敲代码不易，咱们共同努力。

以上就是vue 使用饿了么UI仿写teambition的筛选功能的详细内容，更多关于vue 仿写teambition的筛选功能的资料请关注米米素材网其它相关文章！

原文链接：https://segmentfault.com/a/1190000039298567