Vue2五、自定义指令，全局局部注册、指令的值，插槽--默认插槽，具名插槽 ( 作用域插槽)

news2024/12/23 14:25:31

一、自定义指令

使用步骤

1. 注册 (全局注册或局部注册) ，在 inserted 钩子函数中，配置指令dom逻辑

2. 标签上 v-指令名使用

1、自定义指令（全局）

Vue.directive("指令名"，{ 指令的配置项 inserted () { } }

2、自定义指令（局部）

directives: { "指令名": { inserted ( ) { 可以对 el 标签，扩展额外功能 el.focus( ) } } }

3、指令的值

指令值的语法：

① v-指令名 = "指令值" 可以绑定指令的值 ② 通过 binding.value 拿到指令的值

③ 通过 update 钩子，指令的值被修改的时候自动触发update钩子

、

参数1:当前加了指令的标签。参数2:获取指令值，binding.value

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

directives: {

//color自定义指令名
//参数1:当前加了指令的标签
//参数2:获取指令值，binding.value
----------------------------------------------------------
color: {
//------------------------------------------加载在标签上-----
inserted (el, binding) {
el.style.color = binding.value
},
//指令的值被修改的时候自动触发update钩子-----------改值--------
update (el, binding) {
el.style.color = binding.value
}
}
}

v-loading指令封装-简单练

App.vue

<template>
  <div id="app">
    <h1 v-color="color1">自定义指令</h1>
    <h1 v-color="color2">自定义指令</h1>
  </div>
</template>

<script>
export default {
data(){
  return{
    color1:'red',
     color2:'blue',
  }
},
//自定义指令的值
directives:{
  color:{
     // 指令加载在标签时
      //参数1:加自定义指令的标签（当前加了指令的便签）,参数2:获取指令值，binding.value
      inserted(el,binding){
        console.log(el,binding)// <h1>自定义指令</h1>  red
        el.style.color=binding.value
      },
      // 指令的值被修改的时候自动触发update钩子
      update(el,binding){
      el.style.color=binding.value
      }
  }
}
}
</script>
<style>
</style>

例：v-loading加载中...

核心思路：

(1) 准备类名 loading，通过伪元素提供遮罩层

(2) 添加或移除类名，实现loading蒙层的添加移除

(3) 利用指令语法，封装 v-loading 通用指令

inserted 钩子中， binding.value 判断指令的值，设置默认状态

update 钩子中， binding.value 判断指令的值，更新类名状态

<template>
  <div class="box" v-loading="isLoading">//----------------------使用自定义命令------
    <ul>
      <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>
  </div>
</template>
<script>
// 用添加删除类名loading的方式控制是否加载 → 布尔数据控制添加删除类 → 指令值 默认是true 请求回数据false
// 指令要修改值 → 指令得有值 → 2个钩子都要写----

// 安装axios =>  yarn add axios
import axios from 'axios'
// 接口地址：http://hmajax.itheima.net/api/news
// 请求方式：get
export default {
  data () {
    return {
      list: [],
      isLoading: true//----------------------------默认刚打开页面是加载中------
    }
  },
    //------------------------------------封装自定义指令----------------------
  directives: {
    loading: {
      inserted (el, binding) {
        // isLoading值为true 添加类名，否则删除类名
        // this.isLoading ? el.classList.add('loading') : el.classList.remove('loading')
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      },
      //值被修改时---------------------等请求回数据时，移除加载中图片的显示（）
      update (el, binding) {
        binding.value ? el.classList.add('loading') : el.classList.remove('loading')
      }
    }
  },
  async created () {
    // 1. 发送请求获取数据
    const res = await axios.get('http://hmajax.itheima.net/api/news')
    
    setTimeout(() => {
      // 2. 更新到 list 中，用于页面渲染 v-for
      this.list = res.data.data
      this.isLoading = false
    }, 2000)
  }
}
</script>

<style>
/* 通过css添加一个伪元素 → 假的标签 */
.loading::before {
  /* 必填属性 */
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* center 一个center表示背景图位置 水平和垂直都居中 */
  background: #fff url(./loading.gif) no-repeat center;
}
.box {
  width: 800px;
  min-height: 500px;
  border: 3px solid orange;
  border-radius: 5px;
  position: relative;
}
.news {
  display: flex;
  height: 120px;
  width: 600px;
  margin: 0 auto;
  padding: 20px 0;
  cursor: pointer;
}
.news .left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 10px;
}
.news .left .title {
  font-size: 20px;
}
.news .left .info {
  color: #999999;
}
.news .left .info span {
  margin-right: 20px;
}
.news .right {
  width: 160px;
  height: 120px;
}
.news .right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
</style>