2023前端进阶：告别面包屑！手把手教你二次封装el-tag搭建HistoryList

前端

2023-04-14 11:21:21

页面标志的新篇章：二次封装el-tag打造个性化HistoryList

一、HistoryList：面包屑的演变

随着前端技术的不断发展，面包屑作为页面标志的方式已逐渐落伍。取而代之的是HistoryList，一种更灵活、更具可定制性的页面标志。它可以清晰地展示用户当前访问的页面路径，同时提供交互功能。

二、二次封装el-tag：强强联合

二次封装是前端开发中常见的手法，通过扩展或修改现有组件的功能来满足特定需求。在这里，我们将使用Element UI的el-tag组件进行二次封装，打造出功能强大的HistoryList。

三、实战案例：打造项目专属HistoryList

1. 安装依赖

首先，安装Element UI和vue3：

npm install element-ui vue3

2. 创建项目

创建新的vue3项目：

vue create history-list

3. 引入组件

在项目中引入Element UI和二次封装的el-tag组件：

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import HistoryList from './components/HistoryList.vue'

Vue.use(ElementUI)
Vue.component('HistoryList', HistoryList)

4. 页面使用

在页面模板文件中使用二次封装的el-tag组件：

<template>
  <div>
    <HistoryList :data="historyList"></HistoryList>
  </div>
</template>

在页面脚本文件中定义historyList数据：

historyList: [
  { path: '/', name: '首页' },
  { path: '/about', name: '关于我们' },
  { path: '/contact', name: '联系我们' },
]

5. 组件自定义

在HistoryList.vue文件中自定义el-tag组件：

<template>
  <el-tag v-for="item in data" :key="item.path" :type="item.type" @click="handleClick(item)">{{ item.name }}</el-tag>
</template>

<script>
export default {
  props: {
    data: {
      type: Array,
      default: () => []
    }
  },
  methods: {
    handleClick(item) {
      this.$emit('click', item)
    }
  }
}
</script>