【vue2第十三章】自定义指令自定义v-loading指令-Toy模板网

这篇具有很好参考价值的文章主要介绍了【vue2第十三章】自定义指令自定义v-loading指令。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

自定义指令

像 v-html，v-if，v-for都是vue内置指令，而我们也可以封装自定义指令，提升编码效率。

什么是自定义指令？
自己定义的一些指令，可以进行一些dom操作，扩展格外的功能。比如让图片懒加载，让input自动聚焦。
自定义指令又分为全局注册和局部注册。
【vue2第十三章】自定义指令自定义v-loading指令,vue,vue.js,javascript,前端,html,开发语言,前端框架
使用方法则是与内置指令一样，直接在标签上写v-指令名即可。

全局注册指令：
在main.js中为vue对象添加：

//focus是指令名称
Vue.directive('focus',{
//inserted是指令的生命周期函数，指再页面中插入此元素时调用
  inserted(el){
//为元素聚焦
    el.focus()
  }
} 
)

使用直接在标签上面写v-指令名称即可：

    <input  type="text" v-focus :value="msg"  ref="inp">

局部注册与使用：

<template>
  <div>
    <!-- 添加v-指令名称 v-focus -->
    <input  type="text" v-focus :value="msg"  ref="inp">
  </div>
</template>

<script>
export default {
    data(){
        return{
        }
    },
    props:{
        msg:String
    },
    mounted(){
    },
    //在directives中写指令
    directives:{
        //指令名称
        "focus":{
            //在指令被插入到页面中时调用
            inserted(el){
                //el代表内添加v-focus的元素，为它聚焦    
                el.focus()
            }
        }
    }
}
</script>

实现一个自定义指令

定义一个color指令为标签修改颜色，color指令需要一个颜色值，传入不同的值，标签文字显示不同颜色
通过binding.value可以取到当前指令的值，再通过value去修改标签。
代码：

<template>
  <div>
    <div v-color="color1">你好 vue</div>  
    <div v-color="color2">你好 vue</div>  

  </div>
</template>

<script>
export default {
    data(){
        return{
            color1:'red',
            color2:'blue'
        }
    },
    props:{
        msg:String
    },
    mounted(){
    },
    //在directives中写指令
    directives:{
        //指令名称
        "color":{
            //在指令被插入到页面中时调用
            inserted(el,binding){
                //el代表内添加v-color的元素，为它添加字体颜色  
                el.style.color=binding.value
            },
            //在属性值更新时调用
            update(el,binding){
                //为color更新颜色
                el.style.color=binding.value
            },
        }
    }
}
</script>

效果：
【vue2第十三章】自定义指令自定义v-loading指令,vue,vue.js,javascript,前端,html,开发语言,前端框架
其中修改data的color1和color2就会修改字体颜色。
总结：

v-loading指令封装

【vue2第十三章】自定义指令自定义v-loading指令,vue,vue.js,javascript,前端,html,开发语言,前端框架
分析:

1.本质loading 效果就是一个蒙层，盖在了盒子上
2.数据请求中，开启loading状态，添加蒙层
3.数据请求完毕，关闭loading状态，移除蒙层

具体步骤实现:
1.准备一个loading 类，通过伪元素定位，设置宽高，实现蒙层

.loading:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background:#fff url('./assets/91jiazai.png') no-repeat center;
}

2.开启关闭 loading 状态(添加移除蒙层)，本质只需要添加移除类即可

export default {
  name: "App",
  data() {
    return {
    //显示内容
      msg: "你好!vue",
      //判断是否加载成功
      isloading:true
    };
  },
  created(){
  //模拟发送请求，返回数据花费了3秒钟
    setTimeout(() => {
      console.log(this.msg);
      //接收数据成功，将数据改为false显示页面
      this.isloading = false;
    }, 3000);
  },
      //在directives中写指令
      directives:{
        //指令名称
        "loading":{
            inserted(el,binding){
              //如果值为true添加伪类 ，否则不添加
              binding.value?el.classList.add('loading'):el.classList.remove('loading')
            },
            update(el,binding){
            //如果值为true添加伪类 ，否则不添加
              binding.value?el.classList.add('loading'):el.classList.remove('loading')
            }
        }
    }
};

3.结合自定义指令的语法进行封装复用
为标签添加v-loading = “数据”

<template>
  <div id="app">
    <div class="box" v-loading="isloading">
      {{ msg }}
    </div>
</div>
</template>

效果进入页面时：
【vue2第十三章】自定义指令自定义v-loading指令,vue,vue.js,javascript,前端,html,开发语言,前端框架
模拟请求完成之后：
文章来源地址https://www.toymoban.com/news/detail-699005.html

到了这里，关于【vue2第十三章】自定义指令自定义v-loading指令的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

【vue2第十三章】自定义指令自定义v-loading指令

自定义指令

实现一个自定义指令

v-loading指令封装

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

【vue2第十三章】自定义指令 自定义v-loading指令

自定义指令

实现一个自定义指令

v-loading指令封装

相关文章

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

支付宝扫一扫领取红包，优惠每天领

二维码1

二维码2

【vue2第十三章】自定义指令自定义v-loading指令