在本篇文章中，我們將深入探索Element UI中的<el-link>組件——一種樣式化的文字鏈接組件，它不僅繼承了傳統(tǒng)<a>標簽的所有功能，還引入了額外的樣式和屬性，使得創(chuàng)建具有吸引力的鏈接變得輕而易舉。

從基礎(chǔ)的鏈接創(chuàng)建到高級的屬性配置，我們將一步步分析如何利用<el-link>組件來豐富您的網(wǎng)頁界面。我們將學習如何通過簡單的標簽和屬性來控制鏈接的顏色、是否顯示下劃線、禁用狀態(tài)，甚至如何添加圖標來提升視覺效果。



ElementUI 專欄 : https://blog.csdn.net/m0_53117341/category_12780595.html

文字鏈接就類似我們之前編寫的 a 標簽 , 只不過這里的文字鏈接是攜帶了樣式的文字鏈接

一 . 創(chuàng)建文字鏈接

我們根據(jù)之前的學習 , 可以知道 ElementUI 中的標簽都是以 el 開頭的 .

那我們就可以通過 el-link 標簽來去創(chuàng)建一個文字鏈接

<el-link>主要鏈接</el-link>

1.1 注冊路由

我們可以新創(chuàng)建一個組件 , 來看一下文字鏈接的效果

然后我們需要將 Link 組件注冊到路由中

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Button from '@/components/Button'
import ButtonDetail from '@/components/ButtonDetail'
import Link from '@/components/Link'Vue.use(Router)export default new Router({routes: [{ path: '/', name: 'HelloWorld', component: HelloWorld },{ path: '/button', name: 'Button', component: Button },{ path: '/buttondetail', name: 'ButtonDetail', component: ButtonDetail },{ path: '/link', name: 'Link', component: Link },]
})

然后我們在 App.vue 中添加相對應(yīng)的 a 標簽 , 點擊即可跳轉(zhuǎn)到我們的 Link 組件

<template><div id="app"><!-- 我們自己的標簽頁 --><a href="#/link">文字鏈接組件</a> <br><!-- Vue 的路由 --><router-view/></div>
</template><script>
export default {name: 'App'
}
</script><style>
#app {font-family: 'Avenir', Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

1.2 創(chuàng)建文字鏈接

那接下來我們來創(chuàng)建文字鏈接 , 按照之前的方式 , 我們通過 el-link 即可創(chuàng)建文字鏈接

<template><div><h1>文字鏈接組件</h1><!-- 使用 el-link 標簽創(chuàng)建文字鏈接 --><el-link>默認鏈接</el-link></div>
</template><script>
export default {data() {return {}}
}
</script><style scoped></style>

我們來看一下效果

這樣就創(chuàng)建出了一個最普通的文字鏈接

二 . 文字鏈接的屬性

文字鏈接也提供了好幾個屬性 , 我們可以通過 ElementUI 官網(wǎng)來查看

https://element.eleme.cn/#/zh-CN/component/link

2.1 文字鏈接的顏色

type 屬性主要控制的是文字鏈接的顏色

其中 , 不同的屬性代表的是不同的顏色

我們可以通過 type 屬性來設(shè)置不同文字鏈接的顏色

<template><div><h1>文字鏈接組件</h1><!-- 使用 el-link 標簽創(chuàng)建文字鏈接 --><el-link>默認鏈接</el-link><!-- 通過 type 屬性可以設(shè)置鏈接的不同顏色 --><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><script>
export default {data() {return {}}
}
</script><style scoped></style>

2.2 是否顯示下劃線

我們使用 underline 屬性設(shè)置是否顯示下劃線

要注意的是 , underline 屬性的默認值為 true , 代表默認顯示下劃線 , 需要我們設(shè)置成 false 才能夠不顯示下劃線

此時我們來看一下效果

我們來看一下報錯的具體內(nèi)容

