mirror of
https://gitee.com/novel_dev_team/novel-front-web
synced 2026-07-20 17:54:10 +08:00
75 lines
2.1 KiB
Vue
75 lines
2.1 KiB
Vue
<template>
|
|
<div class="topMain">
|
|
<div class="box_center cf">
|
|
<router-link :to="{ name: 'home' }" class="logo fl"
|
|
><img :src="logo" alt="小说精品屋"
|
|
/></router-link>
|
|
<div class="searchBar fl">
|
|
<div class="search cf">
|
|
<input
|
|
v-model="keyword"
|
|
type="text"
|
|
placeholder="书名、作者、关键字"
|
|
class="s_int"
|
|
v-on:keyup.enter="searchByK"
|
|
/>
|
|
<label class="search_btn" id="btnSearch" @click="searchByK()"
|
|
><i class="icon"></i
|
|
></label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bookShelf fr" id="headerUserInfo">
|
|
<!--
|
|
<a class="sj_link" href="/user/favorites.html">我的书架</a>-->
|
|
<span v-if="!token" class="user_link"
|
|
><!--<i class="line mr20">|</i
|
|
>--><a href="/user/login.html" class="mr15">登录</a>
|
|
<router-link :to="{ name: 'register' }">注册</router-link>
|
|
</span>
|
|
<span v-if="token" class="user_link"
|
|
><!--<i class="line mr20">|</i
|
|
>--><a class="mr15">{{nickName}}</a
|
|
><a @click="logout" href="javascript:void(0)">退出</a></span
|
|
>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import logo from "@/assets/images/logo.png";
|
|
import { reactive, toRefs, onMounted } from "vue";
|
|
import { useRouter, useRoute } from "vue-router";
|
|
import { getToken, getNickName,removeToken } from "@/utils/auth";
|
|
export default {
|
|
name: "Top",
|
|
setup(props, context) {
|
|
const state = reactive({
|
|
keyword: "",
|
|
nickName: getNickName(),
|
|
token: getToken(),
|
|
});
|
|
state.nickName = getNickName()
|
|
state.token = getToken()
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
state.keyword = route.query.key;
|
|
const searchByK = () => {
|
|
router.push({ path: "/bookClass", query: { key: state.keyword } });
|
|
context.emit("eventSerch", state.keyword);
|
|
};
|
|
const logout = () => {
|
|
removeToken()
|
|
state.nickName = ""
|
|
state.token = ""
|
|
}
|
|
return {
|
|
...toRefs(state),
|
|
logo,
|
|
searchByK,
|
|
logout
|
|
};
|
|
},
|
|
};
|
|
</script> |