Skip to content

Commit 274784c

Browse files
sendyasendya
committed
fix(package): vue-cropper, move menu jsx
1 parent 185d31a commit 274784c

File tree

8 files changed

+189
-183
lines changed

8 files changed

+189
-183
lines changed

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
"viser-vue": "^2.3.3",
2323
"vue": "^2.5.22",
2424
"vue-clipboard2": "^0.2.1",
25-
"vue-cropper": "^0.4.4",
25+
"vue-cropper": "0.4.4",
2626
"vue-ls": "^3.2.0",
2727
"vue-router": "^3.0.1",
2828
"vue-svg-component-runtime": "^1.0.1",

‎src/components/menu/index.js

Lines changed: 2 additions & 171 deletions
Original file line numberDiff line numberDiff line change
@@ -1,171 +1,2 @@
1-
import Menu from 'ant-design-vue/es/menu'
2-
import Icon from 'ant-design-vue/es/icon'
3-
4-
const { Item, SubMenu } = Menu
5-
6-
export default {
7-
name: 'SMenu',
8-
props: {
9-
menu: {
10-
type: Array,
11-
required: true
12-
},
13-
theme: {
14-
type: String,
15-
required: false,
16-
default: 'dark'
17-
},
18-
mode: {
19-
type: String,
20-
required: false,
21-
default: 'inline'
22-
},
23-
collapsed: {
24-
type: Boolean,
25-
required: false,
26-
default: false
27-
}
28-
},
29-
data () {
30-
return {
31-
openKeys: [],
32-
selectedKeys: [],
33-
cachedOpenKeys: []
34-
}
35-
},
36-
computed: {
37-
rootSubmenuKeys: vm => {
38-
const keys = []
39-
vm.menu.forEach(item => keys.push(item.path))
40-
return keys
41-
}
42-
},
43-
created () {
44-
this.updateMenu()
45-
},
46-
watch: {
47-
collapsed (val) {
48-
if (val) {
49-
this.cachedOpenKeys = this.openKeys.concat()
50-
this.openKeys = []
51-
} else {
52-
this.openKeys = this.cachedOpenKeys
53-
}
54-
},
55-
$route: function () {
56-
this.updateMenu()
57-
}
58-
},
59-
methods: {
60-
// select menu item
61-
onOpenChange (openKeys) {
62-
// 在水平模式下时执行，并且不再执行后续
63-
if (this.mode === 'horizontal') {
64-
this.openKeys = openKeys
65-
return
66-
}
67-
// 非水平模式时
68-
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
69-
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
70-
this.openKeys = openKeys
71-
} else {
72-
this.openKeys = latestOpenKey ? [latestOpenKey] : []
73-
}
74-
},
75-
updateMenu () {
76-
const routes = this.$route.matched.concat()
77-
78-
if (routes.length >= 4 && this.$route.meta.hidden) {
79-
routes.pop()
80-
this.selectedKeys = [routes[2].path]
81-
} else {
82-
this.selectedKeys = [routes.pop().path]
83-
}
84-
85-
const openKeys = []
86-
if (this.mode === 'inline') {
87-
routes.forEach(item => {
88-
openKeys.push(item.path)
89-
})
90-
}
91-
92-
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
93-
},
94-
95-
// render
96-
renderItem (menu) {
97-
if (!menu.hidden) {
98-
return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
99-
}
100-
return null
101-
},
102-
renderMenuItem (menu) {
103-
const target = menu.meta.target || null
104-
const props = {
105-
to: { name: menu.name },
106-
target: target
107-
}
108-
return (
109-
<Item {...{ key: menu.path }}>
110-
<router-link {...{ props }}>
111-
{this.renderIcon(menu.meta.icon)}
112-
<span>{menu.meta.title}</span>
113-
</router-link>
114-
</Item>
115-
)
116-
},
117-
renderSubMenu (menu) {
118-
const itemArr = []
119-
if (!menu.hideChildrenInMenu) {
120-
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
121-
}
122-
return (
123-
<SubMenu {...{ key: menu.path }}>
124-
<span slot="title">
125-
{this.renderIcon(menu.meta.icon)}
126-
<span>{menu.meta.title}</span>
127-
</span>
128-
{itemArr}
129-
</SubMenu>
130-
)
131-
},
132-
renderIcon (icon) {
133-
if (icon === 'none' || icon === undefined) {
134-
return null
135-
}
136-
const props = {}
137-
typeof (icon) === 'object' ? props.component = icon : props.type = icon
138-
return (
139-
<Icon {... { props } }/>
140-
)
141-
}
142-
},
143-
render () {
144-
const { mode, theme, menu } = this
145-
const props = {
146-
mode: mode,
147-
theme: theme,
148-
openKeys: this.openKeys
149-
}
150-
const on = {
151-
select: obj => {
152-
this.selectedKeys = obj.selectedKeys
153-
this.$emit('select', obj)
154-
},
155-
openChange: this.onOpenChange
156-
}
157-
158-
const menuTree = menu.map(item => {
159-
if (item.hidden) {
160-
return null
161-
}
162-
return this.renderItem(item)
163-
})
164-
// {...{ props, on: on }}
165-
return (
166-
<Menu vModel={this.selectedKeys} {...{ props, on: on }}>
167-
{menuTree}
168-
</Menu>
169-
)
170-
}
171-
}
1+
import SMenu from './menu'
2+
export default SMenu

