Răsfoiți Sursa

Popover: fix click trigger

Leopoldthecoder 7 ani în urmă
părinte
comite
8fa549894b
2 a modificat fișierele cu 15 adăugiri și 17 ștergeri
  1. 9 17
      packages/popover/src/main.vue
  2. 6 0
      packages/theme-chalk/src/popover.scss

+ 9 - 17
packages/popover/src/main.vue

@@ -21,6 +21,7 @@
 <script>
 import Popper from 'element-ui/src/utils/vue-popper';
 import { on, off } from 'element-ui/src/utils/dom';
+import { addClass, removeClass } from 'element-ui/src/utils/dom';
 import { generateId } from 'element-ui/src/utils/util';
 
 export default {
@@ -59,14 +60,8 @@ export default {
     }
   },
   watch: {
-    showPopper(newVal, oldVal) {
-      newVal ? this.$emit('show') : this.$emit('hide');
-    },
-    '$refs.reference': {
-      deep: true,
-      handler(val) {
-        console.log(val);
-      }
+    showPopper(val) {
+      val ? this.$emit('show') : this.$emit('hide');
     }
   },
 
@@ -79,12 +74,12 @@ export default {
     }
     // 可访问性
     if (reference) {
-      reference.className += ' el-tooltip';
+      addClass(reference, 'el-popover__reference');
       reference.setAttribute('aria-describedby', this.tooltipId);
       reference.setAttribute('tabindex', 0); // tab序列
 
-      on(reference, 'focus', this.handleFocus);
-      on(reference, 'blur', this.handleBlur);
+      this.trigger !== 'click' && on(reference, 'focus', this.handleFocus);
+      this.trigger !== 'click' && on(reference, 'blur', this.handleBlur);
       on(reference, 'keydown', this.handleKeydown);
       on(reference, 'click', this.handleClick);
     }
@@ -135,17 +130,14 @@ export default {
       this.showPopper = false;
     },
     handleFocus() {
-      const reference = this.referenceElm;
-      reference.className += ' focusing';
+      addClass(this.referenceElm, 'focusing');
       this.showPopper = true;
     },
     handleClick() {
-      const reference = this.referenceElm;
-      reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
+      removeClass(this.referenceElm, 'focusing');
     },
     handleBlur() {
-      const reference = this.referenceElm;
-      reference.className = reference.className.replace(/\s*focusing\s*/, ' ');
+      removeClass(this.referenceElm, 'focusing');
       this.showPopper = false;
     },
     handleMouseEnter() {

+ 6 - 0
packages/theme-chalk/src/popover.scss

@@ -27,4 +27,10 @@
     line-height: 1;
     margin-bottom: 12px;
   }
+
+  @include e(reference) {
+    &:focus:not(.focusing), &:focus:hover {
+      outline-width: 0;
+    }
+  }
 }