vue2 模仿qq

<template>
  <div>
    <el-button @click="qqClickFn">点击qq音乐</el-button>
    <div v-if="drawers">
      <div class="qq-style">
        <el-drawer
          title="QQ音乐--黄钻"
          :visible.sync="drawer"
          :direction="direction"
          append-to-body
          :before-close="handleCloseFn"
          :destroy-on-close="true"
          @mouseleave.prevent="handleCloseFn"
          :close-on-click-modal="false"
        >
          <el-input
            placeholder="请输入关键字进行搜索"
            v-model="keyWord"
            size="small"
            ref="inputRef"
            prefix-icon="el-icon-search"
          >
            <span slot="suffix" class="search-style">
              <img alt="" @click="clearSearchFn" style="cursor: pointer" v-if="keyWord.trim().length > 0" />
            </span>
            <img slot="prefix" alt="" id="search-agency" style="cursor: pointer" />
          </el-input>
          <el-tree
            ref="tree"
            v-if="treeList.length > 0"
            :key="key"
            :data="treeList"
            show-checkbox
            node-key="id"
            :expand-on-click-node="true"
            :default-expanded-keys="treeData"
            icon-class=" "
            :props="defaultProps"
            :filter-node-method="filterNode"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <template>
                <i
                  v-if="data.children.length > 0"
                  :class="{
                    'el-icon-arrow-down': !node.expanded, // 节点收缩时的图标
                    'el-icon-arrow-up': node.expanded && data.children.length !== 0, // 节点展开时的图标
                  }"
                />
                <a
                  v-html="node.label.replace(new RegExp(keyWord, 'g'), `<font style='color:#0046ff'>${keyWord}</font>`)"
                  :class="data.id === 1 ? 'one le' : 'two le'"
                  v-bind:title="node.label"
                  :href="!data.linkUrl ? 'javascript:;' : data.linkUrl"
                  :target="!data.linkUrl ? '' : '_blank'"
                ></a>
              </template>
            </span>
          </el-tree>
        </el-drawer>
      </div>
    </div>
  </div>
</template>
<script>
const falselist = {
  data: [
    {
      Name: '宫',
      Code: '123',
      id: 1,
      children: [
        {
          Name: '宫1',
          Code: '234',
          id: 13,
          children: [
            {
              Name: '宫2',
              Code: '345',
              children: [],
              id: 15,
            },
          ],
        },
        { id: 185, Name: '宫3', Code: '456', children: [] },
        {
          id: 90,
          Name: '宫4',
          Code: '567',
          children: [],
        },
      ],
    },
  ],
}

export default {
  data() {
    return {
      drawers: false,
      drawer: true,
      direction: 'rtl',
      keyWord: '',
      treeList: [],
      key: 0,
      treeData: [1],
      defaultProps: {
        children: 'children',
        label: 'Name',
        value: 'Code',
      },
    }
  },
  watch: {
    keyWord(val) {
      this.$refs.tree.filter(val)
    },
  },
  created() {
    this.getList()
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true
      return data.Name.indexOf(value) !== -1
    },
    qqClickFn() {
      this.drawers = true
    },
    handleCloseFn() {
      this.drawers = false
    },

    // 清除/
    clearSearchFn() {
      this.keyWord = ''
      this.getList()
    },
    getList() {
      this.key++
      this.treeList = falselist.data.map((item, index) => {
        const ret = { ...item }
        if ((index + 1) % 2 === 0) {
          ret.imgUrl = 2
        } else if ((index + 1) % 3 === 0) {
          ret.imgUrl = 3
        } else if ((index + 1) % 4 === 0) {
          ret.imgUrl = 4
        } else if ((index + 1) % 5 === 0) {
          ret.imgUrl = 5
        } else if ((index + 1) % 6 === 0) {
          ret.imgUrl = 6
        } else {
          ret.imgUrl = 1
        }
        return ret
      })
    },
  },
}
</script>
<style lang="scss" scoped>
.img-tree {
  vertical-align: bottom;
  margin-right: 4px;
}
::v-deep .el-input__prefix {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 4px;
}
::v-deep .el-drawer {
  width: 400px !important;
}

.qq-style {
  position: relative;
}
.closeBtn {
  margin-right: 4px;
  width: 16px;
  height: 16px;
  cursor: pointer;
}
::v-deep .el-input {
  position: absolute !important;
  top: 70px;
  left: 24px;
  right: 24px;
  width: 90%;
}
::v-deep .el-input__inner {
  border-radius: 16px;
}
::v-deep .el-checkbox__input {
  display: none;
}
::v-deep .el-input--small .el-input__icon {
  margin-left: 8px;
  width: 16px;
  // height: 16px;
}
::v-deep .el-drawer__header {
  color: #1d2129;
  font-size: 16px;
  font-weight: 500;
  padding: 24px;
  background-color: #22bc1d;
  background-size: 100%;
  height: 124px;
}
::v-deep .el-drawer__header > :first-child {
  transform: translateY(-28px);
}
::v-deep .el-drawer__close-btn {
  transform: translateY(-28px);
}
:deep() .el-tree {
  ::v-deep .el-tree-node__expand-icon {
    //引入的图标（图片）size大小 => 树节点前的预留空间大小
    font-size: 16px;
    &.expanded {
      &:before {
        //展开的节点
        background-size: cover;
        content: '';
        display: block;
        width: 18px;
        height: 18px;
      }
    }
    &:before {
      // 未展开的节点

      background-size: cover;
      content: '';
      display: block;
      width: 18px;
      height: 18px;
    }
  }
}

:deep().el-tree .is-leaf.el-tree-node__expand-icon::before {
  //叶子节点（不显示图标）
  display: block;
  background: none !important;
  content: '';
  width: 18px;
  height: 18px;
}
::v-deep .el-tree .el-icon {
  //原有的箭头 去掉
  display: none !important;
  height: 0;
  width: 0;
}
::v-deep .el-icon-arrow-up {
  position: absolute;
  right: 4px;
  color: #24324c !important;
  pointer-events: none;
}
::v-deep .el-icon-arrow-down {
  position: absolute;
  right: 4px;
  color: #24324c !important;
  pointer-events: none;
}
::v-deep .el-tree-node__content > .el-tree-node__expand-icon {
  position: absolute;
  right: 4px;
  color: #24324c;
}
::v-deep .el-tree__empty-block {
  display: none;
}
.noData {
  margin-top: 15%;
}
::v-deep :focus {
  outline: 0;
}
.one {
  color: #4a4a4a;
  font-size: 16px;
}
.two {
  color: rgba(0, 16, 47, 0.65);
  font-size: 14px;
  margin-left: 24px;
}
.le {
  display: inline-block;
  width: 268px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.search-style {
  display: flex;
  align-items: center;
}
</style>