vuejs工程中读取页面文件列表构建tab页面

  vuejs工程中对于一些重复度较高的tab页面中,或者在需求改变情况下,新增或删减tab页面需要一个便利的方法。可通过读取项目工程指定目录的页面文件列表,结合vuejs的组件懒加载属性,即可方便的构建tab页面。

  工程文件分布结构:

  

 

 

  QueryList.vue主页面代码:

  

 1 import QueryHeader from "./components/QueryHeader"
 2 
 3   let fs = require("fs")
 4   let path = require("path")
 5   let platforms = fs.readdirSync(path.join(__dirname, "./platforms"))
 6   var compts = {}
 7   compts["QueryHeader"] = QueryHeader
 8   var platformCompts = {}
 9   platforms.forEach((value, index) => {
10     let platformCompName = value.replace(/\.\w+$/, "")
11     platformCompts[platformCompName] = () => import(`./platforms/${platformCompName}`)
12   })
13   Object.assign(compts, platformCompts)
14 
15   export default {
16     name: "QueryList",
17     components: compts,
18     data() {
19       return {
20         activeName: "",
21         platformsList: []
22       }
23     },
24     mounted() {
25       this.activeName = Object.keys(platformCompts)[0]
26       for (let [key, value] of Object.entries(platformCompts)) {
27         value().then(res => {
28           this.platformsList.push({
29             label: res.default.cnName,
30             name: res.default.name,
31             comp: value
32           })
33         })
34       }
35     }
36   }

 

  path.join(__dirname)获取到当前文件所在目录地址。通过fs.readdirSync方法同步读取到指定目录下的文件数组,遍历数组得到文件名称。利用vuejs组件懒加载特性,构建懒加载components对象,这里直接构建的全页面共用的components对象,所以包含了一个QueryHeader组件。而页面tab遍历所需的是不包含QueryHeader的,所以tab页面存储使用的platformCompts对象,最后通过Object.assign方法合并对象。在生命周期mounted函数内对platformCompts进行遍历,构建tab页面所需的名称,代码和组件自身,res.default实际是vue页面实例对象,即export default {}对象。

  27行是在懒加载调用之后获取到文件的名称等信息的,因为lazyload实际返回的是一个promise对象。所以页面加载出来时候会有一定的延时等待。

  页面代码如下:

  

 1 <template>
 2     <div>
 3         <el-row class="header">
 4             <query-header @query="query"></query-header>
 5         </el-row>
 6         <el-divider class="divider"></el-divider>
 7         <el-row class="list-container">
 8             <el-tabs type="card" v-model="activeName">
 9                 <el-tab-pane v-for="(p,i) in platformsList" :key="i" :name="p.name">
10                     <span slot="label" class="tab-label">
11                         {{p.label}}&nbsp;<i class="el-icon-download" @click="download(p.name)"></i>
12                     </span>
13                     <keep-alive>
14                         <component :is="p.comp"></component>
15                     </keep-alive>
16                 </el-tab-pane>
17             </el-tabs>
18         </el-row>
19     </div>
20 </template>

  这里使用的elementui的tabs组件,遍历tab-pane子组件。内部使用compent动态组件接收懒加载组件对象。

  结果页面:

  

 

 

  总结:整个过程思路清晰,获取到相对于当前文件指定目录的文件列表后,构建当前页面components懒加载对象,遍历懒加载对象,构建页面tabs所需属性,其中页面使用component接收懒加载对象。

  

posted @ 2021-01-12 13:56  BigBang92  阅读(501)  评论(0编辑  收藏  举报