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

Z时代
2024-01-10
分类：综合

vue

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

以上是 vue自定义指令v-scroll（directive）的全部内容，来源链接： utcz.com/z/377383.html