el-link入门学习
el-link的入门使用
·
- 学习内容
1.el-link的标签使用
2.el-link种类（default,primary,success,warning,danger,info）
3.禁用链接关键字 disabled
4.点击链接隐藏下划线关键字 underline
5.带图标的链接 右图标使用i标签，左图标使用icon属性即可
6.target=‘_blank’ 指空白页打开链接 - 代码效果图
- 代码展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id='app'>
<!-- 链接基础 target='_blank' 作用为打开新的窗口进入href链接 -->
<el-row>
<el-link href='https://www.baidu.com' 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>
</el-row>
<!-- 禁用链接 -->
<el-row>
<el-link href='https://www.baidu.com' target='_blank' 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>
</el-row>
<!-- 下划线 -->
<el-row>
<el-link :underline='false'>无下划线</el-link>
<el-link>有下划线</el-link>
</el-row>
<!-- 图标文字链接 -->
<el-row>
<el-link icon='el-icon-edit'>编辑</el-link>
<el-link>查看<i class='el-icon-view el-icon--right'></i></el-link>
</el-row>
</div>
</body>
</html>
<script>
let vm = new Vue({
el:'#app'
})
</script>
<style>
.el-row {
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
}
</style>
- 官网地址：element-ui官网
华为开发者空间，是为全球开发者打造的专属开发空间，汇聚了华为优质开发资源及工具，致力于让每一位开发者拥有一台云主机，基于华为根生态开发、创新。
更多推荐
1
0- 0
已为社区贡献17条内容
所有评论(0)