У меня есть календарь Vue внутри модального окна, и когда он появляется, я хочу, чтобы окно прокручивалось вниз, но я изо всех сил пытаюсь его реализовать. Я не могу поделиться кодом модального окна, так как он слишком велик, поэтому я использую только компонент vue. Любая помощь будет оценена, спасибо.
На данный момент у меня есть это:
И вот как бы я хотел, чтобы это было:
А вот и мои компоненты календаря vue:
<template class = "date-picker-addon">
<div class = "date-picker-box">
<datepicker :placeholder = "today" v-on:selected = "startDate"></datepicker>
</div>
</template>
<script>
import Datepicker from "vuejs-datepicker/dist/vuejs-datepicker.esm.js";
import * as lang from "vuejs-datepicker/src/locale";
const state = {
date1: new Date()
}
export default {
components: {
Datepicker
},
data() {
return {
today: null,
format: "d MMMM yyyy",
disabledDates: {},
disabledFn: {
customPredictor(date) {
if (date.getDate() % 3 === 0) {
return true;
}
}
},
highlightedFn: {
customPredictor(date) {
if (date.getDate() % 4 === 0) {
return true;
}
}
},
highlighted: {},
eventMsg: null,
state: state,
language: "en",
languages: lang,
vModelExample: null,
changedMonthLog: []
};
},
mounted: function(){
let today = new Date();
let dd = today.getDate();
let mm = today.getMonth() + 1; //January is 0!
let yyyy = today.getFullYear();
if (dd < 10) {
dd = `0${dd}`
};
if (mm < 10) {
mm = `0${mm}`
};
this.today = `${mm}/${dd}/${yyyy}`;
},
methods: {
startDate(value){
let startDate = new Date(value);
let dd = startDate.getDate();
let mm = startDate.getMonth() + 1; //January is 0!
let yyyy = startDate.getFullYear();
if (dd < 10) {
dd = `0${dd}`
};
if (mm < 10) {
mm = `0${mm}`
};
startDate = `${yyyy}-${mm}-${dd}`;
this.$emit('update', startDate);
}
};
</script>
Убедитесь, что ваш настраиваемый модальный компонент генерирует событие:
this.$emit('open', true)
Добавьте ссылку на свой модальный компонент и наблюдайте за событием open
:
<modal @open = "handleOpen" ref = "myModal">
Когда он откроется, прокрутите вниз:
handleOpen() {
this.$refs.myModal.scrollTop = this.$refs.myModal.scrollHeight
}
Это будет работать, только если элемент верхнего уровня вашего компонента modal
- это div со стилем overflow-y: auto
.
Если это не так, переместите логику в модальный компонент и назначьте ссылку элементу, который имеет стиль overflow-y: auto
.
Как насчет того, чтобы попробовать чистый JS?
modal.scrollTop = modal.scrollHeight
Я не уверен, что это лучший ответ, но поскольку я пришел из JQuery и не нашел обычных «простых в использовании» функций во Vue, я обычно использую чистый javascript для его реализации (обычно оборачиваю его в миксин, например 'domMixins'). Надеюсь, поможет.
Простой способ:
Поместите id = "SomeName" в прокручиваемый элемент модального окна (может быть полный контент) затем добавьте div class = "modal ...... @ focus =" handleOpenNews " и добавьте в Методы:
handleOpenNews() {
document.getElementById('SomeName').scrollTo...you needs
}
<xyz-component id = "scroll"></xyz-component>
OR
<div id = "scroll"></div>
var elmnt = document.getElementById("scroll");
elmnt.scrollIntoView(true);
ИЛИ, вы также можете использовать его в функции
<xyz-component id = "scroll"></xyz-component>
OR
<div id = "scroll"></div>
methods: {
scrollTo() {
var elmnt = document.getElementById("scroll");
elmnt.scrollIntoView(true); // for scrolling top
elmnt.scrollIntoView(false); // for scrolling bottom
}
<v-btn @click = "scrollTo()">Click Button</v-btn>