You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
96 lines
1.8 KiB
96 lines
1.8 KiB
<template>
|
|
<navigator
|
|
:url="url"
|
|
:openType="currentOpenType"
|
|
:animationDuration="animationDuration"
|
|
:hoverClass="hoverClass"
|
|
:hoverStopPropagation="hoverStopPropagation"
|
|
:hoverStartTime="hoverStartTime"
|
|
:hoverStayTime="hoverStayTime"
|
|
:target="target"
|
|
@click="toNext"
|
|
>
|
|
<slot></slot>
|
|
</navigator>
|
|
</template>
|
|
<script>
|
|
import qs from "qs";
|
|
export default {
|
|
name: "vLink",
|
|
props: {
|
|
to: {
|
|
default() {
|
|
return "";
|
|
},
|
|
require: true,
|
|
type: String | Object,
|
|
},
|
|
replace: {
|
|
defalut: false,
|
|
requires: false,
|
|
type: Boolean,
|
|
},
|
|
openType: {
|
|
default: "navigate",
|
|
require: false,
|
|
type: String,
|
|
},
|
|
animationDuration: {
|
|
default: 300,
|
|
require: false,
|
|
type: Number,
|
|
},
|
|
hoverClass: {
|
|
default: "navigator-hover",
|
|
reuqire: false,
|
|
type: String,
|
|
},
|
|
hoverStopPropagation: {
|
|
default: false,
|
|
reuqire: false,
|
|
type: Boolean,
|
|
},
|
|
hoverStartTime: {
|
|
default: 50,
|
|
require: false,
|
|
type: Number,
|
|
},
|
|
hoverStayTime: {
|
|
default: 600,
|
|
require: false,
|
|
type: Number,
|
|
},
|
|
target: {
|
|
default: "self",
|
|
require: false,
|
|
type: String,
|
|
},
|
|
},
|
|
computed: {
|
|
currentOpenType() {
|
|
if (this.replace) {
|
|
return "redirect";
|
|
} else {
|
|
return this.openType;
|
|
}
|
|
},
|
|
url() {
|
|
var url = "",
|
|
query;
|
|
if (typeof this.to == "string") {
|
|
url = this.to;
|
|
} else {
|
|
url = this.to.path;
|
|
query = qs.stringify(this.to.query);
|
|
}
|
|
return `${url}${url.includes('?') ? '&' : '?'}${query||''}`
|
|
},
|
|
},
|
|
methods: {
|
|
toNext(){
|
|
this.$navFontColor()
|
|
}
|
|
},
|
|
};
|
|
</script>
|
|
|
|
|