Прокрутите вниз модальное окно во Vue

У меня есть календарь Vue внутри модального окна, и когда он появляется, я хочу, чтобы окно прокручивалось вниз, но я изо всех сил пытаюсь его реализовать. Я не могу поделиться кодом модального окна, так как он слишком велик, поэтому я использую только компонент vue. Любая помощь будет оценена, спасибо.

На данный момент у меня есть это: Прокрутите вниз модальное окно во 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" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
5 146
4
Перейти к ответу Данный вопрос помечен как решенный

Ответы 4

Ответ принят как подходящий

Убедитесь, что ваш настраиваемый модальный компонент генерирует событие:

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>

Другие вопросы по теме