‎src/components/menu/menu.js

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
import Menu from 'ant-design-vue/es/menu'
2+
import Icon from 'ant-design-vue/es/icon'
3+
4+
const { Item, SubMenu } = Menu
5+
6+
export default {
7+
name: 'SMenu',
8+
props: {
9+
menu: {
10+
type: Array,
11+
required: true
12+
},
13+
theme: {
14+
type: String,
15+
required: false,
16+
default: 'dark'
17+
},
18+
mode: {
19+
type: String,
20+
required: false,
21+
default: 'inline'
22+
},
23+
collapsed: {
24+
type: Boolean,
25+
required: false,
26+
default: false
27+
}
28+
},
29+
data () {
30+
return {
31+
openKeys: [],
32+
selectedKeys: [],
33+
cachedOpenKeys: []
34+
}
35+
},
36+
computed: {
37+
rootSubmenuKeys: vm => {
38+
const keys = []
39+
vm.menu.forEach(item => keys.push(item.path))
40+
return keys
41+
}
42+
},
43+
created () {
44+
this.updateMenu()
45+
},
46+
watch: {
47+
collapsed (val) {
48+
if (val) {
49+
this.cachedOpenKeys = this.openKeys.concat()
50+
this.openKeys = []
51+
} else {
52+
this.openKeys = this.cachedOpenKeys
53+
}
54+
},
55+
$route: function () {
56+
this.updateMenu()
57+
}
58+
},
59+
methods: {
60+
// select menu item
61+
onOpenChange (openKeys) {
62+
// 在水平模式下时执行，并且不再执行后续
63+
if (this.mode === 'horizontal') {
64+
this.openKeys = openKeys
65+
return
66+
}
67+
// 非水平模式时
68+
const latestOpenKey = openKeys.find(key => !this.openKeys.includes(key))
69+
if (!this.rootSubmenuKeys.includes(latestOpenKey)) {
70+
this.openKeys = openKeys
71+
} else {
72+
this.openKeys = latestOpenKey ? [latestOpenKey] : []
73+
}
74+
},
75+
updateMenu () {
76+
const routes = this.$route.matched.concat()
77+
78+
if (routes.length >= 4 && this.$route.meta.hidden) {
79+
routes.pop()
80+
this.selectedKeys = [routes[2].path]
81+
} else {
82+
this.selectedKeys = [routes.pop().path]
83+
}
84+
85+
const openKeys = []
86+
if (this.mode === 'inline') {
87+
routes.forEach(item => {
88+
openKeys.push(item.path)
89+
})
90+
}
91+
92+
this.collapsed ? (this.cachedOpenKeys = openKeys) : (this.openKeys = openKeys)
93+
},
94+
95+
// render
96+
renderItem (menu) {
97+
if (!menu.hidden) {
98+
return menu.children && !menu.hideChildrenInMenu ? this.renderSubMenu(menu) : this.renderMenuItem(menu)
99+
}
100+
return null
101+
},
102+
renderMenuItem (menu) {
103+
const target = menu.meta.target || null
104+
const props = {
105+
to: { name: menu.name },
106+
target: target
107+
}
108+
return (
109+
<Item {...{ key: menu.path }}>
110+
<router-link {...{ props }}>
111+
{this.renderIcon(menu.meta.icon)}
112+
<span>{menu.meta.title}</span>
113+
</router-link>
114+
</Item>
115+
)
116+
},
117+
renderSubMenu (menu) {
118+
const itemArr = []
119+
if (!menu.hideChildrenInMenu) {
120+
menu.children.forEach(item => itemArr.push(this.renderItem(item)))
121+
}
122+
return (
123+
<SubMenu {...{ key: menu.path }}>
124+
<span slot="title">
125+
{this.renderIcon(menu.meta.icon)}
126+
<span>{menu.meta.title}</span>
127+
</span>
128+
{itemArr}
129+
</SubMenu>
130+
)
131+
},
132+
renderIcon (icon) {
133+
if (icon === 'none' || icon === undefined) {
134+
return null
135+
}
136+
const props = {}
137+
typeof (icon) === 'object' ? props.component = icon : props.type = icon
138+
return (
139+
<Icon {... { props } }/>
140+
)
141+
}
142+
},
143+
render () {
144+
const { mode, theme, menu } = this
145+
const props = {
146+
mode: mode,
147+
theme: theme,
148+
openKeys: this.openKeys
149+
}
150+
const on = {
151+
select: obj => {
152+
this.selectedKeys = obj.selectedKeys
153+
this.$emit('select', obj)
154+
},
155+
openChange: this.onOpenChange
156+
}
157+
158+
const menuTree = menu.map(item => {
159+
if (item.hidden) {
160+
return null
161+
}
162+
return this.renderItem(item)
163+
})
164+
// {...{ props, on: on }}
165+
return (
166+
<Menu vModel={this.selectedKeys} {...{ props, on: on }}>
167+
{menuTree}
168+
</Menu>
169+
)
170+
}
171+
}

