代码之家 › 专栏 › 技术社区 › squeekyDave

滚动到Vue中模式窗口的底部

vue-component vue.js node.js javascript

0

squeekyDave · 技术社区 · 7 年前

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

2 回复 | 直到 7 年前

1

Ohgodwhy 7 年前

确保自定义模式组件发出事件:

this.$emit('open', true)

向模态分量添加一个引用,并观察 open 事件:

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

打开后,滚动到底部:

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

只有在 modal 组件是带有 overflow-y: auto 风格。

如果不是这样,则将逻辑移入模态组件,并将引用赋给具有 溢出-Y:自动 风格。

2

0

zbads 7 年前

试试纯JS怎么样?

modal.scrollTop = modal.scrollHeight

我不确定这是否是最好的答案,但是因为我来自jquery,并且在Vue中没有找到通常的“易于使用”函数,所以我通常使用纯javascript来实现它(通常用mixin包起来,例如“dommixins”)。希望它有帮助。