fix[TagsView]: fix openMenu boundary display bug (PanJiaChen#1256)

PanJiaChen · web-flow · commit cbdad9cb1b83 · 2018-10-25T10:42:18.000+08:00
diff --git a/src/views/layout/components/TagsView.vue b/src/views/layout/components/TagsView.vue
@@ -121,11 +121,21 @@ export default {
       this.$router.push('/')
     },
     openMenu(tag, e) {
-      this.visible = true
-      this.selectedTag = tag
+      const menuMinWidth = 105
       const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
-      this.left = e.clientX - offsetLeft + 15 // 15: margin right
+      const offsetWidth = this.$el.offsetWidth // container width
+      const maxLeft = offsetWidth - menuMinWidth // left boundary
+      const left = e.clientX - offsetLeft + 15 // 15: margin right
+
+      if (left > maxLeft) {
+        this.left = maxLeft
+      } else {
+        this.left = left
+      }
       this.top = e.clientY
+
+      this.visible = true
+      this.selectedTag = tag
     },
     closeMenu() {
       this.visible = false
