一、简介

ElLinkPlus 是一个增强型链接组件，它继承自 ElLink，集成了路由智能识别、样式扩展、链接状态验证及下载属性增强等功能，能够满足更复杂的链接使用场景。

二、核心功能

1. 链接处理

• 链接类型判断：依据 href 和 to 属性判断链接为外部链接或内部路由链接，动态选择使用 a 标签、router-link 或 el-link 组件。
• 路由模式支持：支持 hash、history 和 auto 三种路由模式，根据配置和当前路由路径自动确定。

2. 样式扩展

• 自适应宽度：通过 adaptiveWidth 属性，使链接宽度根据内容自动调整，最大宽度为 100%。
• 文本省略：设置 ellipsis 属性，当文本超出容器时显示省略号。
• 悬停效果：启用 hoverEffect 属性，链接悬停时显示下划线并改变颜色。

3. 徽标显示

• 支持以数字或对象形式配置徽标，根据 badge 属性决定是否显示徽标，并处理徽标数值和类型。

4. 路由预加载

• 当 preloadOnHover 为 true 时，鼠标悬停链接触发目标路由资源的预加载。

5. 链接验证

• 在组件创建时，对外部下载链接和路由链接进行有效性验证，无效链接会给出提示。

6. 点击事件处理

• 点击链接时，先验证链接有效性，无效链接阻止跳转并给出提示。
• 支持 before-click 和 after-click 生命周期事件，可通过 before-click 事件返回 false 阻止后续操作。
• 外部链接根据是否为下载链接进行处理，内部路由链接使用 $router.push 跳转。

三、完整使用示例

<template>
  <div style="display: flex;justify-content: space-evenly;flex-wrap: wrap">
    <!-- 示例 1: 内部路由链接 -->
    <ElLinkPlus to="/user/profile">内部路由链接</ElLinkPlus>

    <!-- 示例 2: 带查询参数的内部路由链接 -->
    <ElLinkPlus :to="{ path: '/home', query: { id: 1 } }">带查询参数的内部路由链接</ElLinkPlus>

    <!-- 示例 3: 外部链接 -->
    <ElLinkPlus href="https://example.com"> 外部链接</ElLinkPlus>

    <!-- 示例 4: 指定 hash 路由模式的内部路由链接 -->
    <ElLinkPlus to="/about" routerMode="history">指定 history 路由模式的内部路由链接</ElLinkPlus>

    <!-- 内部路由链接，带前置图标 -->
    <ElLinkPlus to="/dashboard" preIcon="el-icon-edit">
      文字前图标
    </ElLinkPlus>
    <!-- 外部链接，带后置图标 -->
    <ElLinkPlus href="https://example.com" postIcon="el-icon-share">
      文字后图标
    </ElLinkPlus>
    <!-- 自定义样式 -->
    <el-link-plus
        href="https://example.com"
        :hover-effect="true"
        :custom-class="['custom-link', { 'bold-text': true }]"
        :custom-style="{ fontSize: '18px', padding: '8px 12px' }"
        post-icon="el-icon-arrow-right"
    >
      自定义样式
    </el-link-plus>
    <!-- 标记为下载的外部链接 -->
    <ElLinkPlus
        href="https://example.com/somefile.pdf"
        isExternalDownloadLink
        downloadFilename="renamed_file.pdf"
    >
      标记为下载的外部链接
    </ElLinkPlus>
    <el-link-plus
        :to="''"
        @before-click="onBeforeClick"
        @after-click="onAfterClick"
        @click="onClick"
    >
      监听 before-click 和 after-click 事件
    </el-link-plus>
    <!-- 启用预加载功能 -->
    <ElLinkPlus to="/about" preloadOnHover>启用预加载功能</ElLinkPlus>
    <el-link-plus
        to="/notifications"
        :badge="3"
        pre-icon="el-icon-bell"
    >
      通知中心
    </el-link-plus>

    <el-link-plus
        href="/messages"
        :badge="{ value: 150, max: 99 }"
        post-icon="el-icon-message"
    >
      未读消息
    </el-link-plus>
    <!-- 侧边栏场景 -->
    <el-link-plus
        to="/notifications"
        :adaptive-width="true"
        :ellipsis="true"
        pre-icon="el-icon-message"
        class="sidebar-link"
    >
      未读消息通知（共15条未读）
    </el-link-plus>

    <!-- 紧凑导航场景 -->
    <el-link-plus
        href="#"
        ellipsis
        style="width: 120px"
    >
      这是一个超长的导航链接文本内容
    </el-link-plus>
  </div>
