84 lines
1.6 KiB
Vue
84 lines
1.6 KiB
Vue
<template>
|
|
<n-collapse-item
|
|
:name="`${url}-${type}`"
|
|
:title="url"
|
|
v-bind:class="{
|
|
get: type === 'get',
|
|
put: type === 'put',
|
|
post: type === 'post',
|
|
delete: type === 'delete',
|
|
options: type === 'options',
|
|
head: type === 'head',
|
|
patch: type === 'patch',
|
|
}">
|
|
<template #header>
|
|
<div f n-c style="padding: 10px; height: calc(100% - 10px); display: flex; gap: 20px">
|
|
<div
|
|
c-c
|
|
f
|
|
style="
|
|
width: 80px;
|
|
height: 30px;
|
|
background: var(--color);
|
|
border-radius: 2px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
">
|
|
{{ type.toUpperCase() }}
|
|
</div>
|
|
|
|
<label style="font-weight: 700">{{ url }}</label>
|
|
</div>
|
|
</template>
|
|
<div></div>
|
|
</n-collapse-item>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
const prop = defineProps({
|
|
type: {
|
|
type: String as PropType<'get' | 'post' | 'put' | 'delete' | 'patch' | 'head' | 'options' | 'trace' | 'connect'>,
|
|
default: 'get',
|
|
},
|
|
url: {
|
|
type: [String, Number],
|
|
required: true,
|
|
},
|
|
});
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
@mixin method-style($color) {
|
|
background: rgba($color, 0.1);
|
|
border-radius: 3px;
|
|
border: 1px solid $color !important;
|
|
--color: #{$color};
|
|
}
|
|
|
|
.get {
|
|
@include method-style(#61affe);
|
|
}
|
|
|
|
.put {
|
|
@include method-style(#fca130ff);
|
|
}
|
|
|
|
.post {
|
|
@include method-style(#49cc90);
|
|
}
|
|
|
|
.delete {
|
|
@include method-style(#f93e3e);
|
|
}
|
|
|
|
.options {
|
|
@include method-style(#0d5aa7);
|
|
}
|
|
|
|
.head {
|
|
@include method-style(#9012fe);
|
|
}
|
|
|
|
.patch {
|
|
@include method-style(#50e3c2);
|
|
}
|
|
</style>
|