Прокрутите вниз до модального окна в Vue - PullRequest
Новая
       3

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

0 голосов
/ 18 декабря 2018

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

В настоящее время у меня есть это: enter image description here

И вот как я хотел бы, чтобы это было: enter image description here

А вот мои компоненты календаря 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>

Ответы [ 2 ]

0 голосов
/ 18 декабря 2018

Как насчет попробовать чистый JS? 

modal.scrollTop = modal.scrollHeight

Я не уверен, что это лучший ответ, но так как я пришел из JQuery и не нашел обычных "простых в использовании" функций вVue, я обычно использую чистый javascript для его реализации (обычно оборачиваю в миксин, например 'domMixins').Надеюсь, это поможет.

0 голосов
/ 18 декабря 2018

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

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.

...