关于前端:VUE移动端树形组件的封装实现

前言

 近期挪动端我的项目中遇到个需要，数据须要树形显示。找了一些插件感觉不太适宜，就看了看相干文章以及视频，想着以学习和积攒的态度，就本人封装了个 tree 的树形展现组件。学习到了组件在它的模板内能够递归地调用本人，间接上代码吧~

子组件代码

<template>
  <div class="experTree">
    <ul v-for="item in data" :key="item.name">
      <li class="experTree_info">
        <div class="experTree_bar" @click="onOpenHandler">
          <img
            v-if="isHaschildren(item)"
            src="@/assets/images/expert-right.png"
            alt=""class="icon":class="on_off ? 'vertical' : 'normal'"
          />
          <div v-if="!isHaschildren(item)" class="icon"></div>
          <span> {{item[label] }} </span>
        </div>
        <div class="experTree_select" @click="onSelectHandler(item)"> 抉择 </div>
      </li>
      <exper-tree
        v-show="on_off"
        v-if="isHaschildren(item)"
        :data="item[children]"
        :defaultProps="defaultProps"
      ></exper-tree>
    </ul>
  </div>
</template>

<script>
export default {
  name: "experTree",
  props: {
    data: {type: [Object, Array],
      required: true
    },
    defaultProps: {
      type: Object,
      default: () => {
        return {
          children: "children",
          label: "label"
        };
      }
    }
  },
  data() {
    return {on_off: false};
  },
  computed: {label() {return this.defaultProps.label;},
    children() {return this.defaultProps.children;},
    isHaschildren() {
      return data => {return data[this.children] && data[this.children].length;
      };
    }
  },
  methods: {onOpenHandler() {this.on_off = !this.on_off;},
    onSelectHandler(item) {this.$emit("onSelectHandler", item);
    }
  }
};
</script>

<style lang="scss" scoped>
.anime_time {transition: all 0.3s;}
.dis_flex {
  display: flex;
  align-items: center;
}
.experTree {
  &_info {
    @extend .dis_flex;
    height: 48px;
    justify-content: space-between;
    .experTree_bar {
      @extend .dis_flex;
      height: 100%;
      flex: 1;
      .icon {
        width: 38px;
        height: 38px;
        &.vertical {transform: rotate(90deg);
          @extend .anime_time;
        }
        &.normal {@extend .anime_time;}
      }
    }
    .experTree_select {
      color: $mainColor;
      padding: 5px;
      box-sizing: border-box;
    }
  }
}
</style>

父组件调用

<template>
   <div class="tree-menu">
     <expert-tree
       :data="list"
       :defaultProps="defaultProps"
       @onSelectHandler="onSelectHandler"
     ></expert-tree>
   </div>
</template>

<script>
import expertTree from "./expert_tree.vue";
let list = [
  {
    name: "Web 秀",
    children: [
      {
        name: "web 前端",
        children: [
          {name: "CSS"},
          {name: "JavaScript"},
          {name: "Vue"},
          {name: "小程序"},
          {name: "Three.js"}
        ]
      },
      {name: "服务器"},
      {name: "工具类"}
    ]
  },
  {
    name: "今日头条",
    children: [
      {name: "图片"},
      {
        name: "新闻",
        children: []}
    ]
  },
  {name: "Angular"}
];
export default {
  name: "selectSector",
  components: {expertTree},
  data() {
    return {list: [...list],
      defaultProps: {
        children: "children",
        label: "name"
      }
    };
  },
  methods: {onSelectHandler(data) {console.log(data, "expert_tree");
    }
  }
};
</script>

<style lang="scss" scoped></style>

结尾

 有写的有余的中央心愿大家多提提意见，目前本人的技术的确不怎么样，心愿跟各位大佬多多沟通交流，共同进步。早日跟上各位前辈的步调~