mirror of
https://github.com/tenrok/vue-select.git
synced 2026-06-13 08:32:26 +03:00
Jérémie BORDIER
fe51fec6b8
Adds `appendToBody` and `calculatePosition` props. https://vue-select.org/guide/positioning.html Co-authored-by: Jeff <sagalbot@gmail.com>
78 lines
2.0 KiB
Vue
78 lines
2.0 KiB
Vue
<template>
|
|
<div>
|
|
<v-select :options="countries" append-to-body :calculate-position="withPopper" />
|
|
|
|
<label for="position" style="display: block; margin: 1rem 0;">
|
|
<input
|
|
type="checkbox"
|
|
id="position"
|
|
v-model="placement"
|
|
true-value="top"
|
|
false-value="bottom"
|
|
>
|
|
Position dropdown above
|
|
</label>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import countries from '../data/countries'
|
|
import { createPopper } from '@popperjs/core';
|
|
|
|
export default {
|
|
data: () => ({countries, placement: 'top'}),
|
|
methods: {
|
|
withPopper (dropdownList, component, {width},) {
|
|
/**
|
|
* We need to explicitly define the dropdown width since
|
|
* it is usually inherited from the parent with CSS.
|
|
*/
|
|
dropdownList.style.width = width;
|
|
|
|
/**
|
|
* Here we position the dropdownList relative to the $refs.toggle Element.
|
|
*
|
|
* The 'offset' modifier aligns the dropdown so that the $refs.toggle and
|
|
* the dropdownList overlap by 1 pixel.
|
|
*
|
|
* The 'toggleClass' modifier adds a 'drop-up' class to the Vue Select
|
|
* wrapper so that we can set some styles for when the dropdown is placed
|
|
* above.
|
|
*/
|
|
createPopper(component.$refs.toggle, dropdownList, {
|
|
placement: this.placement,
|
|
modifiers: [
|
|
{
|
|
name: 'offset', options: {
|
|
offset: [0, -1]
|
|
}
|
|
},
|
|
{
|
|
name: 'toggleClass',
|
|
enabled: true,
|
|
phase: 'write',
|
|
fn ({state}) {
|
|
component.$el.classList.toggle('drop-up', state.placement === 'top')
|
|
},
|
|
}]
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.v-select.drop-up.vs--open .vs__dropdown-toggle {
|
|
border-radius: 0 0 4px 4px;
|
|
border-top-color: transparent;
|
|
border-bottom-color: rgba(60, 60, 60, 0.26);
|
|
}
|
|
|
|
[data-popper-placement='top'] {
|
|
border-radius: 4px 4px 0 0;
|
|
border-top-style: solid;
|
|
border-bottom-style: none;
|
|
box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.15)
|
|
}
|
|
</style>
|