增加注释
Showing
7 changed files
with
136 additions
and
0 deletions
1 | export const theme = { | 1 | export const theme = { |
2 | /** | ||
3 | * @description: bind | ||
4 | * @param {*} el | ||
5 | * @param {*} binding | ||
6 | * @param {*} vnode | ||
7 | * @author: renchao | ||
8 | */ | ||
2 | bind: function (el, binding, vnode) { | 9 | bind: function (el, binding, vnode) { |
3 | setEleStyleColorAttribute(el, binding); | 10 | setEleStyleColorAttribute(el, binding); |
4 | }, | 11 | }, |
12 | /** | ||
13 | * @description: update | ||
14 | * @param {*} el | ||
15 | * @param {*} binding | ||
16 | * @param {*} vnode | ||
17 | * @author: renchao | ||
18 | */ | ||
5 | update: function (el, binding, vnode) { | 19 | update: function (el, binding, vnode) { |
6 | setEleStyleColorAttribute(el, binding); | 20 | setEleStyleColorAttribute(el, binding); |
7 | }, | 21 | }, |
22 | /** | ||
23 | * @description: componentUpdated | ||
24 | * @param {*} el | ||
25 | * @param {*} binding | ||
26 | * @param {*} vnode | ||
27 | * @author: renchao | ||
28 | */ | ||
8 | componentUpdated: function (el, binding, vnode) { | 29 | componentUpdated: function (el, binding, vnode) { |
9 | setEleStyleColorAttribute(el, binding); | 30 | setEleStyleColorAttribute(el, binding); |
10 | } | 31 | } |
11 | } | 32 | } |
12 | 33 | ||
34 | /** | ||
35 | * @description: setEleStyleColorAttribute | ||
36 | * @param {*} el | ||
37 | * @param {*} binding | ||
38 | * @author: renchao | ||
39 | */ | ||
13 | function setEleStyleColorAttribute (el, binding) { | 40 | function setEleStyleColorAttribute (el, binding) { |
14 | const { name, value, arg, expression, modifiers } = binding; | 41 | const { name, value, arg, expression, modifiers } = binding; |
15 | const { background, font, border } = modifiers; | 42 | const { background, font, border } = modifiers; | ... | ... |
... | @@ -10,6 +10,10 @@ export default { | ... | @@ -10,6 +10,10 @@ export default { |
10 | this.fixBugIniOS() | 10 | this.fixBugIniOS() |
11 | }, | 11 | }, |
12 | methods: { | 12 | methods: { |
13 | /** | ||
14 | * @description: fixBugIniOS | ||
15 | * @author: renchao | ||
16 | */ | ||
13 | fixBugIniOS() { | 17 | fixBugIniOS() { |
14 | const $subMenu = this.$refs.subMenu | 18 | const $subMenu = this.$refs.subMenu |
15 | if ($subMenu) { | 19 | if ($subMenu) { | ... | ... |
... | @@ -53,6 +53,12 @@ export default { | ... | @@ -53,6 +53,12 @@ export default { |
53 | return {} | 53 | return {} |
54 | }, | 54 | }, |
55 | methods: { | 55 | methods: { |
56 | /** | ||
57 | * @description: hasOneShowingChild | ||
58 | * @param {*} children | ||
59 | * @param {*} parent | ||
60 | * @author: renchao | ||
61 | */ | ||
56 | hasOneShowingChild (children = [], parent) { | 62 | hasOneShowingChild (children = [], parent) { |
57 | const showingChildren = children.filter(item => { | 63 | const showingChildren = children.filter(item => { |
58 | if (item.hidden) { | 64 | if (item.hidden) { |
... | @@ -77,6 +83,11 @@ export default { | ... | @@ -77,6 +83,11 @@ export default { |
77 | 83 | ||
78 | return false | 84 | return false |
79 | }, | 85 | }, |
86 | /** | ||
87 | * @description: resolvePath | ||
88 | * @param {*} routePath | ||
89 | * @author: renchao | ||
90 | */ | ||
80 | resolvePath (routePath) { | 91 | resolvePath (routePath) { |
81 | if (isExternal(routePath)) { | 92 | if (isExternal(routePath)) { |
82 | return routePath | 93 | return routePath | ... | ... |
... | @@ -26,14 +26,28 @@ export default { | ... | @@ -26,14 +26,28 @@ export default { |
26 | this.scrollWrapper.removeEventListener('scroll', this.emitScroll) | 26 | this.scrollWrapper.removeEventListener('scroll', this.emitScroll) |
27 | }, | 27 | }, |
28 | methods: { | 28 | methods: { |
29 | /** | ||
30 | * @description: handleScroll | ||
31 | * @param {*} e | ||
32 | * @author: renchao | ||
33 | */ | ||
29 | handleScroll (e) { | 34 | handleScroll (e) { |
30 | const eventDelta = e.wheelDelta || -e.deltaY * 40 | 35 | const eventDelta = e.wheelDelta || -e.deltaY * 40 |
31 | const $scrollWrapper = this.scrollWrapper | 36 | const $scrollWrapper = this.scrollWrapper |
32 | $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 | 37 | $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4 |
33 | }, | 38 | }, |
39 | /** | ||
40 | * @description: emitScroll | ||
41 | * @author: renchao | ||
42 | */ | ||
34 | emitScroll () { | 43 | emitScroll () { |
35 | this.$emit('scroll') | 44 | this.$emit('scroll') |
36 | }, | 45 | }, |
46 | /** | ||
47 | * @description: moveToTarget | ||
48 | * @param {*} currentTag | ||
49 | * @author: renchao | ||
50 | */ | ||
37 | moveToTarget (currentTag) { | 51 | moveToTarget (currentTag) { |
38 | const $container = this.$refs.scrollContainer.$el | 52 | const $container = this.$refs.scrollContainer.$el |
39 | const $containerWidth = $container.offsetWidth | 53 | const $containerWidth = $container.offsetWidth | ... | ... |
... | @@ -59,12 +59,28 @@ export default { | ... | @@ -59,12 +59,28 @@ export default { |
59 | this.addTags() | 59 | this.addTags() |
60 | }, | 60 | }, |
61 | methods: { | 61 | methods: { |
62 | /** | ||
63 | * @description: isActive | ||
64 | * @param {*} route | ||
65 | * @author: renchao | ||
66 | */ | ||
62 | isActive (route) { | 67 | isActive (route) { |
63 | return route.path === this.$route.path | 68 | return route.path === this.$route.path |
64 | }, | 69 | }, |
70 | /** | ||
71 | * @description: isAffix | ||
72 | * @param {*} tag | ||
73 | * @author: renchao | ||
74 | */ | ||
65 | isAffix (tag) { | 75 | isAffix (tag) { |
66 | return tag.meta && tag.meta.affix | 76 | return tag.meta && tag.meta.affix |
67 | }, | 77 | }, |
78 | /** | ||
79 | * @description: filterAffixTags | ||
80 | * @param {*} routes | ||
81 | * @param {*} basePath | ||
82 | * @author: renchao | ||
83 | */ | ||
68 | filterAffixTags (routes, basePath = '/') { | 84 | filterAffixTags (routes, basePath = '/') { |
69 | let tags = [] | 85 | let tags = [] |
70 | routes.forEach(route => { | 86 | routes.forEach(route => { |
... | @@ -86,6 +102,10 @@ export default { | ... | @@ -86,6 +102,10 @@ export default { |
86 | }) | 102 | }) |
87 | return tags | 103 | return tags |
88 | }, | 104 | }, |
105 | /** | ||
106 | * @description: initTags | ||
107 | * @author: renchao | ||
108 | */ | ||
89 | initTags () { | 109 | initTags () { |
90 | const affixTags = this.affixTags = this.filterAffixTags(this.routes) | 110 | const affixTags = this.affixTags = this.filterAffixTags(this.routes) |
91 | for (const tag of affixTags) { | 111 | for (const tag of affixTags) { |
... | @@ -95,6 +115,10 @@ export default { | ... | @@ -95,6 +115,10 @@ export default { |
95 | } | 115 | } |
96 | } | 116 | } |
97 | }, | 117 | }, |
118 | /** | ||
119 | * @description: addTags | ||
120 | * @author: renchao | ||
121 | */ | ||
98 | addTags () { | 122 | addTags () { |
99 | const { name } = this.$route | 123 | const { name } = this.$route |
100 | if (name) { | 124 | if (name) { |
... | @@ -102,6 +126,10 @@ export default { | ... | @@ -102,6 +126,10 @@ export default { |
102 | } | 126 | } |
103 | return false | 127 | return false |
104 | }, | 128 | }, |
129 | /** | ||
130 | * @description: moveToCurrentTag | ||
131 | * @author: renchao | ||
132 | */ | ||
105 | moveToCurrentTag () { | 133 | moveToCurrentTag () { |
106 | const tags = this.$refs.tag | 134 | const tags = this.$refs.tag |
107 | this.$nextTick(() => { | 135 | this.$nextTick(() => { |
... | @@ -117,6 +145,11 @@ export default { | ... | @@ -117,6 +145,11 @@ export default { |
117 | } | 145 | } |
118 | }) | 146 | }) |
119 | }, | 147 | }, |
148 | /** | ||
149 | * @description: refreshSelectedTag | ||
150 | * @param {*} view | ||
151 | * @author: renchao | ||
152 | */ | ||
120 | refreshSelectedTag (view) { | 153 | refreshSelectedTag (view) { |
121 | this.$store.dispatch('tagsView/delCachedView', view).then(() => { | 154 | this.$store.dispatch('tagsView/delCachedView', view).then(() => { |
122 | const { fullPath } = view | 155 | const { fullPath } = view |
... | @@ -127,6 +160,11 @@ export default { | ... | @@ -127,6 +160,11 @@ export default { |
127 | }) | 160 | }) |
128 | }) | 161 | }) |
129 | }, | 162 | }, |
163 | /** | ||
164 | * @description: closeSelectedTag | ||
165 | * @param {*} view | ||
166 | * @author: renchao | ||
167 | */ | ||
130 | closeSelectedTag (view) { | 168 | closeSelectedTag (view) { |
131 | this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { | 169 | this.$store.dispatch('tagsView/delView', view).then(({ visitedViews }) => { |
132 | if (this.isActive(view)) { | 170 | if (this.isActive(view)) { |
... | @@ -134,12 +172,21 @@ export default { | ... | @@ -134,12 +172,21 @@ export default { |
134 | } | 172 | } |
135 | }) | 173 | }) |
136 | }, | 174 | }, |
175 | /** | ||
176 | * @description: closeOthersTags | ||
177 | * @author: renchao | ||
178 | */ | ||
137 | closeOthersTags () { | 179 | closeOthersTags () { |
138 | this.$router.push(this.selectedTag) | 180 | this.$router.push(this.selectedTag) |
139 | this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { | 181 | this.$store.dispatch('tagsView/delOthersViews', this.selectedTag).then(() => { |
140 | this.moveToCurrentTag() | 182 | this.moveToCurrentTag() |
141 | }) | 183 | }) |
142 | }, | 184 | }, |
185 | /** | ||
186 | * @description: closeAllTags | ||
187 | * @param {*} view | ||
188 | * @author: renchao | ||
189 | */ | ||
143 | closeAllTags (view) { | 190 | closeAllTags (view) { |
144 | this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { | 191 | this.$store.dispatch('tagsView/delAllViews').then(({ visitedViews }) => { |
145 | if (this.affixTags.some(tag => tag.path === view.path)) { | 192 | if (this.affixTags.some(tag => tag.path === view.path)) { |
... | @@ -148,6 +195,12 @@ export default { | ... | @@ -148,6 +195,12 @@ export default { |
148 | this.toLastView(visitedViews, view) | 195 | this.toLastView(visitedViews, view) |
149 | }) | 196 | }) |
150 | }, | 197 | }, |
198 | /** | ||
199 | * @description: toLastView | ||
200 | * @param {*} visitedViews | ||
201 | * @param {*} view | ||
202 | * @author: renchao | ||
203 | */ | ||
151 | toLastView (visitedViews, view) { | 204 | toLastView (visitedViews, view) { |
152 | const latestView = visitedViews.slice(-1)[0] | 205 | const latestView = visitedViews.slice(-1)[0] |
153 | if (latestView) { | 206 | if (latestView) { |
... | @@ -163,6 +216,12 @@ export default { | ... | @@ -163,6 +216,12 @@ export default { |
163 | } | 216 | } |
164 | } | 217 | } |
165 | }, | 218 | }, |
219 | /** | ||
220 | * @description: openMenu | ||
221 | * @param {*} tag | ||
222 | * @param {*} e | ||
223 | * @author: renchao | ||
224 | */ | ||
166 | openMenu (tag, e) { | 225 | openMenu (tag, e) { |
167 | const menuMinWidth = 105 | 226 | const menuMinWidth = 105 |
168 | const offsetLeft = this.$el.getBoundingClientRect().left // container margin left | 227 | const offsetLeft = this.$el.getBoundingClientRect().left // container margin left |
... | @@ -180,9 +239,17 @@ export default { | ... | @@ -180,9 +239,17 @@ export default { |
180 | this.visible = true | 239 | this.visible = true |
181 | this.selectedTag = tag | 240 | this.selectedTag = tag |
182 | }, | 241 | }, |
242 | /** | ||
243 | * @description: closeMenu | ||
244 | * @author: renchao | ||
245 | */ | ||
183 | closeMenu () { | 246 | closeMenu () { |
184 | this.visible = false | 247 | this.visible = false |
185 | }, | 248 | }, |
249 | /** | ||
250 | * @description: handleScroll | ||
251 | * @author: renchao | ||
252 | */ | ||
186 | handleScroll () { | 253 | handleScroll () { |
187 | this.closeMenu() | 254 | this.closeMenu() |
188 | } | 255 | } | ... | ... |
... | @@ -27,10 +27,19 @@ export default { | ... | @@ -27,10 +27,19 @@ export default { |
27 | methods: { | 27 | methods: { |
28 | // use $_ for mixins properties | 28 | // use $_ for mixins properties |
29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential | 29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential |
30 | /** | ||
31 | * @description: use $_ for mixins properties | ||
32 | * https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential | ||
33 | * @author: renchao | ||
34 | */ | ||
30 | $_isMobile() { | 35 | $_isMobile() { |
31 | const rect = body.getBoundingClientRect() | 36 | const rect = body.getBoundingClientRect() |
32 | return rect.width - 1 < WIDTH | 37 | return rect.width - 1 < WIDTH |
33 | }, | 38 | }, |
39 | /** | ||
40 | * @description: $_resizeHandler | ||
41 | * @author: renchao | ||
42 | */ | ||
34 | $_resizeHandler() { | 43 | $_resizeHandler() { |
35 | if (!document.hidden) { | 44 | if (!document.hidden) { |
36 | const isMobile = this.$_isMobile() | 45 | const isMobile = this.$_isMobile() | ... | ... |
-
Please register or sign in to post a comment