《12 接口自动化 接口管理模块开发(一)》中,使用Ant Design Vue提供的ATree开发了类似postman中的树形结构,如下图。本章将手把手教你你如何利用ATree开发出这种树形效果。

首先在Ant Design Vue找到树形组件,在演示代码中找到最符合自己要求的拷贝到前端代码中。这里选择的是「自定义展开/折叠图标」的这种,满足了想要的展开/折叠样式。

「请求方式」样式

基于已有的样式然后进行改造,首先是节点前面的「请求方式」。
在演示代码中已经提供了「自定义节点图标」的方案,

通过查看演示代码可以知道,这里是使用了插槽,将「icon」进行了自定义,因此我们需要自定义插槽的内容,将「请求方法」的样式放入插槽中。

  • 在treeData中给二级节点增加一个「method」字段,用来标识「请求方式」

  • 在<a-tree>标签上新增show icon属性

  • 在<a-tree>标签下新增「icon」插槽的内容,这里主要是判断数据源中的method字段,然后根据不同的method设置不同的颜色
      <template #icon="{ method }">
        <template v-if="method === 'GET'">
          <span class="api-method" style="color: #0bbb52">{{ method }}</span>
        </template>
        <template v-if="method === 'POST'">
          <span class="api-method" style="color: #fcb100">{{ method }}</span>
        </template>
        <template v-if="method === 'PUT'">
          <span class="api-method" style="color: #0978e7">{{ method }}</span>
        </template>
        <template v-if="method === 'PATCH'">
          <span class="api-method" style="color: #07c0e9">{{ method }}</span>
        </template>
        <template v-if="method === 'DELETE'">
          <span class="api-method" style="color: #e71f12">{{ method }}</span>
        </template>
      </template>
  • 重启项目刷新页面后,就可以看到带「请求方式」的树形结构了,然后需要对样式进行调整,调整样式可以先直接在元素上右键,选择「检查」,就可以看到对应的html代码了,先在浏览器上将样式调整到满意之后再补充到项目代码中,这样避免了不断调试的过程。

  • 通过在浏览器中调试,可以看到是.ant-tree .ant-tree-node-content-wrapper .ant-tree-iconEle设置了图标所在位置的宽度(width),因此可以在style区域修改样式。

  • 设置样式时,注意不要使用scoped,如果使用了将是局部样式,对Ant Desgin Vue外部引入的组件样式将无效。下面代码中还设置了字体的大小,Chrome浏览器限制了字体大小最小为12px,小于12px将无效,如果希望字体更小一点,可以换成图片。
<style lang="scss">
.api-sider2 {
  .api-method{
    font-size: 12px;
    padding-right: 10px;
  }
  .ant-tree {
    .ant-tree-node-content-wrapper {
      .ant-tree-iconEle {
        width: 48px;
      }
    }
  }
}
</style>
  • 重启项目刷新页面后,就可以看到是按照预期的样式进行展示了。

「更多操作」样式

完成左侧的「请求方式」后,接下来完成右侧「…」区域,这个按钮主要使用根据不同的节点展示不同的操作,例如:

  • 分类节点 用来展示分类,操作可以是编辑新增分类新增接口删除
  • 接口节点 用来展示接口,操作可以是新增用例删除
  • 用例节点 用来展示用例,暂时不提供操作按钮

在ATree中没有提供自定义节点右侧组件的插槽,但是title本身也是提供了插槽的方案,因此可以将title插槽中填充自定义的样式,左侧显示名称,右侧显示「…」

  • 首先在treeData中给每个节点增加一个「type」字段,用来标识节点类型

  • 在<a-tree>标签下新增「title」插槽的内容,这里主要是展示节点名称,然后判断数据源中的type字段,根据不同的type设置不同操作按钮
<template #title="{ title, type }">
  <div>
    <span>{{ title }}</span>
    <a-popover trigger="hover" v-if="type == 'collection'">
      <template #content>
        <a-button type="link">编辑</a-button>
        <a-button type="link">新增分类</a-button>
        <a-button type="link">新增接口</a-button>
        <a-button type="link" danger>删除</a-button>
      </template>
      <a-icon
        class="iconfont icon-gengduo fr"
        style="color: #6b6b6b; cursor: pointer; padding-right: 10px"
      />
    </a-popover>
    <a-popover trigger="hover" v-if="type == 'api'">
      <template #content>
        <a-button type="link">新增用例</a-button>
        <a-button type="link" danger>删除</a-button>
      </template>
      <a-icon
        class="iconfont icon-gengduo"
        style="color: #6b6b6b; cursor: pointer; padding-right: 10px"
      />
    </a-popover>
  </div>
</template>
  • 重启项目刷新页面,可以看到每个节点名称后都增加了「…」,让鼠标悬停时,会展示对应节点的操作按钮

  • 接下来同样是在在组件上右键,点击【检查】,在浏览器中对样式进行调整。
  1. 首先,icon和title换行了,icon是inline-block,将title也同样要设置为inline-block,即行内块元素 ,这样将不再换行显示

  1. 其次,将「…」固定在右侧,只需要加上float:right样式既可

  1. title的宽度要占满整行,这需要它的外层的组件都是占满整行的。

因此可以不断找外层的组件,将外层的组件width均设置为100%。

<style lang="scss">
.api-sider2 {
  .api-method {
    font-size: 12px;
    padding-right: 10px;
  }
  .ant-tree {
    .ant-tree-treenode {
      width: 100%;

      .ant-tree-node-content-wrapper {
        width: 100%;

        .ant-tree-iconEle {
          width: 48px;
        }
      }
    }
  }
}
</style>

然后重启项目,刷新页面

可以看到「…」确实是展示在最右侧了,但是出现了新的问题,存在「请求方式」的节点,再次变成了两行,这是因为title宽度设置为100%后,没有位置留给「请求方式」了,所以换行了,解决这个问题需要用到计算属性,即当节点类型为接口类型时,title的宽度为100%-「请求方式」宽度。

  1. 将title的宽度改为计算属性,因为要根据节点类型进行设置,因此可以在插槽中根据节点类型,动态设置到元素的style属性。
<template #title="{ title, type }">
  <div
    :style="[
      type == 'collection' ? 'width: 100%' : 'width: calc(100% - 48px);', // 计算属性,即宽度为减去某个固定值后的100%宽度
    ]"
    style="display: inline-block"
  >
    <span>{{ title }}</span>
    <!--省略-->
  </div>
</template>

然后重启项目,刷新页面,可以看到“大功告成”啦,撒花 🎉🎉🎉

Logo

前往低代码交流专区

更多推荐