</template>

<script>
  /**
   * 演示 ElLinkPlus 组件各种用法的示例组件
   * @module components/ElLinkPlusExample
   */
  import ElLinkPlus from './elLinkPlus.vue';  // 请根据实际路径调整

  export default {
    name: 'ElLinkPlusExample',
    components: {
      ElLinkPlus
    },
    data() {
      return {
        // 示例数据可根据需要添加
      };
    },
    methods: {
      // 示例方法可根据需要添加
      onBeforeClick(e) {
        // 这里可以进行埋点统计或二次确认操作
        const confirmResult = confirm('确定要跳转吗？')
        return confirmResult
      },
      onClick(e) {
        // 这里可以进行埋点统计等操作
        console.log(' 链接已点击')
      },
      onAfterClick(e) {
        // 这里可以进行埋点统计等操作
        console.log(' 链接已点击完毕')
      }
    }
  };
</script>

<style scoped>
  /* 可以根据需要添加样式 */
  /* 自定义样式 */
  .custom-link {
    border-radius: 4px;
    transition: background-color 0.3s ease;
  }

  .brand-link:hover {
    transform: translateY(-1px);
  }

  .bold-text {
    font-weight: 700;
  }
</style>

四、props 属性说明及使用示例

4.1 adaptiveWidth

• 类型：Boolean
• 说明：启用自适应宽度模式，根据内容自动调整链接宽度。
• 默认值：false
• 可选值：true, false
• 使用示例：

<el-link-plus :adaptive-width="true">自适应宽度链接</el-link-plus>

4.2 ellipsis

• 类型：Boolean
• 说明：超出容器时显示省略号。
• 默认值：false
• 可选值：true, false
• 使用示例：

<el-link-plus :ellipsis="true">这是一个很长的链接，超出容器会显示省略号</el-link-plus>

4.3 badge

• 类型：number | Object
• 说明：徽标配置，可传入数字或对象。对象包含 value（显示的数字值）、max（最大值，超过显示 {max}+）、type（徽标类型）。
• 默认值：null
• 使用示例：

<!-- 数字形式 -->
<el-link-plus :badge="5">带徽标的链接</el-link-plus>
<!-- 对象形式 -->
<el-link-plus :badge="{ value: 10, max: 9, type: 'warning' }">带徽标的链接</el-link-plus>

4.4 preloadOnHover

• 类型：Boolean
• 说明：启用路由预加载功能，是否在鼠标悬停时预加载目标路由资源。
• 默认值：false
• 可选值：true, false
• 使用示例：

<el-link-plus :preloadOnHover="true" to="/home">悬停预加载路由链接</el-link-plus>

4.5 to

• 类型：String | Object
• 说明：路由链接目标，可传入字符串或路由对象。
• 默认值：null
• 使用示例：

<el-link-plus to="/home">路由链接</el-link-plus>

4.6 href

• 类型：String
• 说明：外部链接地址。
• 默认值：null
• 使用示例：

<el-link-plus href="https://www.example.com">外部链接</el-link-plus>

4.7 routerMode

• 类型：String
• 说明：路由模式，可选值为 hash、history、auto。
• 默认值：'auto'
• 可选值：'hash', 'history', 'auto'
• 使用示例：

<el-link-plus :routerMode="'hash'" to="/home">Hash 模式路由链接</el-link-plus>

4.8 preIcon

• 类型：String | Object
• 说明：前置图标，可传入图标的类名或图标对象。
• 默认值：null
• 使用示例：

<el-link-plus preIcon="el-icon-star">带前置图标的链接</el-link-plus>

4.9 postIcon

• 类型：String | Object
• 说明：后置图标，可传入图标的类名或图标对象。
• 默认值：null
• 使用示例：

<el-link-plus postIcon="el-icon-arrow-right">带后置图标的链接</el-link-plus>

4.10 hoverEffect

• 类型：Boolean
• 说明：是否启用悬停效果。
• 默认值：false
• 可选值：true, false
• 使用示例：

<el-link-plus :hoverEffect="true">带悬停效果的链接</el-link-plus>

4.11 customClass

• 类型：String | Array | Object
• 说明：自定义类名。
• 默认值：null
• 使用示例：

<el-link-plus :customClass="'custom-link-class'">自定义类名链接</el-link-plus>

4.12 customStyle

• 类型：String | Array | Object
• 说明：自定义样式。
• 默认值：null
• 使用示例：

