element-ui link 组件源码分享

news2024/11/14 10:33:30

link 组件的 api 涉及的内容不是很多,源码部分的内容也相对较简单,下面从以下这三个方面来讲解:

一、组件结构

1.1 组件结构如下图:

二、组件属性

2.1 组件主要有 type、underline、disabled、href、icon 这些属性,接下来我们对其属性进行一一揭秘。

2.1.1 type 属性,string 类型,可选值有 primary / success / warning / danger / info,默认 default

2.1.2 underline 属性,是否下划线,boolean 类型,默认 false,这个是鼠标放上的时候文字是否有下划线,如下图:

2.1.3 disabled 属性,是否禁用状态,boolean 类型,默认 false

2.1.4 href 属性,string 类型,原生 href 属性,无默认值,如下图:

2.1.5 icon 属性,图标类名,string 类型,无默认值,如下图:

代码如下:

<template>
  <el-row>
    <el-col>
      <el-link icon="el-icon-edit">icon在外</el-link>
    </el-col>
    <el-col>
      <el-link
        ><i class="el-icon-delete" style="color:red"></i>icon在内前</el-link
      >
    </el-col>
    <el-col>
      <el-link
        >icon在内后<i class="el-icon-delete" style="color:red"></i
      ></el-link>
    </el-col>
    <el-col>
      <el-link>
        <div slot="icon">
          slot当属性兼容性写法<i class="el-icon-edit" style="color:red"></i>
        </div>
      </el-link>
    </el-col>
  </el-row>
</template>

三、组件方法

3.1.1 组件内保留事件,如下图:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1429819.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

云服务器安全组、防火墙、端口问题,结合telnet解决项目部署无法访问

无论是运维还是后台亲自操刀在云服务器上部署项目&#xff0c;往往会遇到项目部署上去了&#xff0c;也确定项目正常运行&#xff0c;但还是没法访问的问题。 如果没有经验的小伙伴&#xff0c;很容易陷入疑惑的状态&#xff0c;无从下手解决。 其实这涉及到云平台安全组、服…

centos7安装oracle

1 安装虚拟机 设置4G内存&#xff0c;硬盘40G 2 配置网络环境 2.1配置主机名 # vi /etc/hostname 修改为 oracle2.2 配置IP地址 # vi /etc/sysconfig/network-scripts/ifcfg-ens33 修改 BOOTPROTO"static" ONBOOT"yes" IPADDR192.168.109.110 NETMAS…

如何过滤离线logcat日志文件?

1.需求&#xff1a; How did Android Studio Logcat to read the files which have save in logcat? I saved some logs and would like to open them with Android Studio - Logcat interface and be able to see the colours and apply some filters just as if the pho…

【PostgreSQL内核学习(二十五) —— (DBMS存储空间管理)】

DBMS存储空间管理 概述块&#xff08;或页面&#xff09;PageHeaderData 结构体HeapTupleHeaderData 结构 表空间表空间的作用&#xff1a;表空间和数据库关系表空间执行案例 补充 —— 模式&#xff08;Schema&#xff09; 声明&#xff1a;本文的部分内容参考了他人的文章。在…

小华和小为的聚餐地点 - 华为OD统一考试

OD统一考试&#xff08;C卷&#xff09; 分值&#xff1a; 200分 题解&#xff1a; Java / Python / C 题目描述 小华和小为是很要好的朋友&#xff0c;他们约定周末一起吃饭。 通过手机交流&#xff0c;他们在地图上选择了多个聚餐地点(由于自然地形等原因&#xff0c;部分聚…

支付宝直连商户处理支付交易投诉管理,支持多商户

大家好&#xff0c;我是小悟 1、问题背景 玩过支付宝生态的&#xff0c;或许就有这种感受&#xff0c;如果收到投诉单&#xff0c;不会通知到手机端&#xff0c;只会在支付宝商家后台-账号中心-安全中心-消费者投诉-支付交易投诉那里显示。那你能一直盯着电脑看吗&#xff1f;…

多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测

多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测 目录 多维时序 | Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现CNN-RVM卷积神经网络结合相关向量机多变量时间序…

梳理cuda算子编译与python调用的流程_以vllm为例

最近在使用vllm框架,部署大语言模型的时候。发现吞吐量提升比较明显。对里面用到的技术比较感兴趣。后来发现vllm使用了一些新的技术,如kv cache,page attention等。其中很多是用cuda编写加速的。并且对cuda算子如何应用到python服务中比较感兴趣,现在就自己的了解,用文章…

如何进行嵌入式系统的软件性能监测和优化

嵌入式系统的软件性能监测和优化是确保系统能够高效运行和性能稳定的关键步骤。嵌入式系统通常包含有限的计算资源和受限的能源消耗&#xff0c;因此对其进行有效的性能监测和优化是至关重要的。本文将介绍嵌入式系统软件性能监测和优化的基本概念、常见方法和技术&#xff0c;…

