mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-23 07:56:38 +08:00
fix: layouts name fix (#24)
This commit is contained in:
PY
GitHub
parent
baf43fb503
commit
7fe368c874
351
src/layouts/components/Header.vue
Normal file
351
src/layouts/components/Header.vue
Normal file
|
|
@ -0,0 +1,351 @@
|
||||||
|
<template>
|
||||||
|
<div :class="layoutCls">
|
||||||
|
<t-head-menu :class="menuCls" :theme="theme" expand-type="popup" :value="active">
|
||||||
|
<template #logo>
|
||||||
|
<span v-if="showLogo" class="header-logo-container" @click="goHome">
|
||||||
|
<tLogoFull class="t-logo" />
|
||||||
|
</span>
|
||||||
|
<div v-else class="header-operate-left">
|
||||||
|
<t-button theme="default" shape="square" variant="text" @click="changeCollapsed">
|
||||||
|
<t-icon v-show="isSidebarCompact" class="collapsed-icon" name="menu-fold" />
|
||||||
|
<t-icon v-show="!isSidebarCompact" class="collapsed-icon" name="menu-unfold" />
|
||||||
|
</t-button>
|
||||||
|
<search :layout="layout" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<sub-menu v-show="layout !== 'side'" class="header-menu" :nav-data="menu" />
|
||||||
|
<template #operations>
|
||||||
|
<div class="operations-container">
|
||||||
|
<!-- 搜索框 -->
|
||||||
|
<search v-if="layout !== 'side'" :layout="layout" />
|
||||||
|
|
||||||
|
<t-dropdown :min-column-width="135" trigger="click">
|
||||||
|
<template #dropdown>
|
||||||
|
<t-dropdown-menu>
|
||||||
|
<t-dropdown-item class="operations-dropdown-container-item" @click="handleNav('/user/index')">
|
||||||
|
<t-icon name="user-circle"></t-icon>个人中心
|
||||||
|
</t-dropdown-item>
|
||||||
|
<t-dropdown-item class="operations-dropdown-container-item" @click="handleLogout">
|
||||||
|
<t-icon name="poweroff"></t-icon>退出登录
|
||||||
|
</t-dropdown-item>
|
||||||
|
</t-dropdown-menu>
|
||||||
|
</template>
|
||||||
|
<t-button class="header-user-btn" theme="default" variant="text">
|
||||||
|
<template #icon>
|
||||||
|
<t-icon class="header-user-avatar" name="user-circle" />
|
||||||
|
</template>
|
||||||
|
<div class="header-user-account">
|
||||||
|
Tencent
|
||||||
|
<t-icon name="chevron-down" />
|
||||||
|
</div>
|
||||||
|
</t-button>
|
||||||
|
</t-dropdown>
|
||||||
|
|
||||||
|
<!-- 全局通知 -->
|
||||||
|
<notice />
|
||||||
|
|
||||||
|
<t-tooltip placement="bottom" content="代码仓库">
|
||||||
|
<t-button theme="default" shape="square" variant="text" @click="navToGitHub">
|
||||||
|
<t-icon name="logo-github" />
|
||||||
|
</t-button>
|
||||||
|
</t-tooltip>
|
||||||
|
<t-tooltip placement="bottom" content="帮助文档">
|
||||||
|
<t-button theme="default" shape="square" variant="text" @click="navToHelper">
|
||||||
|
<t-icon name="help-circle" />
|
||||||
|
</t-button>
|
||||||
|
</t-tooltip>
|
||||||
|
<t-tooltip placement="bottom" content="系统设置">
|
||||||
|
<t-button theme="default" shape="square" variant="text">
|
||||||
|
<t-icon name="setting" @click="toggleSettingPanel" />
|
||||||
|
</t-button>
|
||||||
|
</t-tooltip>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</t-head-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, PropType, computed, ref } from 'vue';
|
||||||
|
import { useStore } from 'vuex';
|
||||||
|
import { useRouter, useRoute } from 'vue-router';
|
||||||
|
|
||||||
|
import { PREFIX } from '@/config/global';
|
||||||
|
import tLogoFull from '@/assets/assets-logo-full.svg?component';
|
||||||
|
import { MenuRoute } from '@/interface';
|
||||||
|
|
||||||
|
import Notice from './Notice.vue';
|
||||||
|
import Search from './Search.vue';
|
||||||
|
import SubMenu from './SubMenu';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
components: {
|
||||||
|
tLogoFull,
|
||||||
|
Notice,
|
||||||
|
Search,
|
||||||
|
SubMenu,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
theme: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
default: 'top',
|
||||||
|
},
|
||||||
|
showLogo: {
|
||||||
|
type: Boolean as PropType<boolean>,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
menu: {
|
||||||
|
type: Array as PropType<MenuRoute[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
isFixed: {
|
||||||
|
type: Boolean as PropType<boolean>,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
isCompact: {
|
||||||
|
type: Boolean as PropType<boolean>,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
maxLevel: {
|
||||||
|
type: Number as PropType<number>,
|
||||||
|
default: 3,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup(props) {
|
||||||
|
const store = useStore();
|
||||||
|
const router = useRouter();
|
||||||
|
|
||||||
|
const toggleSettingPanel = () => {
|
||||||
|
store.commit('setting/toggleSettingPanel', true);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goHome = () => {
|
||||||
|
router.push('/dashboard/base');
|
||||||
|
};
|
||||||
|
|
||||||
|
const active = computed(() => {
|
||||||
|
const route = useRoute();
|
||||||
|
if (!route.path) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
return route.path
|
||||||
|
.split('/')
|
||||||
|
.filter((item, index) => index <= props.maxLevel && index > 0)
|
||||||
|
.map((item) => `/${item}`)
|
||||||
|
.join('');
|
||||||
|
});
|
||||||
|
|
||||||
|
const showMenu = computed(() => !(props.layout === 'mix' && props.showLogo));
|
||||||
|
|
||||||
|
const layoutCls = computed(() => [`${PREFIX}-header-layout`]);
|
||||||
|
|
||||||
|
const menuCls = computed(() => {
|
||||||
|
const { isFixed, layout, isCompact } = props;
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
[`${PREFIX}-header-menu`]: !isFixed,
|
||||||
|
[`${PREFIX}-header-menu-fixed`]: isFixed,
|
||||||
|
[`${PREFIX}-header-menu-fixed-side`]: layout === 'side' && isFixed,
|
||||||
|
[`${PREFIX}-header-menu-fixed-side-compact`]: layout === 'side' && isFixed && isCompact,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const userVisible = ref(false);
|
||||||
|
const userVisibleChange = (value: boolean) => {
|
||||||
|
userVisible.value = value;
|
||||||
|
};
|
||||||
|
|
||||||
|
const changeCollapsed = () => {
|
||||||
|
store.commit('setting/toggleSidebarCompact');
|
||||||
|
};
|
||||||
|
const isSidebarCompact = computed(() => store.state.setting.isSidebarCompact);
|
||||||
|
|
||||||
|
const handleNav = (url) => {
|
||||||
|
router.push(url);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleLogout = () => {
|
||||||
|
router.push(`/login?redirect=${router.currentRoute.value.fullPath}`);
|
||||||
|
};
|
||||||
|
|
||||||
|
const navToGitHub = () => {
|
||||||
|
window.open('https://github.com/TDesignOteam/tdesign-vue-next-starter');
|
||||||
|
};
|
||||||
|
|
||||||
|
const navToHelper = () => {
|
||||||
|
window.open('http://tdesign.tencent.com/starter/get-started.html');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isSidebarCompact,
|
||||||
|
goHome,
|
||||||
|
toggleSettingPanel,
|
||||||
|
active,
|
||||||
|
showMenu,
|
||||||
|
layoutCls,
|
||||||
|
userVisible,
|
||||||
|
userVisibleChange,
|
||||||
|
menuCls,
|
||||||
|
changeCollapsed,
|
||||||
|
handleNav,
|
||||||
|
handleLogout,
|
||||||
|
navToGitHub,
|
||||||
|
navToHelper,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
@import '@/style/variables.less';
|
||||||
|
|
||||||
|
.@{prefix}-header {
|
||||||
|
&-layout {
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&-menu-fixed {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
z-index: 10;
|
||||||
|
|
||||||
|
&-side {
|
||||||
|
left: 232px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 10;
|
||||||
|
width: auto;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&-compact {
|
||||||
|
left: 64px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-logo-container {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
height: 64px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-logo {
|
||||||
|
width: 32px;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-menu {
|
||||||
|
flex: 1 1 1;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.operations-container {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-right: 12px;
|
||||||
|
|
||||||
|
.t-popup-reference {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-button {
|
||||||
|
margin: 0 8px;
|
||||||
|
&.header-user-btn {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
&.general {
|
||||||
|
margin-right: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-operate-left {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 20px;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.collapsed-icon {
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-logo-container {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 16px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-user-account {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
color: @text-color-primary;
|
||||||
|
.t-icon {
|
||||||
|
margin-left: 4px;
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-menu--light {
|
||||||
|
.header-user-account {
|
||||||
|
color: @text-color-primary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.t-menu--dark {
|
||||||
|
.header-user-account {
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
}
|
||||||
|
.t-button {
|
||||||
|
--ripple-color: var(--td-gray-color-10) !important;
|
||||||
|
&:hover {
|
||||||
|
background: var(--td-gray-color-12) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.operations-dropdown-container-item {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.t-icon {
|
||||||
|
margin-right: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-dropdown__item {
|
||||||
|
.t-dropdown__item__content {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.t-dropdown__item__content__text {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-dropdown__item {
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0px;
|
||||||
|
}
|
||||||
|
&:last-child {
|
||||||
|
.t-dropdown__item {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
207
src/layouts/components/Notice.vue
Normal file
207
src/layouts/components/Notice.vue
Normal file
|
|
@ -0,0 +1,207 @@
|
||||||
|
<template>
|
||||||
|
<t-popup expand-animation placement="bottom-right" trigger="click">
|
||||||
|
<template #content>
|
||||||
|
<div class="header-msg">
|
||||||
|
<div class="header-msg-top">
|
||||||
|
<p>通知</p>
|
||||||
|
<t-button v-if="unreadMsg.length > 0" class="clear-btn" variant="text" theme="primary" @click="setRead('all')"
|
||||||
|
>清空</t-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
<t-list v-if="unreadMsg.length > 0" class="narrow-scrollbar" :split="true">
|
||||||
|
<t-list-item v-for="(item, index) in unreadMsg" :key="index">
|
||||||
|
<div>
|
||||||
|
<p class="msg-content">{{ item.content }}</p>
|
||||||
|
<p class="msg-type">{{ item.type }}</p>
|
||||||
|
</div>
|
||||||
|
<p class="msg-time">{{ item.date }}</p>
|
||||||
|
<template #action>
|
||||||
|
<t-button size="small" variant="outline" @click="setRead('radio', item)"> 设为已读 </t-button>
|
||||||
|
</template>
|
||||||
|
</t-list-item>
|
||||||
|
</t-list>
|
||||||
|
|
||||||
|
<div v-else class="empty-list">
|
||||||
|
<img src="https://tdesign.gtimg.com/pro-template/personal/nothing.png" alt="空" />
|
||||||
|
<p>暂无通知</p>
|
||||||
|
</div>
|
||||||
|
<div class="header-msg-bottom">
|
||||||
|
<t-button
|
||||||
|
v-if="unreadMsg.length > 0"
|
||||||
|
class="header-msg-bottom-link"
|
||||||
|
variant="text"
|
||||||
|
theme="primary"
|
||||||
|
@click="goDetail"
|
||||||
|
>查看全部</t-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<t-badge :count="unreadMsg.length" :offset="[15, 21]">
|
||||||
|
<t-button theme="default" shape="square" variant="text">
|
||||||
|
<t-icon name="mail" />
|
||||||
|
</t-button>
|
||||||
|
</t-badge>
|
||||||
|
</t-popup>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, computed } from 'vue';
|
||||||
|
import { useRouter } from 'vue-router';
|
||||||
|
import { useStore } from 'vuex';
|
||||||
|
import { NotificationItem } from '@/interface';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
setup() {
|
||||||
|
const store = useStore();
|
||||||
|
const { msgData } = store.state.notification;
|
||||||
|
|
||||||
|
const unreadMsg = computed(() => store.getters['notification/unreadMsg']);
|
||||||
|
|
||||||
|
const setRead = (type: string, item?: NotificationItem) => {
|
||||||
|
const changeMsg = msgData;
|
||||||
|
if (type === 'all') {
|
||||||
|
changeMsg.forEach((e: NotificationItem) => {
|
||||||
|
e.status = false;
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
changeMsg.forEach((e: NotificationItem) => {
|
||||||
|
if (e.id === item?.id) {
|
||||||
|
e.status = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
store.commit('notification/setMsgData', changeMsg);
|
||||||
|
};
|
||||||
|
|
||||||
|
const goDetail = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
router.push('/detail/secondary');
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
goDetail,
|
||||||
|
unreadMsg,
|
||||||
|
setRead,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
@import '@/style/variables.less';
|
||||||
|
|
||||||
|
.header-msg {
|
||||||
|
width: 400px;
|
||||||
|
height: 500px;
|
||||||
|
|
||||||
|
.empty-list {
|
||||||
|
height: calc(100% - 104px);
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 135px;
|
||||||
|
font-size: 14px;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 63px;
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin-top: 30px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-top {
|
||||||
|
position: relative;
|
||||||
|
height: 56px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: @text-color-primary;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 56px;
|
||||||
|
border-bottom: 1px solid @component-border;
|
||||||
|
|
||||||
|
.clear-btn {
|
||||||
|
position: absolute;
|
||||||
|
top: 12px;
|
||||||
|
right: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&-bottom {
|
||||||
|
height: 48px;
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&-link {
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
color: @brand-color;
|
||||||
|
line-height: 48px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-list {
|
||||||
|
height: calc(100% - 104px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-list-item {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
padding: 16px 24px;
|
||||||
|
border-radius: @border-radius;
|
||||||
|
font-size: 14px;
|
||||||
|
color: @text-color-primary;
|
||||||
|
line-height: 22px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transition: background 0.2s ease;
|
||||||
|
background: @bg-color-container-hover;
|
||||||
|
|
||||||
|
.msg-content {
|
||||||
|
color: @brand-color-8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-list-item__action {
|
||||||
|
button {
|
||||||
|
bottom: 16px;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-time {
|
||||||
|
bottom: -6px;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-content {
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-type {
|
||||||
|
color: @text-color-secondary;
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-list-item__action {
|
||||||
|
button {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 24px;
|
||||||
|
bottom: -6px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.msg-time {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
opacity: 1;
|
||||||
|
position: absolute;
|
||||||
|
right: 24px;
|
||||||
|
bottom: 16px;
|
||||||
|
color: @text-color-secondary;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
113
src/layouts/components/Search.vue
Normal file
113
src/layouts/components/Search.vue
Normal file
|
|
@ -0,0 +1,113 @@
|
||||||
|
<template>
|
||||||
|
<div v-if="layout === 'side'" class="header-menu-search">
|
||||||
|
<t-input
|
||||||
|
:class="{ 'hover-active': isSearchFocus }"
|
||||||
|
placeholder="请输入搜索内容"
|
||||||
|
@blur="changeSearchFocus(false)"
|
||||||
|
@focus="changeSearchFocus(true)"
|
||||||
|
>
|
||||||
|
<template #prefix-icon>
|
||||||
|
<t-icon class="icon" name="search" size="16" />
|
||||||
|
</template>
|
||||||
|
</t-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else>
|
||||||
|
<t-button
|
||||||
|
:class="{ 'search-icon-hide': isSearchFocus }"
|
||||||
|
theme="default"
|
||||||
|
shape="square"
|
||||||
|
variant="text"
|
||||||
|
@click="changeSearchFocus(true)"
|
||||||
|
>
|
||||||
|
<t-icon name="search" />
|
||||||
|
</t-button>
|
||||||
|
<t-input
|
||||||
|
v-model="searchData"
|
||||||
|
:class="['header-search', { 'width-zero': !isSearchFocus }]"
|
||||||
|
placeholder="输入要搜索内容"
|
||||||
|
:autofocus="isSearchFocus"
|
||||||
|
@blur="changeSearchFocus(false)"
|
||||||
|
>
|
||||||
|
<template #prefix-icon>
|
||||||
|
<t-icon name="search" size="16" />
|
||||||
|
</template>
|
||||||
|
</t-input>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, ref, PropType } from 'vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
props: {
|
||||||
|
layout: {
|
||||||
|
type: String as PropType<string>,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
setup() {
|
||||||
|
const isSearchFocus = ref(false);
|
||||||
|
const searchData = ref('');
|
||||||
|
const changeSearchFocus = (value: boolean) => {
|
||||||
|
if (!value) {
|
||||||
|
searchData.value = '';
|
||||||
|
}
|
||||||
|
isSearchFocus.value = value;
|
||||||
|
};
|
||||||
|
return {
|
||||||
|
isSearchFocus,
|
||||||
|
searchData,
|
||||||
|
changeSearchFocus,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style lang="less">
|
||||||
|
@import '@/style/variables.less';
|
||||||
|
|
||||||
|
.header-menu-search {
|
||||||
|
display: flex;
|
||||||
|
margin-left: 16px;
|
||||||
|
.hover-active {
|
||||||
|
.t-input__inner {
|
||||||
|
background: @bg-color-secondarycontainer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.t-icon {
|
||||||
|
font-size: 20px !important;
|
||||||
|
color: @text-color-primary !important;
|
||||||
|
}
|
||||||
|
.t-input__inner {
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
box-shadow: none;
|
||||||
|
transform: background @anim-duration-base linear;
|
||||||
|
&:hover {
|
||||||
|
background: @bg-color-secondarycontainer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-search {
|
||||||
|
width: 200px;
|
||||||
|
transition: width @anim-duration-base @anim-time-fn-easing;
|
||||||
|
.t-input__inner {
|
||||||
|
border: 0;
|
||||||
|
padding-left: 40px;
|
||||||
|
&:focus {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.width-zero {
|
||||||
|
width: 0;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.t-button {
|
||||||
|
transition: opacity @anim-duration-base @anim-time-fn-easing;
|
||||||
|
}
|
||||||
|
.search-icon-hide {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user