‎src/components/menu/index.render.js renamed to ‎src/components/menu/menu.render.js

File renamed without changes.

‎src/config/router.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -255,15 +255,15 @@ export const asyncRouterMap = [
255255
path: '/account/settings',
256256
name: 'settings',
257257
component: () => import('@/views/account/settings/Index'),
258-
meta: { title: '个人设置', hideHeader: true, keepAlive: true, permission: [ 'user' ] },
258+
meta: { title: '个人设置', hideHeader: true, permission: [ 'user' ] },
259259
redirect: '/account/settings/base',
260260
hideChildrenInMenu: true,
261261
children: [
262262
{
263263
path: '/account/settings/base',
264264
name: 'BaseSettings',
265265
component: () => import('@/views/account/settings/BaseSetting'),
266-
meta: { title: '基本设置', hidden: true, keepAlive: true, permission: [ 'user' ] }
266+
meta: { title: '基本设置', hidden: true, permission: [ 'user' ] }
267267
},
268268
{
269269
path: '/account/settings/security',

‎src/core/use.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import config from '@/config/defaultSettings'
55
// base library
66
import Antd from 'ant-design-vue'
77
import Viser from 'viser-vue'
8+
import VueCropper from 'vue-cropper'
89
import 'ant-design-vue/dist/antd.less'
910

1011
// ext library
@@ -19,4 +20,5 @@ Vue.use(Viser)
1920

2021
Vue.use(VueStorage, config.storageOptions)
2122
Vue.use(VueClipboard)
22-
Vue.use(PermissionHelper)
23+
Vue.use(PermissionHelper)
24+
Vue.use(VueCropper)

0 commit comments

Comments
 (0)