vue scrollTop的使用方法

寫了一個獲取命令行記錄的組件，用到了scrollTop的方法，做個筆記。

 

 

this.$nextTick(() => {
                this.$refs.cmdlist.scrollTop = this.$refs.cmdlist.offsetHeight;
            });

這里我需要通過cmdlist這個div來控制我的滾動條，所以對這個div用來scrollTop的方法，后面的  offsetHeight  就是獲取當前我加滾動條的div的高度（因為加了滾動條，並不能獲取到div的實際高度值），

當然這個div里面一定不能加float，一定不能加！！！！！要不然這個offsetHeight  的方法是不能獲取到div的高度的.

 

然后我需要通過輸入框輸入的值，對數據進行記錄。大概就是這樣子的。

 

 

 

 

 data() {
        return {
            curdatalist: [],
            dataList: "",
        };
    },
    methods: {
        clickCommend() {
            this.curdatalist.push({
                text: this.dataList,
            });
            this.dataList = "";
            this.$nextTick(() => {
                this.$refs.cmdlist.scrollTop = this.$refs.cmdlist.offsetHeight;
            });
        },
    },

這邊主要用到了v-model綁定，和回車鍵的事件

 @keyup.enter="clickCommend

 

然后就是用到了 scrollTop 這個方法。