refactor: header.vue to composition api
This commit is contained in:
parent
b7c0e26da9
commit
2938ff368e
GPG key ID:
7123E30E441E80DE
1 changed files with 94 additions and 105 deletions
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="sqxihjet">
|
||||
<div ref="header" class="sqxihjet">
|
||||
<div v-if="narrow === false" class="wide">
|
||||
<div class="content">
|
||||
<MkA to="/" class="link" active-class="active"><i class="fas fa-home icon"></i>{{ $ts.home }}</MkA>
|
||||
|
|
@ -13,7 +13,9 @@
|
|||
<span v-if="info.title" class="text">{{ info.title }}</span>
|
||||
<MkUserName v-else-if="info.userName" :user="info.userName" :nowrap="false" class="text"/>
|
||||
</div>
|
||||
<button v-if="info.action" class="_button action" @click.stop="info.action.handler"><!-- TODO --></button>
|
||||
<button v-if="info.action" class="_button action" @click.stop="info.action.handler">
|
||||
<!-- TODO -->
|
||||
</button>
|
||||
</div>
|
||||
<div class="right">
|
||||
<button class="_button search" @click="search()"><i class="fas fa-search icon"></i><span>{{ $ts.search }}</span></button>
|
||||
|
|
@ -22,8 +24,8 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="narrow === true" class="narrow">
|
||||
<button class="menu _button" @click="$parent.showMenu = true">
|
||||
<div v-else-if="narrow" class="narrow">
|
||||
<button class="menu _button" @click="showMenu = true">
|
||||
<i class="fas fa-bars icon"></i>
|
||||
</button>
|
||||
<div v-if="info" class="title">
|
||||
|
|
@ -39,47 +41,38 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
<script lang="ts" setup>
|
||||
import { onMounted, ref, Ref } from 'vue';
|
||||
import XSigninDialog from '@/components/signin-dialog.vue';
|
||||
import XSignupDialog from '@/components/signup-dialog.vue';
|
||||
import * as os from '@/os';
|
||||
import { search } from '@/scripts/search';
|
||||
|
||||
export default defineComponent({
|
||||
props: {
|
||||
info: {
|
||||
required: true
|
||||
},
|
||||
},
|
||||
defineProps<{
|
||||
info: any;
|
||||
}>();
|
||||
|
||||
data() {
|
||||
return {
|
||||
narrow: null,
|
||||
showMenu: false,
|
||||
};
|
||||
},
|
||||
const narrow = ref(false);
|
||||
const showMenu = ref(false);
|
||||
const header: Ref<HTMLElement | null> = ref(null);
|
||||
|
||||
mounted() {
|
||||
this.narrow = this.$el.clientWidth < 1300;
|
||||
},
|
||||
|
||||
methods: {
|
||||
signin() {
|
||||
os.popup(XSigninDialog, {
|
||||
autoSet: true
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
signup() {
|
||||
os.popup(XSignupDialog, {
|
||||
autoSet: true
|
||||
}, {}, 'closed');
|
||||
},
|
||||
|
||||
search
|
||||
onMounted(() => {
|
||||
if (header.value) {
|
||||
narrow.value = header.value.clientWidth < 1300;
|
||||
}
|
||||
});
|
||||
|
||||
function signin(): void {
|
||||
os.popup(XSigninDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}
|
||||
|
||||
function signup(): void {
|
||||
os.popup(XSignupDialog, {
|
||||
autoSet: true,
|
||||
}, {}, 'closed');
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
|
@ -94,14 +87,14 @@ export default defineComponent({
|
|||
backdrop-filter: var(--blur, blur(32px));
|
||||
background-color: var(--X16);
|
||||
|
||||
> .wide {
|
||||
> .content {
|
||||
>.wide {
|
||||
>.content {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> .link {
|
||||
>.link {
|
||||
$line: 3px;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
|
@ -109,7 +102,7 @@ export default defineComponent({
|
|||
border-top: solid $line transparent;
|
||||
border-bottom: solid $line transparent;
|
||||
|
||||
> .icon {
|
||||
>.icon {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
|
|
@ -118,8 +111,8 @@ export default defineComponent({
|
|||
}
|
||||
}
|
||||
|
||||
> .page {
|
||||
> .title {
|
||||
>.page {
|
||||
>.title {
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
white-space: nowrap;
|
||||
|
|
@ -127,11 +120,11 @@ export default defineComponent({
|
|||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
|
||||
> .icon + .text {
|
||||
>.icon+.text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
>.avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
|
|
@ -151,76 +144,72 @@ export default defineComponent({
|
|||
box-shadow: 0 -2px 0 0 var(--accent) inset;
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
}
|
||||
|
||||
> .action {
|
||||
padding: 0 0 0 16px;
|
||||
}
|
||||
}
|
||||
el>.right {
|
||||
margin-left: auto;
|
||||
|
||||
> .right {
|
||||
margin-left: auto;
|
||||
>.search {
|
||||
background: var(--bg);
|
||||
border-radius: 999px;
|
||||
width: 230px;
|
||||
line-height: $height - 20px;
|
||||
margin-right: 16px;
|
||||
text-align: left;
|
||||
|
||||
> .search {
|
||||
background: var(--bg);
|
||||
border-radius: 999px;
|
||||
width: 230px;
|
||||
line-height: $height - 20px;
|
||||
margin-right: 16px;
|
||||
text-align: left;
|
||||
>* {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
> * {
|
||||
opacity: 0.7;
|
||||
}
|
||||
>.icon {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
|
||||
> .icon {
|
||||
padding: 0 16px;
|
||||
>.signup {
|
||||
border-radius: 999px;
|
||||
padding: 0 24px;
|
||||
line-height: $height - 20px;
|
||||
}
|
||||
|
||||
>.login {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .signup {
|
||||
border-radius: 999px;
|
||||
padding: 0 24px;
|
||||
line-height: $height - 20px;
|
||||
}
|
||||
|
||||
> .login {
|
||||
padding: 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .narrow {
|
||||
display: flex;
|
||||
|
||||
> .menu,
|
||||
> .action {
|
||||
width: $height;
|
||||
height: $height;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
> .title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
> .icon + .text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
> .avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
pointer-events: none;
|
||||
>.narrow {
|
||||
display: flex;
|
||||
|
||||
>.menu,
|
||||
>.action {
|
||||
width: $height;
|
||||
height: $height;
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
>.title {
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
>.icon+.text {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
>.avatar {
|
||||
$size: 32px;
|
||||
display: inline-block;
|
||||
width: $size;
|
||||
height: $size;
|
||||
vertical-align: middle;
|
||||
margin-right: 8px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue