Skip to content

C
common-templete
Commit 199152a0 by tangqy
Options

调整

parent c0eceec1
Showing with 99 additions and 109 deletions
src/components/Sidebar/index.vue
......@@ -4,7 +4,7 @@
.sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
.logo
img(':src'="logo")
.item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMainMenuIndex === itemIndex}")
.item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:firstIndex === itemIndex}")
sidebar-item&attributes({
':icon':'item.ico',
':link':'item.link',
......@@ -20,7 +20,6 @@
.children-item
el-menu&attributes({
'ref':"menu",
'default-active':"2",
'class':"el-menu-vertical",
'background-color':"#374A5E",
'text-color':"#fff",
......@@ -56,7 +55,10 @@ export default {
logo,
// unfold: false, // 水平展开
unfoldBtn: false, // 展开按钮
currentMainMenuIndex: 0, //mainIndex
firstIndex: 0,
secondIndex: 0,
thirdIndex: 0,
currentMenus: []
}
},
filters: {
......@@ -77,47 +79,25 @@ export default {
currentPath: 'getCurrentPath',
project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}),
currentMenusIndex() {
let res = -1
if (this.currentPath && this.currentPath.length) {
res = this.currentPath[0]
this.$nextTick(() => {
this.handleOpen()
})
}
return res
},
currentMenus: {
get() {
// const currentIndex = this.currentMenusIndex
const currentIndex = this.currentMainMenuIndex
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => {
if (this.currentMenus) {
this.handleOpen()
// console.log('---', this.currentMenus)
}
})
return currentMenus
},
},
},
mounted() {},
methods: {
handleOpen() {
const currentIndexPath = [this.firstIndex, this.secondIndex, this.thirdIndex]
console.log(currentIndexPath)
const menus = this.$refs.menu
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0
console.log('openIndex', openIndex)
menus.open(openIndex)
console.log(menus)
this.$nextTick(() => {
if (currentIndexPath.join('-') === this.currentPath.join('-')) {
menus.open(this.secondIndex)
console.log('open')
} else {
menus.close(this.secondIndex)
console.log('close')
}
})
},
// calcRouter(menus) {
// const currentRoute = location.href
// const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
// this.selectIndexPath = indexPath
// console.log(this.selectIndexPath)
// },
// 隐藏边侧栏，边侧栏最小化
handerNoSidebar() {
console.log('handerNoSidebar')
......@@ -127,7 +107,9 @@ export default {
* 选择边测菜单主菜单
*/
choseMenu(selectItem, selectItemIndex) {
this.currentMainMenuIndex = selectItemIndex
console.log('--', selectItem, selectItemIndex)
this.firstIndex = selectItemIndex
console.log('current', this.firstIndex)
if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true)
}
......@@ -148,10 +130,10 @@ export default {
**/
selectItemMenu(item) {
console.log(item)
const currentMenusIndex = this.currentMenusIndex
if (currentMenusIndex > -1) {
const firstIndex = this.firstIndex
if (firstIndex > -1) {
const [idx1, idx2] = item.split('-').reverse()
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name
const historyItemName = this.menus[firstIndex].children[idx1].children[idx2].name
const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
const storeId = this.project.store_id
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId)
......@@ -160,7 +142,7 @@ export default {
menuHistoryJson.push({
name: historyItemName,
time,
index: `${(currentMenusIndex, idx1, idx2)}`,
index: `${(firstIndex, idx1, idx2)}`,
})
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
crossStorage.onConnect().then(function() {
......@@ -192,6 +174,23 @@ export default {
},
...mapActions(['setSidebarUnfold']),
},
watch: {
firstIndex(val) {
this.currentMenus = this.getCurrentMenus(val)
this.$nextTick(() => {
this.handleOpen()
})
},
currentPath (val) {
if (val.length) {
const [first, second, third] = [...val]
this.firstIndex = first
this.secondIndex = second
this.thirdIndex = third
}
console.log('currentPath is %o',val)
}
}
}
</script>
<style lang="stylus" scoped>
......
src/components/Sidebar/index1.vue
......@@ -4,7 +4,7 @@
.sidebar('@mouseover'="showUnfoldBtn()",'@mouseout'="hiddenUnfoldBtn()")
.logo
img(':src'="logo")
.item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(item,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
.item('v-if'="menus.length",'v-for'="(item,itemIndex) in menus" ,':key'="item.id",'@click'='choseMenu(data,itemIndex)',':class'="{active:currentMenusIndex === itemIndex}")
sidebar-item&attributes({
':icon':'item.ico',
':link':'item.link',
......@@ -42,15 +42,15 @@
import { mapGetters, mapActions } from 'vuex'
import { calcIndexPathByCurrentRouter } from '@/utils'
import sidebarItem from '../sidebarItem'
const CrossStorageClient = require('cross-storage').CrossStorageClient
const CrossStorageClient = require('cross-storage').CrossStorageClient;
const crmDomain = location.hostname
const crossStorage = new CrossStorageClient(`${crmDomain}/hub.jsp`, {
timeout: 5000,
frameId: 'storageFrame',
})
frameId: 'storageFrame'
});
const logo = require('@/assets/images/sidebar/logo-blue.png')
export default {
data() {
data () {
return {
collapse: false,
logo,
......@@ -59,36 +59,28 @@ export default {
}
},
filters: {
toString(value) {
toString (value) {
return value + ''
},
pipeString(...args) {
pipeString (...args) {
return args.join('-')
},
}
},
components: {
sidebarItem,
sidebarItem
},
computed: {
...mapGetters({
menus: 'getMenus',
currentPath: 'getCurrentPath',
project: 'getProjectInfo',
sidebarUnfoldInfo: 'getSidebarUnfoldInfo',
}),
currentMenusIndex() {
let res = -1
if (this.currentPath && this.currentPath.length) {
res = this.currentPath[0]
this.$nextTick(() => {
this.handleOpen()
})
}
return res
currentMenusIndex () {
return (this.selectIndexPath && this.selectIndexPath.length) ? this.selectIndexPath[0] : -1
},
currentMenus: {
get() {
get () {
const currentIndex = this.currentMenusIndex
const currentMenus = currentIndex === -1 ? this.getCurrentMenus(0) : this.getCurrentMenus(currentIndex)
this.$nextTick(() => {
......@@ -97,34 +89,35 @@ export default {
}
})
return currentMenus
}
},
calc () {
const hasMenus = this.menus && this.menus.length
if (hasMenus ) {
this.calcRouter(this.menus)
}
return hasMenus
}
},
mounted () {
},
mounted() {},
methods: {
handleOpen() {
handleOpen () {
const menus = this.$refs.menu
const openIndex = this.currentPath.length === 3 ? this.currentPath[1] : 0
const openIndex = (this.selectIndexPath.length === 3) ? this.selectIndexPath[1] : 0
menus.open(openIndex)
},
calcRouter(menus) {
const currentRoute = location.href
const indexPath = calcIndexPathByCurrentRouter(menus, currentRoute)
this.selectIndexPath = indexPath
console.log(this.selectIndexPath)
},
// 隐藏边侧栏，边侧栏最小化
handerNoSidebar() {
handerNoSidebar () {
console.log('handerNoSidebar')
this.setSidebarUnfold(false)
},
/**
* 选择边测菜单主菜单
*/
choseMenu(selectItem, selectItemIndex) {
console.log('--', selectItem, selectItemIndex)
choseMenu (selectItem, selectItemIndex) {
this.currentMenusIndex = selectItemIndex
console.log('current', this.currentMenusIndex)
if (!this.sidebarUnfoldInfo) {
this.toggleUnfold(true)
}
......@@ -132,10 +125,10 @@ export default {
/**
* 二级菜单
**/
choseChildrenItem(item) {
choseChildrenItem (item) {
if (item.link) {
this.$router.push({
path: `/${item.link}`,
path: `/${item.link}`
})
}
},
......@@ -143,7 +136,7 @@ export default {
* 三级菜单
* @param args
**/
selectItemMenu(item) {
selectItemMenu (item) {
console.log(item)
const currentMenusIndex = this.currentMenusIndex
if (currentMenusIndex > -1) {
......@@ -151,21 +144,19 @@ export default {
const historyItemName = this.menus[currentMenusIndex].children[idx1].children[idx2].name
const time = this.$moment().format('YYYY-MM-DD hh:mm:ss')
const storeId = this.project.store_id
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId)
? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId))
: []
const menuHistoryJson = localStorage.getItem('menuHistoryJson' + storeId) ? JSON.parse(localStorage.getItem('menuHistoryJson' + storeId)) : [];
menuHistoryJson.push({
name: historyItemName,
time,
index: `${(currentMenusIndex, idx1, idx2)}`,
index:`${currentMenusIndex,idx1,idx2}`
})
localStorage.setItem('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
crossStorage.onConnect().then(function() {
return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson))
return crossStorage.set('menuHistoryJson' + storeId, JSON.stringify(menuHistoryJson));
})
}
},
toggleUnfold(...args) {
toggleUnfold (...args) {
console.log(args)
if (!args.length) {
this.setSidebarUnfold(!this.sidebarUnfoldInfo)
......@@ -173,31 +164,31 @@ export default {
this.setSidebarUnfold(args[0])
}
},
hiddenUnfoldBtn() {
hiddenUnfoldBtn () {
this.unfoldBtn = false
},
showUnfoldBtn() {
showUnfoldBtn () {
this.unfoldBtn = true
},
choseSubChildren(item) {
choseSubChildren (item) {
this.$router.push({
path: `/${item.link}`,
path: `/${item.link}`
})
},
getCurrentMenus(index) {
getCurrentMenus (index) {
return this.menus[index]
},
...mapActions(['setSidebarUnfold']),
},
...mapActions(['setSidebarUnfold'])
}
}
</script>
<style lang="stylus" scoped>
.sidebar-wrapper
.sidebar-wrapper
position relative
height 100px
display inline-block
z-index 100
.sidebar
.sidebar
position fixed
left 0
top 0
......@@ -212,7 +203,7 @@ export default {
content ''
background #2A3F54
z-index -1
.arrow-tip
.arrow-tip
position absolute
top 50%
width 48px
......@@ -220,7 +211,7 @@ export default {
line-height 48px
border-radius 50%
text-align center
background-color rgba(55, 74, 94, 0.5)
background-color rgba(55, 74, 94, .5)
transform translateX(-50%)
transition all 0.2s
cursor pointer
......@@ -229,22 +220,22 @@ export default {
left 70px
&.left-ll
left 240px
.icon-arrow
.icon-arrow
display inline-block
margin-left 15px
width 8px
&.right
transform rotateY(180deg)
.control
.control
visibility hidden
height 100px
&.close
width 70px
transition width ease-in-out 0.2s
transition width ease-in-out .2s
&.open
width 240px
transition width ease-in-out 0.2s
.logo
transition width ease-in-out .2s
.logo
text-overflow ellipsis
overflow hidden
font-weight 400
......@@ -259,14 +250,14 @@ export default {
padding-top 5px
img
width 60px
.item
.item
position relative
display block
cursor pointer
text-align center
& + &
margin-bottom 6px
.active::after
.active::after
display block
content ''
background #1ABB9C
......@@ -275,7 +266,7 @@ export default {
right 0
top 10px
height 47px
.childrens-meuns
.childrens-meuns
position absolute
top 0
left 70px
......@@ -287,19 +278,19 @@ export default {
.children-item
text-align left
margin-bottom 6px
.el-menu
.el-menu
border-right none
.el-submenu .el-menu-item
min-width auto
.el-menu-item
.el-menu-item
position relative
padding 0 10px 0 36px
padding: 0 10px 0 36px
box-sizing border-box
&::before
box-sizing border-box
background #425668
bottom auto
content ''
content ""
height 9px
left 18px
margin-top 20px
......@@ -312,11 +303,11 @@ export default {
box-sizing border-box
border-left 1px solid #425668
bottom 0
content ''
content ""
left 22px
position absolute
top 0
.menu-item-name
.menu-item-name
position relative
display block
font-weight 400
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment