链接 ​

<template>
  <div class="link-example">
    <el-link href="https://element-plus.org" target="_blank">官方站点</el-link>
    <el-link type="primary">主要链接</el-link>
    <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>

<style scoped>
.link-example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
</style>

<template>
  <div class="link-example">
    <el-link disabled>默认链接</el-link>
    <el-link type="primary" disabled>主要链接</el-link>
    <el-link type="success" disabled>成功状态</el-link>
    <el-link type="warning" disabled>提醒事项</el-link>
    <el-link type="danger" disabled>危险操作</el-link>
    <el-link type="info" disabled>补充说明</el-link>
  </div>
</template>

<style scoped>
.link-example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
</style>

<template>
  <div class="link-example">
    <el-link>默认常显</el-link>
    <el-link underline="always">始终显示</el-link>
    <el-link type="primary" underline="never">仅保留文字色</el-link>
  </div>
</template>

<style scoped>
.link-example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
</style>

<template>
  <div class="link-example">
    <el-link :icon="Edit">编辑资料</el-link>
    <el-link>
      查看详情<el-icon class="el-icon--right"><icon-view /></el-icon>
    </el-link>
  </div>
</template>

<script setup lang="ts">
import Edit from '~icons/ep/edit'
import IconView from '~icons/ep/view'
</script>

<style scoped>
.link-example {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
</style>