Skip to content

Commit a543b0b

Browse files
PanJiaChenPanJiaChen
committed
Merge branch 'master' into deploy
2 parents ec49100 + f94aa1a commit a543b0b

File tree

4 files changed

+64
-12
lines changed

4 files changed

+64
-12
lines changed

‎README.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -198,6 +198,14 @@ If you find this project useful, you can buy author a glass of juice :tropical_d
198198

199199
[Buy me a coffee](https://www.buymeacoffee.com/Pan)
200200

201+
## Browsers support
202+
203+
Modern browsers and Internet Explorer 10+.
204+
205+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
206+
| --------- | --------- | --------- | --------- |
207+
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
208+
201209
## License
202210

203211
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)

‎README.zh-CN.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -210,6 +210,14 @@ Detailed changes for each release are documented in the [release notes](https://
210210

211211
[Paypal Me](https://www.paypal.me/panfree23)
212212

213+
## Browsers support
214+
215+
Modern browsers and Internet Explorer 10+.
216+
217+
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari |
218+
| --------- | --------- | --------- | --------- |
219+
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
220+
213221
## License
214222

215223
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)

‎src/components/ScrollPane/index.vue

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
</template>
66

77
<script>
8-
const padding = 15 // tag's padding
8+
const tagAndTagSpacing = 4 // tagAndTagSpacing
99
1010
export default {
1111
name: 'ScrollPane',
@@ -20,18 +20,54 @@ export default {
2020
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
2121
$scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
2222
},
23-
moveToTarget($target) {
23+
moveToTarget(currentTag) {
2424
const $container = this.$refs.scrollContainer.$el
2525
const $containerWidth = $container.offsetWidth
2626
const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
27-
const $targetLeft = $target.offsetLeft
28-
const $targetWidth = $target.offsetWidth
29-
if ($targetLeft > $containerWidth) {
30-
// tag in the right
31-
$scrollWrapper.scrollLeft = $targetLeft - $containerWidth + $targetWidth + padding
27+
const tagList = this.$parent.$refs.tag
28+
29+
let firstTag = null
30+
let lastTag = null
31+
let prevTag = null
32+
let nextTag = null
33+
34+
// find first tag and last tag
35+
if (tagList.length > 0) {
36+
firstTag = tagList[0]
37+
lastTag = tagList[tagList.length - 1]
38+
}
39+
40+
// find preTag and nextTag
41+
for (let i = 0; i < tagList.length; i++) {
42+
if (tagList[i] === currentTag) {
43+
if (i === 0) {
44+
nextTag = tagList[i].length > 1 && tagList[i + 1]
45+
} else if (i === tagList.length - 1) {
46+
prevTag = tagList[i].length > 1 && tagList[i - 1]
47+
} else {
48+
prevTag = tagList[i - 1]
49+
nextTag = tagList[i + 1]
50+
}
51+
break
52+
}
53+
}
54+
55+
if (firstTag === currentTag) {
56+
$scrollWrapper.scrollLeft = 0
57+
} else if (lastTag === currentTag) {
58+
$scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
3259
} else {
33-
// tag in the left
34-
$scrollWrapper.scrollLeft = $targetLeft - padding
60+
// the tag's offsetLeft after of nextTag
61+
const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
62+
63+
// the tag's offsetLeft before of prevTag
64+
const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
65+
66+
if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
67+
$scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
68+
} else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
69+
$scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
70+
}
3571
}
3672
}
3773
}

‎src/views/layout/components/TagsView.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,14 +5,14 @@
55
v-for="tag in visitedViews"
66
ref="tag"
77
:class="isActive(tag)?'active':''"
8-
:to="tag.fullPath"
8+
:to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
99
:key="tag.path"
1010
tag="span"
1111
class="tags-view-item"
1212
@click.middle.native="closeSelectedTag(tag)"
1313
@contextmenu.prevent.native="openMenu(tag,$event)">
1414
{{ generateTitle(tag.title) }}
15-
<span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
15+
<span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
1616
</router-link>
1717
</scroll-pane>
1818
<ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
@@ -76,7 +76,7 @@ export default {
7676
this.$nextTick(() => {
7777
for (const tag of tags) {
7878
if (tag.to.path === this.$route.path) {
79-
this.$refs.scrollPane.moveToTarget(tag.$el)
79+
this.$refs.scrollPane.moveToTarget(tag)
8080
8181
// when query is different then update
8282
if (tag.to.fullPath !== this.$route.fullPath) {

0 commit comments

Comments
 (0)