vue自定義指令v-scroll（directive）

vue開發中，不少地方若是說都用到了某一方法，咱們就能夠進行指令化封裝，經過自定義指令來實現這裏經過兩個例子說明vue-Directive的使用

1.v-focus

主要用來實現頁面加載進來的時候文本框自動獲取焦點，由於原生的方法存在兼容問題，因此經過指令 來解決後能夠解決部分兼容 問題

實現以下：

import Vue from 'vue'
 
Vue.directive('focus',{
inserted: function (el) {
el.focus();
}
})

 

通常咱們將自定義指令放在directive文件夾中，而後經過主入口文件引入

而後再main.js文件中import導入便可

下來咱們就能夠中使用咱們的v-focus指令，使用後頁面再加載完畢後文本框就會自動得到焦點

下來咱們實現v-scroll滑倒底部進行數據的請求加載

要實現滑動到底部咱們須要進行計算，計算滾動條的top值以及clientHeight

scroll.js

import Vue from 'vue'
 
Vue.directive('scroll',{
inserted: function (el,binding,vnode,oldVnode) {
let scrollHeight = el.offsetHeight,
cb_name = binding.expression,
cb = vnode.context[cb_name];
el.addEventListener('scroll', async () => {
if(scrollHeight + el.scrollTop>= el.firstChild.clientHeight) {
try{
cb && await cb();
}
catch(error)
{
console.log(error)
}
}
})
}
})

 

將上述代碼放入scroll.js文件中，放入directive文件中也經過index文件導入，咱們就能夠使用

引用：

<template>
  <div class="container">
    <div class="header">這裏是頭部</div>
    <div class="section"   v-scroll="loadingMore">
      <ul>
        <li class="list">
          1.自定義指令v-focus:<input v-focus type="text">
        </li>
        <li class="list">
          2.自定義指令v-title:<span v-title="msg"></span>
        </li>
        <li class="list">
          3.自定義指令v-scroll: v-scroll
        </li>
        <li class="list">
          4
        </li>
        <li class="list">5</li>
        <li class="list">6</li>
        <li class="list">7</li>
        <li class="list">8</li>
        <li class="list">9</li>
        <li class="list">10</li>
        <li class="list">11</li>
        <li class="list">12</li>
        <li class="list">13</li>
        <li class="list">14</li>
        <li class="list">15</li>
        <li class="list">16</li>
        <li class="list">17</li>
        <li class="list">18</li>
        <li class="list">19</li>
        <li class="list">20</li>
        <li class="list">21</li>
        <li class="list">22</li>
        <li class="list">23</li>
        <li class="list">24</li>
        <li class="list">25</li>
        <li class="list">26</li>
        <li class="list">27</li>
        <li class="list">28</li>
        <li class="list">29</li>
        <li class="list top" @click="Top('回到頂部',$event)" style="text-align: center;"><i class="iconfont icon-shangshuangjiantou">Top</i></li>
      </ul>
    </div>
    <div class="footer">這裏是底部</div>
  </div>
</template>
<script>
    export default {
      data () {
        return {
          msg: "這裏是自定義指令v-title",
          num: 29
        }
      },
      methods: {
        creatLi: function (el) {
          return document.createElement(el);
        },
        loadingMore: function () {
          let s = new Promise((resolve,reject) => {
            this.$http.get("query",{name:"任嘉慧"})
              .then(res => {
                console.log("數據請求成功："+ res.data);
                //console.log(res.data.name);//獲取數據
                let oLi = this.creatLi('li');
                oLi.className = 'list';
                this.num += 1;
                oLi.innerHTML = this.num + "." + res.data.name;
                let oTop = document.querySelector('.top');
                oTop.parentNode.insertBefore(oLi,oTop);
//              可經過resolve發送給後端一些參數:resolve(res.data.xxx);
              })
              .catch(error => {
                console.log(error);
              })
          });
        },
        Top: function (prompt,res) {
//          console.log(prompt,res);
          document.getElementsByClassName('section')[0].scrollTop = 0;
        }
      }
    }
</script>
<style>
  @import "../../assets/styles/iconfont.css";
.container {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}
  .header,.footer {
    width: 100%;
    height: 120px;
    line-height: 120px;
    text-align: center;
    
  }
  .section {
    width: 100%;
    flex: 1;
    
    overflow-y: auto;
  }
  .list {
    width: 100%;
    height: 90px;
    line-height: 90px;
    text-align: left;
    border-bottom: 1px solid #999988;
  }
</style>

 

以上代碼再滾動到底部時，就去發起一次請求

 

這裏是v-title的使用，該指令沒有任何功能只是對指令用法的簡單使用

import Vue from 'vue'
 
Vue.directive('title',{
inserted: function (el,binding) {
console.log(el);//el爲指令所在元素
console.log("binding.name:" + binding.name);//binding.name是指令的名稱不包含v-
console.log("binding.expression:" +binding.expression);
console.log("binding.value:" +binding.value);
el.innerHTML = binding.value;
}
});

這裏總結及使用不是很全，若是想是使用其餘的功能，博主推薦 https://cn.vuejs.org/v2/guide/custom-directive.html