Vue: 自定义指令

1.自定义指令

概念：自己定义的指令，可以封装一些DOM操作，扩展额外的功能

2.自定义指令语法

• 全局注册

  //在main.js中
  Vue.directive('指令名', {
    "inserted" (el) {
      // 可以对 el 标签，扩展额外功能
      el.focus()
    }
  })
  

• 局部注册

  //在Vue组件的配置项中
  directives: {
    "指令名": {
      inserted () {
        // 可以对 el 标签，扩展额外功能
        el.focus()
      }
    }
  }
  

3.自定义指令类型

• 全局注册

//main.js中  全局指令语法
Vue.directive(指令名称, {
  bind(ele, obj){}, //只执行一次，DOM渲染之前执行，里面可以进行样式操作
  inserted(ele, obj) {}, // 只执行一次；DOM渲染之后执行，里面可以进行行为操作
  update(ele, obj){}, // 数据更新后执行
  componentUpdated(ele, obj){}, // 父子组件都更新后执行
  unbind(ele, obj){}, // 指令解绑的时候执行
})

• 局部注册

// 某个组件中，局部指令语法：
export default {
  directive: {
    '指令名称': {
      bind(ele, obj){}, //只执行一次，DOM渲染之前执行，里面可以进行样式操作
      inserted(ele, obj) {}, // 只执行一次；DOM渲染之后执行，里面可以进行行为操作
      update(ele, obj){}, // 数据更新后执行
      componentUpdated(ele, obj){}, // 父子组件都更新后执行
      unbind(ele, obj){}, // 指令解绑的时候执行
    }
  }
}

• 使用指令

  注意：在使用指令的时候，一定要先注册，再使用，否则会报错
  使用指令语法： v-指令名。如：<input type="text" v-focus/>

  注册指令时不用加v-前缀，但使用时一定要加v-前缀

4.自定义指令-focus指令

<input type="text" v-focus/>

Vue.directive('focus', {
  // 进入页面，让元素自动获取焦点
  inserted(ele, binding) { // inserted会在指令所在的元素，被插入到页面中时触发
    console.log(ele) //绑定指令的元素
    console.log(binding) // 指令的一些信息（包括指令的值，binding.value）
    ele.focus()
  }
})

5.自定义指令-指令的值

语法

1.在绑定指令时，可以通过“等号”的形式为指令 绑定 具体的参数值

<div v-color="color">我是内容</div>

2.通过 binding.value 可以拿到指令值，指令值修改会 触发 update 函数

directives: {
  color: {
    inserted (el, binding) {
      el.style.color = binding.value
    },
    update (el, binding) {
      el.style.color = binding.value
    }
  }
}

6.自定义指令-loading指令

1.场景

实际开发过程中，发送请求需要时间，在请求的数据未回来时，页面会处于空白状态 => 用户体验不好

2.需求

封装一个 v-loading 指令，实现加载中的效果

3.分析

1.本质 loading效果就是一个蒙层，盖在了盒子上

2.数据请求中，开启loading状态，添加蒙层

3.数据请求完毕，关闭loading状态，移除蒙层

4.实现

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

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

3.结合自定义指令的语法进行封装复用

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

4.代码示例

<h3>需求2：Ajax请求数据，并设计loading指令</h3>
<!-- 安装 axios =>  npm i axios 或者 yarn add axios -->
<!-- list数据为空，加loading类，让loading图片显示 -->
<!-- list数据不为空，移除loading类，让loading图片隐藏 -->
<!-- <ul :class="{loading:list.length <= 0}"> //通过动态类名也能实现 -->
<ul v-loading="list.length">
  <li v-for="item in list" :key="item.id" class="news">
    <div class="left">
      <div class="title">{{item.title}}</div>
      <div class="info">
        <span>{{item.source}}</span>
        <span>{{item.time}}</span>
      </div>
    </div>
    <div class="right">
      <img :src="item.img" alt="" />
    </div>
  </li>
</ul>

<script>
import axios from 'axios'
export default {
  directives: {
    // 指令名:{}
    loading: { 
      // 刷新页面后，立即判断有没有数据，loading图片要不要显示
      inserted(ele, obj) { // 只执行一次 // ele是使用指令的元素， obj.value指令的值
        obj.value <=0 ? ele.classList.add('loading') : ele.classList.remove('loading')
      },
      update(ele, obj) { // data数据更新后执行
        obj.value <=0 ? ele.classList.add('loading') : ele.classList.remove('loading')
      }
    }
  },
  data() {
    return {
      list:[]
    }
  },
  async created() { // 安装 axios =>  npm i axios 或者 yarn add axios
    const {data:res} = await axios.get('http://hmajax.itheima.net/api/news')
    console.log(res.data)
    setTimeout(() => {
      this.list = res.data
    }, 2000)
  }
}
</script>