Popper: fix arrow position

packages/cascader/src/main.vue

@@ -77,6 +77,7 @@ const popperMixin = {
       default: 'bottom-start'
     },
     appendToBody: Popper.props.appendToBody,
+    arrowOffset: Popper.props.arrowOffset,
     offset: Popper.props.offset,
     boundariesPadding: Popper.props.boundariesPadding,
     popperOptions: Popper.props.popperOptions

packages/date-picker/src/picker.vue

@@ -89,7 +89,8 @@ const NewPopper = {
   props: {
     appendToBody: Popper.props.appendToBody,
     offset: Popper.props.offset,
-    boundariesPadding: Popper.props.boundariesPadding
+    boundariesPadding: Popper.props.boundariesPadding,
+    arrowOffset: Popper.props.arrowOffset
   },
   methods: Popper.methods,
   data() {

packages/pagination/src/pagination.js

@@ -165,7 +165,7 @@ export default {
           <span class="el-pagination__sizes">
             <el-select
               value={ this.$parent.internalPageSize }
-              popperClass={ `${this.$parent.popperClass || ''} is-arrow-fixed` }
+              popperClass={ this.$parent.popperClass || '' }
               on-input={ this.handleChange }>
               {
                 this.pageSizes.map(item =>

packages/popover/src/main.vue

@@ -48,6 +48,10 @@ export default {
     visibleArrow: {
       default: true
     },
+    arrowOffset: {
+      type: Number,
+      default: 0
+    },
     transition: {
       type: String,
       default: 'fade-in-linear'

packages/theme-chalk/src/autocomplete.scss

@@ -15,10 +15,6 @@
   box-shadow: $--box-shadow-light;
   border-radius: $--border-radius-base;
 
-  &.el-popper .popper__arrow {
-    left: 24px !important;
-  }
-
   @include e(wrap) {
     max-height: 280px;
     padding: 10px 0;

packages/theme-chalk/src/cascader.scss

@@ -94,10 +94,6 @@
   border: $--select-dropdown-border;
   border-radius: $--border-radius-small;
   box-shadow: $--select-dropdown-shadow;
-
-  .popper__arrow {
-    transform: translateX(-400%);
-  }
 }
 
 @include b(cascader-menu) {

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -96,10 +96,6 @@
   @include e(link-btn) {
     vertical-align: middle;
   }
-
-  .popper__arrow {
-    transform: translateX(-400%);
-  }
 }
 
 .el-picker-panel *[slot=sidebar],

packages/theme-chalk/src/date-picker/time-picker.scss

@@ -81,8 +81,4 @@
       color: $--datepicker-active-color;
     }
   }
-
-  .popper__arrow {
-    transform: translateX(-400%);
-  }
 }

packages/theme-chalk/src/select-dropdown.scss

@@ -37,16 +37,6 @@
   .el-scrollbar.is-empty .el-select-dropdown__list{
     padding: 0;
   }
-
-  .popper__arrow {
-    transform: translateX(-400%);
-  }
-
-  @include when(arrow-fixed){
-    .popper__arrow {
-      transform: translateX(-200%);
-    }
-  }
 }
 
 @include b(select-dropdown__empty) {

src/utils/popper.js

@@ -71,6 +71,8 @@
 
         arrowElement: '[x-arrow]',
 
+        arrowOffset: 0,
+
         // list of functions used to modify the offsets before they are applied to the popper
         modifiers: [ 'shift', 'offset', 'preventOverflow', 'keepTogether', 'arrow', 'flip', 'applyStyle'],
 
@@ -878,6 +880,7 @@
      */
     Popper.prototype.modifiers.arrow = function(data) {
         var arrow  = this._options.arrowElement;
+        var arrowOffset = this._options.arrowOffset;
 
         // if the arrowElement is a string, suppose it's a CSS selector
         if (typeof arrow === 'string') {
@@ -928,7 +931,7 @@
         }
 
         // compute center of the popper
-        var center = reference[side] + (reference[len] / 2) - (arrowSize / 2);
+        var center = reference[side] + (arrowOffset || (reference[len] / 2) - (arrowSize / 2));
 
         var sideValue = center - popper[side];
 

src/utils/vue-popper.js

@@ -31,6 +31,10 @@ export default {
     },
     value: Boolean,
     visibleArrow: Boolean,
+    arrowOffset: {
+      type: Number,
+      default: 35
+    },
     transition: String,
     appendToBody: {
       type: Boolean,
@@ -95,6 +99,7 @@ export default {
 
       options.placement = this.currentPlacement;
       options.offset = this.offset;
+      options.arrowOffset = this.arrowOffset;
       this.popperJS = new PopperJS(reference, popper, options);
       this.popperJS.onCreate(_ => {
         this.$emit('created', this);