mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-16 02:11:48 +08:00
119 lines
3.0 KiB
Vue
119 lines
3.0 KiB
Vue
<script lang="ts">
|
|
import { h } from 'vue'
|
|
// Components
|
|
import { ElIcon } from 'element-plus'
|
|
|
|
const ExternalLink = () =>
|
|
h(
|
|
'svg',
|
|
{
|
|
class: 'link-icon',
|
|
viewBox: '0 0 1024 1024',
|
|
xmlns: 'http://www.w3.org/2000/svg',
|
|
width: 16,
|
|
height: 16,
|
|
},
|
|
[
|
|
h('path', {
|
|
d:
|
|
'M853.333333 469.333333a42.666667 42.666667 0 0 0-42.666666 42.666667v256a42.666667 42.666667 0 0 1-42.666667 42.666667H256a42.666667 42.666667 0 0 1-42.666667-42.666667V256a42.666667 42.666667 0 0 1 42.666667-42.666667h256a42.666667 42.666667 0 0 0 0-85.333333H256a128 128 0 0 0-128 128v512a128 128 0 0 0 128 128h512a128 128 0 0 0 128-128v-256a42.666667 42.666667 0 0 0-42.666667-42.666667z',
|
|
fill: 'currentColor',
|
|
}),
|
|
|
|
h('path', {
|
|
d:
|
|
'M682.666667 213.333333h67.413333l-268.373333 267.946667a42.666667 42.666667 0 0 0 0 60.586667 42.666667 42.666667 0 0 0 60.586666 0L810.666667 273.92V341.333333a42.666667 42.666667 0 0 0 42.666666 42.666667 42.666667 42.666667 0 0 0 42.666667-42.666667V170.666667a42.666667 42.666667 0 0 0-42.666667-42.666667h-170.666666a42.666667 42.666667 0 0 0 0 85.333333z',
|
|
fill: 'currentColor',
|
|
}),
|
|
],
|
|
)
|
|
|
|
const skipped = ['https://www.npmjs.org/package/element-plus']
|
|
|
|
const internalLinks = [
|
|
'http://localhost',
|
|
'http://127.0.0.1',
|
|
'https://element-plus.org',
|
|
'http://element-plus.org',
|
|
'https://element-plus.gitee.io',
|
|
'http://element-plus.gitee.io',
|
|
]
|
|
|
|
export default {
|
|
name: 'AppLink',
|
|
inheritAttrs: false,
|
|
props: {
|
|
href: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
},
|
|
computed: {
|
|
passThrough() {
|
|
return {
|
|
href: this.href,
|
|
target: this.isInternal ? null : '_blank',
|
|
rel: 'noopener noreferrer',
|
|
}
|
|
},
|
|
isInternal() {
|
|
return (
|
|
this.href.startsWith('/#') ||
|
|
internalLinks.some(link => this.href.includes(link))
|
|
)
|
|
},
|
|
isExternal() {
|
|
return !this.isInternal
|
|
},
|
|
isSamePage() {
|
|
return this.$router.currentRoute.value.path.includes(this.href)
|
|
},
|
|
isSkipped() {
|
|
return skipped.indexOf(this.href) > -1
|
|
},
|
|
},
|
|
methods: {
|
|
onClick(e: MouseEvent) {
|
|
if (!this.isSamePage) return
|
|
e.preventDefault()
|
|
this.$router.go(this.href)
|
|
},
|
|
},
|
|
render() {
|
|
const children = []
|
|
|
|
children.push(
|
|
h('span', { class: 'element-plus__link-text' }, [this.$slots.default()]),
|
|
)
|
|
!this.isSkipped &&
|
|
this.isExternal &&
|
|
children.push(
|
|
h(
|
|
ElIcon,
|
|
{
|
|
style: {
|
|
fontSize: '14px',
|
|
marginLeft: '4px',
|
|
},
|
|
color: 'inherit',
|
|
},
|
|
{
|
|
default: () => [h(ExternalLink)],
|
|
},
|
|
),
|
|
)
|
|
const props = {
|
|
class: 'element-plus__link',
|
|
...this.passThrough,
|
|
onClick: this.onClick,
|
|
}
|
|
|
|
return h('a', props, children)
|
|
// ?
|
|
// : h(resolveComponent('router-link'), props, {
|
|
// default: () => children,
|
|
// })
|
|
},
|
|
}
|
|
</script>
|