滚动到Vue中模态窗口的底部答案

【问题标题】：Scroll to bottom of a modal window in Vue滚动到Vue中模态窗口的底部
【发布时间】：2019-05-18 23:11:53
【问题描述】：

我在模式中有一个 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>

【问题讨论】：

标签： javascript node.js vue.js vue-component

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

简单的方法：

将 id="SomeName" 放在 Modal 的可滚动元素上（可能是完整的内容）然后添加 div class="modal ...... @focus="handleOpenNews" 并添加到方法中：

handleOpenNews() {
   document.getElementById('SomeName').scrollTo...you needs
 }

【讨论】：

【解决方案3】：

试试纯 JS 怎么样？

modal.scrollTop = modal.scrollHeight

我不确定这是否是最好的答案，但由于我来自 JQuery 并且没有在 Vue 中找到通常的“易于使用”的功能，我通常使用纯 javascript 来实现它（通常将它包装在一个mixin，例如'domMixins'）。希望对您有所帮助。

【讨论】：

【解决方案4】：

确保您的自定义模态组件发出事件：

this.$emit('open', true)

为您的模态组件添加一个引用并观察open 事件：

<modal @open="handleOpen" ref="myModal">

当它打开时，滚动到底部：

handleOpen() {
    this.$refs.myModal.scrollTop = this.$refs.myModal.scrollHeight
}

这只有在modal 组件的顶级元素是overflow-y: auto 样式的div 时才有效。

如果不是这种情况，请将逻辑移动到模态组件中，并将 ref 分配给具有 overflow-y: auto 样式的元素。

【讨论】：