关于html5:vue仿写teambition的筛选功能使用饿了么UI

3次阅读

共计 9941 个字符，预计需要花费 25 分钟才能阅读完成。

问题形容

teambition 软件是企业办公协同软件，置信局部敌人的公司应该用过这款软件。外面的筛选性能挺有意思，本篇文章，就是仿写其性能。咱们先看一下最终做进去的效果图

大抵的性能成果有如下

  • 需要一：罕用筛选条件放在下面间接看到，不罕用筛选条件放在增加筛选条件外面
  • 需要二：筛选的形式有输入框筛选、下拉框筛选、工夫选择器筛选等
  • 需要三：如果感觉罕用筛选条件比拟多的话，能够鼠标移入点击删除，使之进入不罕用的筛选条件里
  • 需要四：也能够从不罕用的筛选条件外面点击对应筛选条件使之“蹦到”罕用筛选条件里
  • 需要五：点击重置使之复原到初试的筛选条件
  • 需要六：用户若是没输出内容点击确认按钮，就提醒用户要输出筛选条件

思路剖析

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

对应两个数组如下：

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 代码如下：

                <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>

残缺代码在最初，大家先顺着思路看哦

  • 对于需要三需要四，可形容为，删除下面的掉到上面。点击上面的蹦到下面。所以对应操作就是把下面数组某一项追加到上面数组，而后把下面数组的这一项删掉；把上面数组的某一项追加到下面数组，而后把这一行删掉。（留神还有一个索引）对应代码如下：
/* 点击某一项的删除小图标，把这一项增加到 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);
        }
      });
    },
  • 对于需要五需要六就简略了，对应代码如下，残缺代码正文中曾经写好了

残缺代码 

<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>

总结

这外面须要留神的就是鼠标移入移出显示对应的删除小图标。思路大抵就这样，敲代码不易，咱们共同努力。

正文完
html5
发表至： html5
2021-02-27
 0
关于html5:用大白话理解-flexiblejs-10-移动端可伸缩适配方案
关于html5:SAP-ABAP-OData-服务的分页加载数据集的实现Paging试读版
关于vue.js:vue中动态绑定类名vbindclass的几种常见的用法以导航菜单点击高亮为例讲解
关于html5:什么是游戏PostgreSQL-分布式架构

站内搜索

-「」