<el-link-plus :customStyle="{ color: 'blue' }">自定义样式链接</el-link-plus>

4.13 downloadFilename

• 类型：String
• 说明：下载文件名，用于外部下载链接。
• 默认值：null
• 使用示例：

<el-link-plus href="https://example.com/file.pdf" downloadFilename="example.pdf">下载链接</el-link-plus>

4.14 isExternalDownloadLink

• 类型：Boolean
• 说明：是否为外部下载链接。
• 默认值：false
• 可选值：true, false
• 使用示例：

<el-link-plus href="https://example.com/file.pdf" :isExternalDownloadLink="true" downloadFilename="example.pdf">外部下载链接</el-link-plus>

4.15 props 属性表格

属性名	类型	属性说明	属性默认值	属性可选值	属性示例（属性的值）
adaptiveWidth	Boolean	启用自适应宽度模式（根据内容自动调整）	false	true、false	true
ellipsis	Boolean	超出容器时显示省略号	false	true、false	true
badge	number、Object	徽标配置，数字形式直接显示数值，对象形式可配置 value、max、type 等属性	null	-	5 "{ "value": 10, "max": 9, "type": "warning" } "
preloadOnHover	Boolean	启用路由预加载功能，是否在 hover 时预加载目标路由资源	false	true、false	true
to	String、Object	路由链接目标，可传入字符串路径或路由对象	null	-	"/home"、
href	String	外部链接地址	null	-	"https://www.example.com"
routerMode	String	路由模式，用于指定路由跳转方式	'auto'	'hash'、'history'、'auto'	"hash"
preIcon	String、Object	前置图标，可传入图标的类名或图标对象	null	-	"el-icon-star"
postIcon	String、Object	后置图标，可传入图标的类名或图标对象	null	-	"el-icon-arrow-right"
hoverEffect	Boolean	是否启用悬停效果	false	true、false	true
customClass	String、Array、Object	自定义类名，可传入字符串类名、类名数组或类名对象	null	-	"custom-link-class"、["class1", "class2"]、
customStyle	String、Array、Object	自定义样式，可传入字符串样式、样式数组或样式对象	null	-	"color: red"、"[{ "color": "red" }, { "fontSize": "16px" }]"、"{ "color": "red", "fontSize": "16px" }"
downloadFilename	String	下载文件名，用于外部下载链接指定下载时的文件名	null	-	"example.pdf"
isExternalDownloadLink	Boolean	是否为外部下载链接	false	true、false	true

五、emit 方法说明及使用示例

5.1 before-click

• 方法说明：点击链接前触发的事件，可通过返回 false 阻止后续操作。
• 方法参数：Event 对象，包含点击事件的相关信息。
• 参数示例：

<el-link-plus @before-click="handleBeforeClick">链接</el-link-plus>

methods: {
  handleBeforeClick(event) {
    console.log('Before click event:', event);
    // 若要阻止后续操作，返回 false
    return false;
  }
}

5.2 after-click

• 方法说明：点击链接后延迟触发的事件。
• 方法参数：Event 对象，包含点击事件的相关信息。
• 参数示例：

<el-link-plus @after-click="handleAfterClick">链接</el-link-plus>

methods: {
  handleAfterClick(event){
    console.log('After click event:', event);
  }
}

5.3 方法属性表格

方法名	方法说明	方法参数	参数示例
before-click	点击链接前触发的事件，可通过返回 false 阻止后续操作	Event 对象	{ target: HTMLElement, type: 'click', ... }
after-click	点击链接后延迟触发的事件	Event 对象	{ target: HTMLElement, type: 'click', ... }

六、最终效果

使用 ElLinkPlus 组件可以实现一个功能丰富的链接，支持自适应宽度、省略号显示、徽标展示、路由预加载、链接验证等功能，同时可以自定义样式和添加点击事件。

七、常见问题及解决办法

7.1 链接无效提示

• 问题描述：点击链接时弹出“链接无效，请检查！”提示。
• 解决办法：检查 href 或 to 属性的值是否正确，确保外部下载链接可访问，路由配置正确。

7.2 路由预加载失败

• 问题描述：鼠标悬停时控制台提示“路由预加载失败”。
• 解决办法：检查路由配置是否正确，确保路由组件使用了 () => import() 语法进行懒加载。

7.3 徽标不显示

• 问题描述：设置了 badge 属性，但徽标未显示。
• 解决办法：检查 badge 属性的值是否为 null 或 undefined，确保徽标配置正确。