vue如何实现按需加载,vue自定义指令懒加载

　　本文主要介绍vue自定义加载指令的相关知识，主要包括创建加载组件和指令的方法。用示例代码非常详细的介绍给你，有需要的朋友可以参考一下。

前言

　　用过element-ui的人都应该知道，里面有一个加载组件，有两种调用方式：指令和服务。但是只有一个加载效应。为了丰富加载效果，方便使用，编写了自定义加载指令。

创建加载组件

　　首先你需要创建一个加载组件来展现所需的加载效果，这个因人而异，这里就不赘述了。

创建指令

指令文件

　　首先，创建一个用于编写自定义指令的js文件，并在该文件中导入Vue和加载组件：

　　从“vue”导入Vue

　　从导入装载。/loading.vue

创建构造器

　　它主要使用Vue.extend构造函数，可以简单理解为一个类，把一个组件作为参数传入，然后返回该组件。您可以使用该类创建一个实例。

　　//加载组件作为参数传入

　　const loading constructor=vue . extend(加载)

书写指令

　　在此之前，设置指令的参数。在我的项目中，参数有两种方式：1。传入一个布尔值，指示是否开始加载；2.传入一个对象，该对象包含是否打开蒙版、提示文本和加载背景色等属性。方便开发的时候，老丁是高度定制的。

　　指令的触发主要在update中，可以接收一个函数，每次指令的参数变化都会触发这个函数，也就是在这里判断加载效果是开启还是关闭。整体代码如下，并附有详细注释：

　　const loadingDirective=Vue={

　　Vue.directive(custLoading ，{

　　/**

　　*装订：

　　* 1.一个参数可以分布，是布尔值；

　　* 2.json也可以用来传输多个参数{加载，提示，后台}

　　* 2.1加载{boolean}是否打开掩码？

　　* 2.2提示{string}提示文本

　　* 2.3背景{string}加载背景颜色

　　* */

　　//update:参数变化时触发。

　　更新：函数(el，binding，vnode) {

　　常数值=binding.value

　　let backup={}

　　//判断参数类型，将所有参数转换为对象，便于后续统一处理。

　　typeof value===boolean ？(backup . loading=value):(backup=value { })

　　//取出所有参数

　　const {加载，提示，背景}=备份

　　//根据加载参数判断加载效果是开启还是关闭。稍后将讨论开启和关闭功能。

　　正在加载？createLoading(el，tip，background) : close(el？customLoadingInstance？$el)

　　//unbid:卸载指令时触发。

　　unbind:函数(el，binding) {

　　const { loading }=binding . value { }

　　//如果还在显示加载效果，就关闭。

　　装载关闭(el？customLoadingInstance？$el)

　　}

　　})

　　}

　　导出默认加载方向

开启函数

　　在上面的指令中，当open参数为true时，会回调一个createLoading函数，为指令挂载的元素添加加载效果。具体思路如下：1。调用时，我们给它传入了三个参数，即用自定义加载指令挂载的元素、加载时的提示和加载背景色。详见上述指令代码。2.在执行之前，需要判断当前的Vue实例是否在服务器上运行。如果有，此时就不需要显示加载效果；或者之前是否加载过该元素，如果是，就不需要再打开了，否则会出现多层加载的效果，显得多余，让页面显得混乱。3.确定需要使用加载效果的元素是否仍然存在。如果没有，将它安装在#main或document.body 4上。判断元素上是否有定位或其他条件。在我的项目中，使用绝对定位来使加载效应遍布整个单元，因此需要做出判断。如果没有定位，就加上相对。5.使用loadingConstructor创建一个加载实例，并通过appendChild将该实例作为子元素放入要显示的元素中，以便显示；同时，在显示的元素中添加一个属性customLoadingInstance，记录当前的加载实例，方便后续的销毁。

　　整体代码如下：

　　Const create loading=(target，tip=正在加载，请稍候.，背景)={

　　//确定是否允许打开加载特效。

　　if(vue . prototype . $ is server target？customLoadingInstance)返回

　　const mainEL=document . query selector(# main)

　　//确定显示加载效果的元素是否存在。

　　const parent node=target mainEL document . body

　　//确定父级是否有定位，如果没有，添加定位。

　　const position=getComputedStyle(parent node)？位置

　　(!position position=== static )(parent node . style . position= relative )

　　//创建加载实例

　　const instance=new loading constructor({

　　el: document.createElement(div )，

　　data: { background，tip，parent node width:parent node . client width，isShow: true }

　　})

　　//注意：加载实例是Vue组件对象，真正的DOM放在实例的$el属性上

　　parentNode.appendChild(实例。$el)

　　parent node . customloadinginstance=instance

　　返回实例

　　}

关闭函数

　　如果你开始了，你就得结束。当打开参数为假时，加载效果将被关闭。这个函数接收加载实例的$el，实际上是加载效果的DOM元素。思路如下：1 .为了让加载组件看起来是逐渐消失的，你不要第一时间删除加载效果的DOM元素，而是给它添加一个逐渐消失的动画，并按类设置。2.设置动画消失时间，加载组件将在指定时间内完成整个加载效果或淡出页面。也可省略此步骤，直接就将其移除。增加这个效果是为了让用户在视觉上感觉更好。3.创建一个定时器，在加载效果消失时删除加载效果的DOM元素。同2，也可直接移除。

　　常数close=(目标)={

　　如果(！目标)回报

　　//添加消失的类

　　自定义-加载-消失

　　//获取加载实例

　　const实例=目标？parentNode？customLoadingInstance

　　//设置消失时间。

　　实例？$data？dur(实例。$data.dur=0.8)

　　//设置一个定时器，当加载效果消失时，删除加载效果的 DOM 元素。

　　让timer=setTimeout(()={

　　if (target target.parentNode) {

　　//将customLoadingInstance属性设置为null，以免干扰下一次打开。

　　target . parent node . customloadinginstance=null

　　//移除加载效果的DOM元素

　　target.parentNode.removeChild(目标)

　　}

　　清除超时(定时器)

　　计时器=空

　　}, 1100)

　　}

　　这就是这篇关于vue自定义加载说明的文章。有关vue定制加载指令的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。