mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-02-02 13:17:57 +01:00
feat(Link): add as prop (#535)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
This commit is contained in:
committed by
GitHub
parent
00594ea59b
commit
e40491208a
@@ -17,6 +17,6 @@ The Link component is a wrapper around [`<NuxtLink>`](https://nuxt.com/docs/api/
|
|||||||
|
|
||||||
The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
|
The incentive behind this is to provide the same API as NuxtLink back in Nuxt 2 / Vue 2. You can read more about it in the Vue Router [migration from Vue 2](https://router.vuejs.org/guide/migration/#removal-of-the-exact-prop-in-router-link) guide.
|
||||||
|
|
||||||
It also renders an `<a>` tag when a `to` prop is provided, otherwise it renders a `<button>` tag.
|
It also renders an `<a>` tag when a `to` prop is provided, otherwise it defaults to rendering a `<button>` tag. The default behavior can be customized using the `as` prop.
|
||||||
|
|
||||||
It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.
|
It is used underneath by the [Button](/elements/button), [Dropdown](/elements/dropdown) and [VerticalNavigation](/navigation/vertical-navigation) components.
|
||||||
|
|||||||
@@ -1,7 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<button v-if="!to" :type="type" :disabled="disabled" v-bind="$attrs" :class="inactiveClass">
|
<component
|
||||||
|
:is="as"
|
||||||
|
v-if="!to"
|
||||||
|
:disabled="disabled"
|
||||||
|
v-bind="$attrs"
|
||||||
|
:class="inactiveClass"
|
||||||
|
>
|
||||||
<slot />
|
<slot />
|
||||||
</button>
|
</component>
|
||||||
<NuxtLink
|
<NuxtLink
|
||||||
v-else
|
v-else
|
||||||
v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
|
v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }"
|
||||||
@@ -32,9 +38,9 @@ export default defineComponent({
|
|||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
props: {
|
props: {
|
||||||
...NuxtLink.props,
|
...NuxtLink.props,
|
||||||
type: {
|
as: {
|
||||||
type: String,
|
type: String,
|
||||||
default: null
|
default: 'button'
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
|||||||
Reference in New Issue
Block a user