bonus
/
mallBackend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

导航封装

This commit is contained in:
13218645326 2023-12-03 15:48:43 +08:00
parent 200959cf2a
commit dcb91bcbb0
19 changed files with 139 additions and 252 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components.d.ts vendored
View File

@ -16,8 +16,10 @@ declare module 'vue' {
ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
ElTag: typeof import('element-plus/es')['ElTag']
Header: typeof import('./src/components/header.vue')['default']
HeaderTop: typeof import('./src/components/headerTop.vue')['default']
HeaderNav: typeof import('./src/components/headerCom/headerNav.vue')['default']
HeaderTop: typeof import('./src/components/headerCom/headerTop.vue')['default']
MenuItem: typeof import('./src/components/comNav/sideBar/menuItem.vue')['default']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']

9
src/components/comNav/index.vue
View File

@ -8,7 +8,8 @@
<script setup lang="ts">
import {list } from "router/routerData"
import subMenu from './sideBar/subMenu.vue';
import {comNavStore} from "store/comNav"
const navStore = comNavStore()
const routes = useRoute()
const router = useRouter()
const menuInfo:any = reactive({
@ -24,18 +25,20 @@ import subMenu from './sideBar/subMenu.vue';
isCustomLink:true,
customLinkCallBack:(ev:any)=>{
console.log("customLinkCallBack",ev)
if(ev.startsWith('staticDefault')){
if(ev.title.startsWith('staticDefault')){
return
}
router.push({
name:ev
name:ev.path
})
navStore.addNavTarget(ev)
}
})
onMounted(()=>{
console.log("routes",router.getRoutes())
// initRouteList()
menuInfo.defaultOpeneds.push()
})

6
src/components/comNav/sideBar/menuItem.vue
View File

@ -1,7 +1,7 @@
<template>
<template v-for="item in props.menuList" :key="item.path">
<template v-for="(item) in props.menuList" :key="item.path">
<el-sub-menu :index="item.name" v-if="item.children && item.children.length > 0">
<el-sub-menu :index="item.name+'&&'+item.meta.title" v-if="item.children && item.children.length > 0">
<template #title v-if="item.meta.icon">
<el-icon>
<Edit />
@ -11,7 +11,7 @@
<template #title v-else>{{ item.meta.title }}</template>
<menuItem :menuList="(item.children as any)" />
</el-sub-menu>
<el-menu-item :index="item.name" v-else >
<el-menu-item :index="item.name+'&&'+item.meta.title" v-else @click="handleSelectItem(item)">
<template v-if="item.meta.icon">
<el-icon >
<Search/> </el-icon>

11
src/components/comNav/sideBar/subMenu.vue
View File

@ -2,8 +2,8 @@
<el-menu :collapse="props.collapse" :background-color="props.backgroundColor" :text-color="props.textColor"
:active-text-color="props.activeTextColor" :default-active="props.defaultActive"
:default-openeds="props.defaultOpeneds" :unique-opened="props.uniqueOpened" :menu-trigger="props.menuTrigger"
:router="props.router" :collapse-transition="props.collapseTransition" :popper-effect="props.popperEffect" @select="customLinkCallBackFn">
<menuItem :menuList="props.menuList" :isCustomLink="props.isCustomLink" >
:router="props.router" :collapse-transition="props.collapseTransition" :popper-effect="props.popperEffect" @select="customLinkCallBackFn" >
<menuItem :menuList="props.menuList" :isCustomLink="props.isCustomLink" >
</menuItem>
</el-menu>
</template>
@ -72,7 +72,12 @@ const props: any = defineProps({
const customLinkCallBackFn =(ev:any)=>{
console.log("2342423",ev)
props.customLinkCallBack(ev)
const current = ev.split("&&")
let currentItem = {
title:current[1],
path:current[0]
}
props.customLinkCallBack(currentItem)
}
</script>

34
src/components/headerCom/headerNav.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<div class="nav_out">
<el-tag v-for="(tag,index) in navStore.topNavList" :key="tag.name" size="large" closable :type="tag.type" @close="closeNavTagFn(index)" @click="TapNavTagFn(tag)" class="navItem">
{{ tag.title }}
</el-tag>
</div>
</template>
<script setup lang="ts">
import {comNavStore} from "store/comNav"
const router = useRouter()
const navStore = comNavStore()
const closeNavTagFn =(index:any)=>{
navStore.deleteNavTarget(index)
}
const TapNavTagFn=(tag:any)=>{
router.push({
name:tag.path
})
}
</script>
<style scoped lang="scss">
.nav_out{
height: 48px;
box-shadow: 0px 0px 12px rgba(0, 0, 0, .12);
display: flex;
align-items: center;
}
.navItem{
margin-right:8px;
}
</style>

2
src/components/headerTop.vue → src/components/headerCom/headerTop.vue
View File

@ -22,11 +22,13 @@
</div>
</div>
</div>
</template>
<script setup lang="ts">
</script>
<style lang="scss" scoped>

6
src/main.ts
View File

@ -1,19 +1,17 @@
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import 'element-plus/dist/index.css'
import App from './App.vue'
import router from './router'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import pinia from "./store"
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app.use(createPinia())
app.use(router)
app.use(pinia)
app.mount('#app')

2
src/router/routerData.ts
View File

@ -1,4 +1,4 @@
export const list = [
export const list:any = [
{
name: "staticDefault_PathParent",
path: 'staticDefault_PathParent',

38
src/store/comNav.ts Normal file
View File

@ -0,0 +1,38 @@
export const comNavStore = defineStore('main_com_nav', {
state: () => {
return {
topNavList: [] as any, //loading控制,
maxNavCount: 5
}
},
getters: {},
actions: {
addNavTarget(ev:any) {
console.log("topNavList",this.topNavList)
if(!this.topNavList.map((ele:any)=>ele.path).includes(ev.path)){
this.topNavList.push(ev)
}
},
deleteNavTarget(index:any) {
if(this.topNavList.length>0){
this.topNavList.splice(index,1)
}
},
clearTarget(val: any) {
this.topNavList=[]
}
},
persist: {
enabled: true, // 开启数据缓存
strategies: [
{
// 自定义存储的 key，默认是 store.$id
key: 'main_com_nav',
storage: localStorage, //缓存模式 可选 localStorage sessionStorage
// state 中的字段名，按组打包储存
paths: ['topNavList'] //需要缓存的字段 与 state中相关联
}
]
}
})

2
src/store/myInfo.ts
View File

@ -21,7 +21,7 @@ export const useStore = defineStore('myInfo', {
{
// 自定义存储的 key，默认是 store.$id
key: 'userName',
storage: localStorage, //缓存模式 可选 localStorage sessionStorage
storage: sessionStorage, //缓存模式 可选 localStorage sessionStorage
// state 中的字段名，按组打包储存
paths: ['userName'] //需要缓存的字段 与 state中相关联
}

3
src/style/scss/variable.scss
View File

@ -1,2 +1,5 @@
$main-color: #3fb9f7;
$second-color: #666;
$headerTopHeight:72px;

62
src/views/AppMain.vue
View File

@ -1,50 +1,62 @@
<template>
<div class="view_home">
<div class="main_top">
<headerTop></headerTop>
</div>
<div class="main_">
<div class="main_nav">
<comNav></comNav>
<div class="view_home">
<div class="main_top">
<headerTop></headerTop>
</div>
<div class="main_content">
<RouterView />
<div class="main_">
<div class="main_nav">
<comNav></comNav>
</div>
<div class="main_content">
<headerNav></headerNav>
<RouterView />
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import comNav from 'components/comNav/index.vue';
import headerTop from 'components/headerTop.vue';
import headerTop from 'components/headerCom/headerTop.vue';
import headerNav from "components/headerCom/headerNav.vue"
</script>
<style scoped lang="scss">
.view_home{
.view_home {
display: flex;
flex-direction: column;
width: 100vw;
height: 100vh;
.main_top{
height: 72px;
.main_top {
height: $headerTopHeight;
}
.main_{
.main_ {
flex: 1;
display: flex;
justify-content: space-between;
.main_nav{
overflow: auto;
.main_nav {
width: 240px;
}
.main_content{
flex: 1;
background-color:pink;
.main_content {
border-left: 1px solid $second-color;
width: 100%;
overflow-y: auto;
height: calc(100% - var($headerTopHeight) - 48px);
&::-webkit-scrollbar {
width: 2px;
}
&::-webkit-scrollbar-thumb{
height: 6px;
width: 2px;
background-color: $main-color;
}
}
}
}
</style>

56
src/views/Index.vue
View File

@ -1,56 +0,0 @@
<template>
<div>
<div
class="pathItem"
v-for="(item, index) in routeList.list"
:key="index"
@click="toPage(item)"
>
{{ item.name }}
</div>
</div>
</template>
<script setup lang="ts">
const router = useRouter()
const routeList = reactive({
list: [
{
name: 'vant-scss演示',
path: 'vantTest'
},
{
name: '时间测试',
path: 'timeTest'
},
{
name: '全局事件 mitt 演示',
path: 'mittTest'
},
{
name: 'pinia演示',
path: 'piniaTest'
},
{
name: '路由演示',
path: 'piniaTest'
}
]
})
/* eslint-disable @typescript-eslint/no-explicit-any */
const toPage = (item: any) => {
router.push({ name: item.path })
}
</script>
<style scoped lang="scss">
// @mixin fontStyle($size,$color,$weight,$lineH,$align) {
// @mixin flexStyle($js,$al,$dir,$wrap){
.pathItem {
@include fontStyle(48px, green, bold, 80px, center);
@include wh(750px, 80px);
margin-bottom: 12px;
}
</style>

2
src/views/configuration/swiperConfig.vue
View File

@ -1,5 +1,5 @@
<template>
<div>
<div style="width: 100%;height: 520vh;">
</div>
</template>

9
src/views/test/Index.vue
View File

@ -1,9 +0,0 @@
<template>
<div>
</div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss"></style>

33
src/views/test/MittTest.vue
View File

@ -1,33 +0,0 @@
<template>
<button @click="testFn">全局事件测试</button>
</template>
<script lang="ts" setup>
import bus from 'utils/bus'
onBeforeMount(() => {
console.log('onBeforeMount')
})
onMounted(() => {
console.log('onMounted')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount')
})
onUnmounted(() => {
console.log('onUnmounted')
})
let a = computed(() => {
return 'aaa'
})
console.log(a)
const testFn = () => {
console.log('测试')
bus.emit('sendMsg', '666')
}
</script>
<style scoped></style>

31
src/views/test/PiniaTest.vue
View File

@ -1,31 +0,0 @@
<template>
<div class="test">
<h1>测试--</h1>
<!-- {{ mainStore.text }} -->
</div>
<button @click="changeTextFn">修改</button>
</template>
<script lang="ts" setup>
// import { useStore } from 'store/main'
// const mainStore = useStore()
// mainStore.text
const changeTextFn = () => {
// mainStore.text="999"
// mainStore.$patch((state)=>{
// state.text = "何以皆有，唯有杜康"
// })
// 或者
// mainStore.$patch({
// text: '55555555'
// })
}
let a = '6666'
console.log(a)
</script>
<style scoped lang="scss">
.test {
color: $main-color;
}
</style>

32
src/views/test/RouterTest.vue
View File

@ -1,32 +0,0 @@
<template>
<h1>路由</h1>
<button @click="toPage">路由测试</button>
</template>
<script lang="ts" setup>
const router = useRouter()
onBeforeMount(() => {
console.log('onBeforeMount')
})
onMounted(() => {
console.log('onMounted')
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount')
})
onUnmounted(() => {
console.log('onUnmounted')
})
let a = computed(() => {
return 'aaa'
})
console.log(a)
const toPage = () => {
router.push({ name: 'piniaTest' })
}
</script>
<style scoped></style>

49
src/views/test/TimeTest.vue
View File

@ -1,49 +0,0 @@
<template>
<h1>我是时间测试</h1>
<van-button type="primary" @click="toastFn">6666</van-button>
</template>
<script lang="ts" setup>
/* eslint-disable @typescript-eslint/no-explicit-any */
import moment from 'moment'
import bus from 'utils/bus'
const { proxy } = getCurrentInstance() as any
onBeforeMount(() => {
console.log('onBeforeMount')
})
onMounted(() => {
bus.on('sendMsg', getMsg)
console.log('63666', moment().format('YYYY年MM月DD日'))
let currentTime = moment('2019-02-03 12:24:36').format(
'YYYY年MM月DD日 HH时mm分ss秒'
)
console.log('currentTime', currentTime)
let diff = moment('2020-08-09').diff(moment('2020-07-08'), 'days')
console.log(diff)
let firstTime = moment().startOf('month').format('YYYY-MM-DD')
console.log('firstTime', firstTime)
})
onBeforeUnmount(() => {
console.log('onBeforeUnmount')
})
onUnmounted(() => {
console.log('onUnmounted')
})
let a = computed(() => {
return 'aaa'
})
console.log(a)
const getMsg = (val: string) => {
console.log('val', val)
}
const toastFn = () => {
proxy.$toast('6666')
}
</script>
<style scoped></style>