SQL报错注入

SQL注入报错注入 报错注入原理:报错注入是通过特殊函数错误使用并使其输出错误结果来获取信息的在遇到有报错回显的时候&#xff0c;但是没有数据回显的情况下可以利用报错注入的函数: 1.floor():向下取整 2.extractvalue(): 对XML文档进行查询的函数&#xff0c;当参数的格式…

代码随想录算法训练营第42天 | 01背包问题,你该了解这些! 01背包问题,你该了解这些! 滚动数组 416. 分割等和子集

目录 01背包问题&#xff0c;你该了解这些&#xff01; 01 背包 二维dp数组01背包 &#x1f4bb;实现代码 01背包问题&#xff0c;你该了解这些&#xff01; 滚动数组 一维dp数组&#xff08;滚动数组&#xff09; &#x1f4bb;实现代码 416. 分割等和子集 &#x1f…

位运算之妙用:识别独特数字(寻找单身狗)

目录 找单身狗1 图解&#xff1a; 代码如下&#xff1a; 找单身狗2 图解&#xff1a; 代码如下&#xff1a; 寻找单身狗1 从数组中 的1 2 3 4 5 1 2 3 4 中找出没有另一个相同的数与其匹配的数 这个问题的原理是利用异或运算的性质。异或运算&#xff08;XOR&#xff09…

游戏如何选择服务器

一个网络游戏要想长期运行下去&#xff0c;关键是用户体验&#xff0c;在初期阶段的游戏服务器租用环节就显得尤为重要。那么问题来了&#xff0c;游戏公司如何才能够在众多的服务器商中租用找到高性能、高性价比的游戏服务器租用呢&#xff1f;租用游戏服务器时需要考虑的因素…

vite, vue3, vue-router, vuex, ES6学习日记

学习使用vitevue3的所遇问题总结&#xff08;2024年2月1日&#xff09; 组件中使用<script>标签忘记加 setup 这会导致Navbar 没有暴露出来&#xff0c;导致使用不了&#xff0c;出现以下报错 这是因为&#xff0c;如果不用setup&#xff0c;就得使用 export default…

Leetcode—2881. 创建新列【简单】

2024每日刷题&#xff08;一零九&#xff09; Leetcode—2881. 创建新列 实现代码 import pandas as pddef createBonusColumn(employees: pd.DataFrame) -> pd.DataFrame:employees[bonus] employees[salary] * 2return employees 运行结果 之后我会持续更新&#xf…

Deepin如何开启与配置SSH实现无公网ip远程连接

文章目录 前言1. 开启SSH服务2. Deppin安装Cpolar3. 配置ssh公网地址4. 公网远程SSH连接5. 固定连接SSH公网地址6. SSH固定地址连接测试 前言 Deepin操作系统是一个基于Debian的Linux操作系统&#xff0c;专注于使用者对日常办公、学习、生活和娱乐的操作体验的极致&#xff0…

leetcode刷题(剑指offer)113.路径总和Ⅱ

113.路径总和Ⅱ 给你二叉树的根节点 root 和一个整数目标和 targetSum &#xff0c;找出所有 从根节点到叶子节点 路径总和等于给定目标和的路径。 叶子节点 是指没有子节点的节点。 示例 1&#xff1a; 输入&#xff1a;root [5,4,8,11,null,13,4,7,2,null,null,5,1], tar…

解锁教育系统源码的定制奥秘:企业培训平台开发详解

今天&#xff0c;小编将为大家讲解教育系统源码的奥秘&#xff0c;详细解释企业培训定制开发的关键步骤和技术要点。 一、需求分析与设计阶段 设计阶段则包括系统的整体架构设计、数据库设计以及用户界面设计等方面。 二、技术选型与开发环境搭建 通过使用版本控制系统、集成…

解决WARNING: IPv4 forwarding is disabled. Networking will not work的具体操作步骤

IPv4转发禁用警告&#xff1a;网络无法正常工作 在使用网络连接的过程中&#xff0c;我们可能遇到警告消息“WARNING: IPv4 forwarding is disabled. Networking will not work”&#xff08;警告&#xff1a;IPv4转发已禁用&#xff0c;网络将无法正常工作&#xff09;。这个…

2024美赛E题数学建模思路代码数据分享

2024 ICM Problem E: Sustainability of Property Insurance 本题要求选取不同大陆上经历极端天气的两个地区来为保险公司开发模型&#xff0c;本题的重点是找到尽可能多而全的数据&#xff0c;包括天气数据&#xff0c;经济数据&#xff0c;人口数据等。 模型选择&#xff1a…