5.从零开始学会Vue--{{自定义指令与插槽}}

1.自定义指令(directives)

1.用法

定义：除了Vue内置指令以外的其他 v-开头的指令（需要程序员自行扩展定义）
作用：自己定义的指令, 可以封装一些 dom 操作，扩展额外功能

语法：
① 局部注册
●inserted:被绑定元素插入父节点时调用的钩子函数
●el：使用指令的那个DOM元素

② 全局注册

//在main.js中
// 全局注册v-focus1
Vue.directive('focus1',{
  inserted(el,binding){
    console.log(binding);
    el.focus()
  }
})

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

示例：
<script>
export default { 
  directives:{
     // 局部注册一个focus的指令
     'focus':{
      // el：表示使用了这个指令的dom对象
      // binding: 描述当前自定义指令的相关属性的一个对象，其中包含了给这个指令赋值的数据
        inserted(el,binding){
          console.log(binding)
          el.focus()  //让文本框自动聚焦
        }
     }
  }

}
</script>

在使用指令的时候，一定要先注册，再使用，否则会报错
注册指令时不用加v-前缀，但使用时一定要加v-前缀

2.指令的值

需求: 实现一个 color 指令 - 传入不同的颜色, 给标签设置文字颜色

步骤：
① 定义指令：通过 binding.value 可以拿到指令值，指令值修改会触发 update 函数

② 使用指令：通过“等号”的形式为指令绑定具体的参数值

<template>
  <div>
    <h2 v-color="color1">指令的值1测试</h2>
    <h2 v-color="color2">指令的值2测试</h2>
    <button @click="color1='green'">
        改变第一个h1的颜色
    </button>
  </div>
</template>

<script>
export default {
  data () {
    return {
      color1: 'red',
      color2: 'orange'
    }
  },
  directives: {
    color: {
      // 1. inserted 提供的是元素被添加到页面中时的逻辑
      inserted (el, binding) {
        // console.log(el, binding.value);
        // binding.value 就是指令的值
        el.style.color = binding.value
      },
      // 2. update 指令的值修改的时候触发，提供值变化后，dom更新的逻辑
      update (el, binding) {
        console.log('指令的值修改了');
        el.style.color = binding.value
      }
    }
  }
}
</script>

<style>

</style>

3.案例

<template>
  <dl>
    <dt>用户名:</dt>
    <dd>
      <input
        type="text"
        class="uname"
        v-validate="/^[a-zA-Z0-9]{6,16}$/"
        data-message="输入6~16位数字字母组成"
      />
    </dd>
  </dl>
</template>

<script>
export default {
  directives: {
    validate: {
      inserted(el, binding) {
        // console.log(el, binding);
        // <dd class="tip" ></dd>
        function vali() {
          const reg = binding.value;
          let isOK = reg.test(el.value);
          // console.log(isOK);
          document.querySelector(".tip") &&
            document.querySelector(".tip").remove();
          if (!isOK) {
            const ddbox = document.createElement("dd");
            ddbox.className = "tip";
            ddbox.innerHTML = el.dataset.message;
            el.parentNode.parentNode.append(ddbox);
          }
        }

        vali();

        el.addEventListener("input", function () {
          vali();
        });
      },
    },
  },
};
</script>

<style>
dt,
dd {
  margin: 0;
  position: relative;
}

dl {
  display: flex;
  width: 600px;
  height: 30px;
  line-height: 30px;
}

dl dt {
  margin-right: 5px;
}

dl input {
  width: 269px;
  height: 28px;
  padding-left: 5px;
  border: 1px solid #ccc;
  outline: none;
  background: transparent;
  line-height: 30px;
  border-radius: 5px;
}

.tip {
  /* display: none; */
  position: relative;
  width: 220px;
  height: 30px;
  margin-left: 15px;
  border: 1px solid #f59fb1;
  color: #d93c3c;
  text-align: center;
  font-size: 14px;
  background-color: #fff2f5;
  border-radius: 5px;
}

.tip::before {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  width: 10px;
  height: 10px;
  background-color: #fff2f5;
  border-left: 1px solid #f59fb1;
  border-bottom: 1px solid #f59fb1;
  transform: translateY(-50%) rotate(45deg);
}
</style>