Merge branch 'master' into deploy
This commit is contained in:
		@@ -198,6 +198,14 @@ If you find this project useful, you can buy author a glass of juice :tropical_d
 | 
			
		||||
 | 
			
		||||
[Buy me a coffee](https://www.buymeacoffee.com/Pan)
 | 
			
		||||
 | 
			
		||||
## Browsers support
 | 
			
		||||
 | 
			
		||||
Modern browsers and Internet Explorer 10+.
 | 
			
		||||
 | 
			
		||||
| [<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 |
 | 
			
		||||
| --------- | --------- | --------- | --------- |
 | 
			
		||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
 | 
			
		||||
 | 
			
		||||
## License
 | 
			
		||||
 | 
			
		||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
 | 
			
		||||
 
 | 
			
		||||
@@ -210,6 +210,14 @@ Detailed changes for each release are documented in the [release notes](https://
 | 
			
		||||
 | 
			
		||||
[Paypal Me](https://www.paypal.me/panfree23)
 | 
			
		||||
 | 
			
		||||
## Browsers support
 | 
			
		||||
 | 
			
		||||
Modern browsers and Internet Explorer 10+.
 | 
			
		||||
 | 
			
		||||
| [<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 |
 | 
			
		||||
| --------- | --------- | --------- | --------- |
 | 
			
		||||
| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
 | 
			
		||||
 | 
			
		||||
## License
 | 
			
		||||
 | 
			
		||||
[MIT](https://github.com/PanJiaChen/vue-element-admin/blob/master/LICENSE)
 | 
			
		||||
 
 | 
			
		||||
@@ -5,7 +5,7 @@
 | 
			
		||||
</template>
 | 
			
		||||
 | 
			
		||||
<script>
 | 
			
		||||
const padding = 15 // tag's padding
 | 
			
		||||
const tagAndTagSpacing = 4 // tagAndTagSpacing
 | 
			
		||||
 | 
			
		||||
export default {
 | 
			
		||||
  name: 'ScrollPane',
 | 
			
		||||
@@ -20,18 +20,54 @@ export default {
 | 
			
		||||
      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
 | 
			
		||||
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
 | 
			
		||||
    },
 | 
			
		||||
    moveToTarget($target) {
 | 
			
		||||
    moveToTarget(currentTag) {
 | 
			
		||||
      const $container = this.$refs.scrollContainer.$el
 | 
			
		||||
      const $containerWidth = $container.offsetWidth
 | 
			
		||||
      const $scrollWrapper = this.$refs.scrollContainer.$refs.wrap
 | 
			
		||||
      const $targetLeft = $target.offsetLeft
 | 
			
		||||
      const $targetWidth = $target.offsetWidth
 | 
			
		||||
      if ($targetLeft > $containerWidth) {
 | 
			
		||||
        // tag in the right
 | 
			
		||||
        $scrollWrapper.scrollLeft = $targetLeft - $containerWidth + $targetWidth + padding
 | 
			
		||||
      const tagList = this.$parent.$refs.tag
 | 
			
		||||
 | 
			
		||||
      let firstTag = null
 | 
			
		||||
      let lastTag = null
 | 
			
		||||
      let prevTag = null
 | 
			
		||||
      let nextTag = null
 | 
			
		||||
 | 
			
		||||
      // find first tag and last tag
 | 
			
		||||
      if (tagList.length > 0) {
 | 
			
		||||
        firstTag = tagList[0]
 | 
			
		||||
        lastTag = tagList[tagList.length - 1]
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      // find preTag and nextTag
 | 
			
		||||
      for (let i = 0; i < tagList.length; i++) {
 | 
			
		||||
        if (tagList[i] === currentTag) {
 | 
			
		||||
          if (i === 0) {
 | 
			
		||||
            nextTag = tagList[i].length > 1 && tagList[i + 1]
 | 
			
		||||
          } else if (i === tagList.length - 1) {
 | 
			
		||||
            prevTag = tagList[i].length > 1 && tagList[i - 1]
 | 
			
		||||
          } else {
 | 
			
		||||
            prevTag = tagList[i - 1]
 | 
			
		||||
            nextTag = tagList[i + 1]
 | 
			
		||||
          }
 | 
			
		||||
          break
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
 | 
			
		||||
      if (firstTag === currentTag) {
 | 
			
		||||
        $scrollWrapper.scrollLeft = 0
 | 
			
		||||
      } else if (lastTag === currentTag) {
 | 
			
		||||
        $scrollWrapper.scrollLeft = $scrollWrapper.scrollWidth - $containerWidth
 | 
			
		||||
      } else {
 | 
			
		||||
        // tag in the left
 | 
			
		||||
        $scrollWrapper.scrollLeft = $targetLeft - padding
 | 
			
		||||
        // the tag's offsetLeft after of nextTag
 | 
			
		||||
        const afterNextTagOffsetLeft = nextTag.$el.offsetLeft + nextTag.$el.offsetWidth + tagAndTagSpacing
 | 
			
		||||
 | 
			
		||||
        // the tag's offsetLeft before of prevTag
 | 
			
		||||
        const beforePrevTagOffsetLeft = prevTag.$el.offsetLeft - tagAndTagSpacing
 | 
			
		||||
 | 
			
		||||
        if (afterNextTagOffsetLeft > $scrollWrapper.scrollLeft + $containerWidth) {
 | 
			
		||||
          $scrollWrapper.scrollLeft = afterNextTagOffsetLeft - $containerWidth
 | 
			
		||||
        } else if (beforePrevTagOffsetLeft < $scrollWrapper.scrollLeft) {
 | 
			
		||||
          $scrollWrapper.scrollLeft = beforePrevTagOffsetLeft
 | 
			
		||||
        }
 | 
			
		||||
      }
 | 
			
		||||
    }
 | 
			
		||||
  }
 | 
			
		||||
 
 | 
			
		||||
@@ -5,14 +5,14 @@
 | 
			
		||||
        v-for="tag in visitedViews"
 | 
			
		||||
        ref="tag"
 | 
			
		||||
        :class="isActive(tag)?'active':''"
 | 
			
		||||
        :to="tag.fullPath"
 | 
			
		||||
        :to="{ path: tag.path, query: tag.query, fullPath: tag.fullPath }"
 | 
			
		||||
        :key="tag.path"
 | 
			
		||||
        tag="span"
 | 
			
		||||
        class="tags-view-item"
 | 
			
		||||
        @click.middle.native="closeSelectedTag(tag)"
 | 
			
		||||
        @contextmenu.prevent.native="openMenu(tag,$event)">
 | 
			
		||||
        {{ generateTitle(tag.title) }}
 | 
			
		||||
        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)"/>
 | 
			
		||||
        <span class="el-icon-close" @click.prevent.stop="closeSelectedTag(tag)" />
 | 
			
		||||
      </router-link>
 | 
			
		||||
    </scroll-pane>
 | 
			
		||||
    <ul v-show="visible" :style="{left:left+'px',top:top+'px'}" class="contextmenu">
 | 
			
		||||
@@ -76,7 +76,7 @@ export default {
 | 
			
		||||
      this.$nextTick(() => {
 | 
			
		||||
        for (const tag of tags) {
 | 
			
		||||
          if (tag.to.path === this.$route.path) {
 | 
			
		||||
            this.$refs.scrollPane.moveToTarget(tag.$el)
 | 
			
		||||
            this.$refs.scrollPane.moveToTarget(tag)
 | 
			
		||||
 | 
			
		||||
            // when query is different then update
 | 
			
		||||
            if (tag.to.fullPath !== this.$route.fullPath) {
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user