這是因為 JavaScript 將我們的 false 誤識別成了字符串 , 所以不能正常識別 .

我們可以使用 Vue 提供給我們的屬性綁定 , 也就是 v-bind 來進行布爾變量的綁定

<template><div><h1>下劃線</h1><!-- underline 屬性默認為 true, 代表默認顯示下劃線, 需要我們手動設(shè)置成 false 來隱藏下劃線 --><el-link :underline="flag">默認鏈接</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

如果還繼續(xù)報錯 , 請檢查一下 script 標簽中是否出現(xiàn)了 setup 關(guān)鍵字 , 如果存在的話 , 請將

此時我們來看一下效果 , 此時下劃線已經(jīng)消失 , 并且控制臺也不報錯了

那我們其實也不用特意在腳本中創(chuàng)建一個布爾變量來去進行屬性綁定 , 我們還可以直接通過 v-bind 來去設(shè)置 true/false

<template><div><h1>下劃線</h1><!-- underline 屬性默認為 true, 代表默認顯示下劃線, 需要我們手動設(shè)置成 false 來隱藏下劃線 --><!-- 使用 underline 屬性需要使用屬性綁定的方式, v-bind 可省略 --><el-link :underline="flag">默認鏈接</el-link><!-- 也可以直接通過屬性綁定設(shè)置 true/false --><el-link :underline="false">默認鏈接</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

我們來看一下效果

2.3 是否禁用狀態(tài)

如果我們不想讓用戶點擊某個文字鏈接的話 , 可以設(shè)置 disable 屬性

其中 , disabled 默認值為 false , 這就代表我們只需要在屬性中聲明 disabled 屬性即可 , 無需設(shè)置 true/false

<template><div><h1>設(shè)置禁用狀態(tài)</h1><!-- 通過 disabled 屬性將當前鏈接設(shè)置成禁止點擊 --><el-link type="danger" disabled>已被禁用</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

我們注意 “已被禁用” 所出現(xiàn)的禁止圖標

2.4 填寫跳轉(zhuǎn)地址

我們可以使用原生的 href 屬性來填寫要跳轉(zhuǎn)的地址

同時 , el-link 標簽還繼承了原生 a 標簽的一系列屬性 , 比如我們還可以指定是否在新標簽頁跳轉(zhuǎn) , 即 target 屬性

<template><div><h1>設(shè)置跳轉(zhuǎn)地址</h1><!-- 通過 href 屬性設(shè)置跳轉(zhuǎn)地址 --><!-- 通過 target="_blank" 屬性設(shè)置在新標簽頁中打開 --><el-link href="http://www.baidu.com" target="_blank">點擊跳轉(zhuǎn)</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

2.5 加入圖標

我們也可以在文字鏈接中加入圖標來美化文字鏈接組件

比如我們可以去找一個圖標 : https://element.eleme.cn/#/zh-CN/component/icon

然后粘貼到 icon 屬性中

<template><div><h1>加入圖標</h1><!-- 通過 icon 屬性可以給文字鏈接前面添加小圖標 --><el-link type="primary" icon="el-icon-star-off">添加圖標</el-link></div>
</template><script>
export default {data() {return {flag: false}}
}
</script><style scoped></style>

---

小結(jié) : 我們從基礎(chǔ)的 <el-link> 組件創(chuàng)建開始，逐步介紹了如何通過注冊路由和在 Vue 組件中使用該標簽。進一步地，我們探索了 type 屬性來定制鏈接顏色，使用 underline 和 disabled 屬性來控制鏈接的顯示效果和交互狀態(tài)。此外，我們還學習了如何利用 href 和 target 屬性來設(shè)置鏈接的跳轉(zhuǎn)行為，以及如何通過 icon 屬性為鏈接添加視覺吸引力的圖標。

不知道你掌握了多少 , 一定要跟著案例親自實現(xiàn) . 如果對你有幫助的話 , 還請一鍵三連~