最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

记录--Vue自定义指令实现加载中效果v-load（不使用Vue.extend）

来源：博客园

这里给大家分享我在网上总结出来的一些知识，希望对大家有所帮助

网站效果演示：ashuai.work:8888/#/myLoad


(资料图片)

GitHub仓库地址代码：github.com/shuirongshu…

加载中思路分析

实现加载中效果，一般有两种方式:

  • 第一种是：搞一个load组件，然后使用Vue.extend()方法去继承一个加载组件去使用，比如笔者的这篇文章：juejin.cn/post/702172…
  • 第二种是：直接使用指令去在需要加载的dom上去创建一个加载中的dom元素，并指定相应的样式即可。本篇文章说的是第二种。

我们先看一下效果图

v-load效果图

实现步骤一：加上自定义指令

假设我有一个dom元素，我给其加上一个自定义的指令v-load="loading"，绑定一个具体的布尔值loading，用于控制开启加载中和关闭加载中

111
loading: true.box {  width: 160px;  height: 80px;  border: 2px solid #666;}

接下来，我就要在自定义指令的相关钩子函数中去操作这个dom元素。

关于自定义指令的入门基础知识可以看官方文档，或者参见笔者之前的关于自定义指令的文章：juejin.cn/post/702960…

实现步骤二：给目标元素创建一个子元素dom用于加载

在自定义指令的初始化bind钩子函数中，我们可以拿到这个dom元素，首先给这个目标元素开始相对定位，让用于加载中的子元素dom去绝对定位，以这个相对定位的父元素进行参考

bind(el, binding) {    const target = el;    // 父元素相对定位    target.style.position = "relative";    // 子元素遮罩层部分    let loadChild = document.createElement("div");    loadChild.className = "loadClass";}

上述代码中给加载中的子元素loadChild指定一个样式类名loadClass

在这里小伙伴可能有疑问了，这个自定义指令的样式怎么写呢？自定义指令中也没有style标签啊？

是的，自定义指令中不能直接写样式，不过没关系，我们可以先写好一个css样式，然后引入过来使用啊，如下：

// 引入拆分的样式，便于自定义指令中使用import "./index.css"bind(el, binding) {    ......    loadChild.className = "loadClass";}

这样的话，className的样式，可以在引入的同级目录下的./index.css文件中设置了，loadClass样式如下：

.loadClass {    /* 宽高百分百 */    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    /* 默认背景色和颜色 */    background-color: rgba(255, 255, 255, 0.99);    color: #0b6ed0;    /* 透明度过渡使用搭配display:none; */    opacity: 0.8;    transition: all 0.3s;    /* 居中 */     display: flex;    align-items: center;    justify-content: center;}

注意，加载中效果开启和消失，不用使用vue自带的过渡组件transition，咱们可以使用透明度搭配搭配display:none;去设置

注意，加载中要以父元素为边界去控制，可不能满屏加载哦

然后初始化的时候，看看v-load绑定的值是true还是false，同时加上一个用于隐藏的类名：load-hide。再把这个加载中的dom元素追加到目标父元素身上。

loadChild.classList.add("load-hide") // 添加类名target.appendChild(loadChild); // 追加加载中子元素/* 通过透明度实现过渡动画 */.load-hide {    opacity: 0;}

这样的话，初始化的加载中就做好了。v-load绑定的值是false的时，就隐藏之

实现步骤三：当组件更新时，去添加或移除这个load-hide类名

componentUpdated(el, binding, vnode, oldVnode) {        let flag = binding.value        let loadChild = el.querySelector(".loadClass")        if (flag) { // v-load绑定的值为true，就移除这个类名，就能看到了            loadChild.style.display = "flex"            setTimeout(() => {                loadChild.classList.remove("load-hide")            }, 0);        } else { // 绑定的值为false时，再添加这个类名，同时隐藏dom            loadChild.classList.add("load-hide")            setTimeout(() => {                loadChild.style.display = "none"            }, 360);        }    },

注意上述代码中为啥不直接隐藏，而是使用定时器延长360毫秒再去隐藏，因为笔者设置的加载dom的过渡时间是0.3秒，即要等到透明度过渡完了以后，再隐藏加载中dom，这样看着就自然一些了。

.loadClass { transition: all 0.3s; }

到这里，咱们的v-load自定义指令的加载中效果，就初步完成了。不过功能有点少，自定义加载中我还想，去动态控制：

  • 自定义加载图标名
  • 自定义加载文字
  • 自定义加载文字颜色
  • 自定义加载背景色

那这样怎么办呢？

实现步骤四：优化自定义指令，支持传入更多的参数

此时，我的v-load自定义指令，就不用绑定一个布尔值了。可以考虑绑定一个对象啊，通过控制这个对象的具体值，来动态控制加载中的效果。

  • 原来自定义指令绑定：v-load = loading// typeof loading == "boolean"
  • 现在自定义指令绑定：v-load = loading2// typeof loading2 == "object"
222
// 如果想要有更多的配置项，就传一个对象，注意要指定字段loading2: {    value: true,    icon: "el-icon-eleme", // 自定义加载图标名    text: "客官稍等哦...", // 自定义加载文字    color: "red", // 自定义加载文字颜色    bgColor: "#baf", // 自定义加载背景色}

传参指定相应字段，自定义指令中接参，就要在相关的钩子中去接收并处理这些参数。

如何处理这些参数？

  • v-load绑定的值的类型的判断，是布尔值，还是对象，执行不同的操作
  • 使用原生js的方式去，创造dom元素、给dom元素指定类名（或添加删除类名）
  • 考虑到性能缘故，可以使用文档碎片优化document.createDocumentFragment()
  • 最后丢入遮罩层dom内部即可

完整代码

自定义指令样式文件index.css

.loadClass {    /* 宽高百分百 */    position: absolute;    top: 0;    bottom: 0;    left: 0;    right: 0;    /* 默认背景色和颜色 */    background-color: rgba(255, 255, 255, 0.99);    color: #0b6ed0;    /* 透明度过渡使用搭配display:none; */    opacity: 0.8;    transition: all 0.3s;    /* 禁止文字选择 */    user-select: none;    display: flex;    align-items: center;    justify-content: center;}/* 通过透明度实现过渡动画 */.load-hide {    opacity: 0;}.loadClass>i {    margin-right: 4px;}

自定义指令的js文件index.js

注意，自定义指令还需要注册一下才能使用哦

// 引入拆分的样式，便于自定义指令中使用import "./index.css"export default {    // 初始化绑定dom钩子函数    bind(el, binding) {        const target = el;        // 传参类型判断变量控制        let flag;        let isObj;        if (typeof binding.value == "boolean") {            flag = binding.value            isObj = false        }        if (typeof binding.value == "object") {            flag = binding.value.value            isObj = true        }        // 有dom元素才去做操作        if (target) {            // 父元素相对定位            target.style.position = "relative";            // 子元素遮罩层部分            let loadChild = document.createElement("div");            loadChild.className = "loadClass";            // 创建文档碎片性能稍微优化一点点            let fragment = document.createDocumentFragment()            // 孙子元素1加载图标部分            let iSun = document.createElement("i");            iSun.className = isObj ? binding.value.icon : "el-icon-loading";            // 孙子元素2文字提示部分            let spanSun = document.createElement("span");            spanSun.innerHTML = isObj ? binding.value.text : "加载中..."            // 使用文档碎片将iSun和spanSun装起来            fragment.appendChild(iSun);            fragment.appendChild(spanSun);            // 将文档碎片丢入子元素遮罩层内            loadChild.appendChild(fragment);            // 样式判断设置            if (isObj) {                loadChild.style.color = binding.value.color                loadChild.style.backgroundColor = binding.value.bgColor            }            // 若为false，就隐藏            if (!flag) {                loadChild.classList.add("load-hide")                loadChild.style.display = "none"            }            // 父元素添加子元素遮罩层使用            target.appendChild(loadChild);        }    },    // dom组件更新操作控制显示和隐藏    componentUpdated(el, binding, vnode, oldVnode) {        let flag = typeof binding.value == "boolean" ? binding.value : binding.value.value        let loadChild = el.querySelector(".loadClass")        if (flag) {            loadChild.style.display = "flex"            setTimeout(() => {                loadChild.classList.remove("load-hide")            }, 0);        } else {            loadChild.classList.add("load-hide")            setTimeout(() => {                loadChild.style.display = "none"            }, 360);        }    },}

使用自定义load指令的地方

<script>export default {  name: "myLoadName",  data() {    return {      // 自定义指令方式，默认绑定的值是布尔值      loading: true,      // 如果想要有更多的配置项，就传一个对象，注意要指定字段      loading2: {        value: true,        icon: "el-icon-eleme", // 自定义加载图标名        text: "客官稍等哦...", // 自定义加载文字        color: "red", // 自定义加载文字颜色        bgColor: "#baf", // 自定义加载背景色      },      tableData: [        {          name: "孙悟空",          age: 500,          home: "花果山水帘洞",          like: "桃子",        },        {          name: "猪八戒",          age: 88,          home: "高老庄",          like: "肉包子",        },        {          name: "沙和尚",          age: 1000,          home: "通天河",          like: "游泳",        },      ],    };  },  methods: {    loadFn() {      this.loading = !this.loading;      this.loading2.value = !this.loading2.value;    },  },};</script>

本文转载于:

https://juejin.cn/post/7182375025368891429

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

关键词：