86 lines
1.5 KiB
Vue
86 lines
1.5 KiB
Vue
<template>
|
|
<a :href="href" :title="title" :class="classes">
|
|
<slot></slot>
|
|
</a>
|
|
</template>
|
|
|
|
<script>
|
|
import { defineComponent } from "vue"
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
active: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
|
|
href: {
|
|
type: String,
|
|
default: "#",
|
|
},
|
|
|
|
class: {
|
|
type: String,
|
|
default: '',
|
|
},
|
|
|
|
title: {
|
|
type: String,
|
|
default: null,
|
|
},
|
|
},
|
|
|
|
setup(props) {
|
|
let classes = ""
|
|
let classesArr = []
|
|
let defaultClasses = []
|
|
let dClasses = [
|
|
"block",
|
|
"pl-3",
|
|
"pr-4",
|
|
"py-2",
|
|
"border-l-4",
|
|
"text-base",
|
|
"font-medium",
|
|
"focus:outline-none",
|
|
"transition",
|
|
]
|
|
|
|
let tiveClasses = [
|
|
"border-transparent",
|
|
"text-gray-600",
|
|
"hover:text-gray-800",
|
|
"hover:bg-gray-50",
|
|
"hover:border-gray-300",
|
|
"focus:text-gray-800",
|
|
"focus:bg-gray-50",
|
|
"focus:border-gray-300",
|
|
]
|
|
|
|
if (props.active) {
|
|
tiveClasses = [
|
|
"border-indigo-400",
|
|
"text-indigo-700",
|
|
"bg-indigo-50",
|
|
"focus:text-indigo-800",
|
|
"focus:bg-indigo-100",
|
|
"focus:border-indigo-700",
|
|
]
|
|
}
|
|
|
|
defaultClasses = dClasses.concat(tiveClasses)
|
|
|
|
for (let elm of props.class.split(" ")) {
|
|
elm = elm.trim()
|
|
if (elm.length > 0 && defaultClasses.indexOf(elm) === -1) {
|
|
classesArr.push(elm)
|
|
}
|
|
}
|
|
|
|
classes = defaultClasses.join(" ") + " " + classesArr.join(" ")
|
|
|
|
return { classes }
|
|
},
|
|
})
|
|
</script>
|