update: 滚动指令

src/main.js

@@ -4,6 +4,7 @@ import axios from 'axios';
 import App from './App.vue';
 import router from './router';
 import store from './store';
+import '../utils/directives.js';
 
 axios.defaults.withCredentials = true;
 Vue.config.productionTip = false;

src/views/module-a/home-view.vue

 <template>
-  <div class="home">
+  <div class="home" v-loadmore:[target]="onLoadMore">
     <img class="logo" alt="Vue logo" src="../../assets/logo.png" />
     <dm-sub-title text="hello world"></dm-sub-title>
+    <div style="width: 300px; height: 100px; overflow-y: auto" id="test">
+      <div
+        v-for="el in 20"
+        :key="el"
+        style="height: 20px; line-height: 20px; border: 1px solid red"
+      >
+        {{ formatters.formatDate(Date.now()) }}
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: 'HomeView',
+  inject: ['formatters'],
+  data() {
+    return {
+      target: '#test',
+    };
+  },
+  methods: {
+    onLoadMore() {
+      console.log('hello');
+    },
+  },
 };
 </script>
 

utils/directives.js

+import Vue from 'vue';
+
+const directive = {
+  loadmore: {
+    inserted(el, binding) {
+      let DOM = el;
+      if (binding.arg) {
+        DOM = el.querySelector(binding.arg);
+      }
+      DOM.addEventListener('scroll', function () {
+        const CONDITION =
+          this.scrollHeight - this.scrollTop <= this.clientHeight;
+        if (CONDITION) {
+          binding.value();
+        }
+      });
+    },
+  },
+};
+
+Object.keys(directive).forEach((k) => {
+  Vue.directive(k, directive[k]);
+});