Popper: fix arrow position

pull/9373/head
Leopoldthecoder 2018-01-18 18:25:42 +08:00 committed by 杨奕
parent c3b0d8ee9e
commit 98bdee26b1
11 changed files with 17 additions and 29 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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