我在模态中有一个 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
组件的顶级元素是具有 overflow-y: auto
样式的 div 时,此方法才有效。
如果情况并非如此,请将逻辑移至模式组件中,并将 ref 分配给具有 overflow-y: auto
样式的元素。
关于javascript - 滚动到 Vue 中模式窗口的底部,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53834648/