el-link详解

el-link 是 Element Plus 框架中的一个组件，用于创建可点击的链接。它提供了多种样式和功能选项，如不同的颜色类型、是否显示下划线、是否禁用链接等，使得链接组件更加灵活和易用。

一。属性

el-link 属性详解

1. type:

   • 用途: 设置链接的类型。
   • 可选值: primary、success、warning、danger、info

2. underline:

   • 用途: 是否显示下划线。
   • 默认值: true

3. disabled:

   • 用途: 是否禁用链接。
   • 默认值: false

4. href:

   • 用途: 链接地址。

5. target:

   • 用途: 链接跳转方式。
   • 可选值: _self、_blank、_parent、_top

6. icon:

   • 用途: 图标类名。

二。实例

<template>
  <div>
    <h2>Link 示例</h2>
    
    <!-- 基本用法 -->
    <el-link type="primary">默认链接</el-link>
    <!-- type 属性设置链接的类型 -->

    <!-- 不显示下划线 -->
    <el-link type="primary" :underline="false">不显示下划线</el-link>
    <!-- underline 属性设置是否显示下划线 -->

    <!-- 禁用状态 -->
    <el-link type="primary" disabled>禁用链接</el-link>
    <!-- disabled 属性设置是否禁用链接 -->

    <!-- 链接地址 -->
    <el-link type="primary" href="https://element-plus.org">链接地址</el-link>
    <!-- href 属性设置链接地址 -->

    <!-- 链接跳转方式 -->
    <el-link type="primary" href="https://element-plus.org" target="_blank">新窗口打开</el-link>
    <!-- target 属性设置链接跳转方式 -->

    <!-- 图标 -->
    <el-link type="primary" icon="el-icon-edit">带图标的链接</el-link>
    <!-- icon 属性设置图标类名 -->

    <!-- 不同类型的链接 -->
    <el-link type="success">成功链接</el-link>
    <el-link type="warning">警告链接</el-link>
    <el-link type="danger">危险链接</el-link>
    <el-link type="info">信息链接</el-link>
  </div>
</template>

<script setup>
import { ref } from 'vue'
</script>