Vue 自定义组件

1、自定义指令

我们还可以通过 Vue 提供的方法来自定义指令。

1-1、注册指令

vue 提供了两种指令注册方式

• 全局指令
• 局部指令

1-2、全局指令注册

Vue.directive('指令名称', {指令配置});

1-3、局部指令注册

new Vue({
  el: '#app',
  directives: {
    '指令名称': {指令配置}
  }
});

在使用指令的时候，需要使用 v-指令名称 的方式来调用，注册的时候不需要。

1-4、指令生命周期（钩子函数）

指令的运行方式很简单，它提供了一组指令生命周期钩子函数，我们只需要在不同的生命周期钩子函数中进行逻辑处理就可以了

• bind : 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置
• inserted : 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)
• update : 所在组件更新的时候调用（但是可能发生在其子 VNode 更新之前）。
• componentUpdated : 所在组件及其子组件更新完成后调用
• unbind : 只调用一次，指令与元素解绑时调用

不同的生命周期钩子函数在调用的时候同时会接收到传入的一些不同的参数

• el : 指令所绑定的元素，可以用来直接操作 DOM
• binding : 一个对象，包含以下属性：
  • name : 指令名，不包括 v- 前缀
  • value : 指令的绑定值（作为表达式解析后的结果）
  • expression : 指令绑定的表达式（字符串）
  • arg : 传给指令的参数，可选
  • modifiers : 传给指令的修饰符组成的对象，可选，每个修饰符对应一个布尔值
  • oldValue : 指令绑定的前一个值，仅在 update 和 componentUpdated 钩子中可用，无论值是否改变都可用

 <script>

        Vue.directive('drag', {
            bind(el, binding) {
                
                // console.log(el);
                console.log(binding);
                // let {value} = binding;

                el._canDrag = binding.value;

                let x = 0;
                let y = 0;
                let isDown = false;

                el.addEventListener('mousedown', e => {

                    if (!el._canDrag) return;

                    isDown = true;
                    x = e.clientX - el.offsetLeft;
                    y = e.clientY - el.offsetTop;

                    e.preventDefault();
                });

                document.addEventListener('mousemove', e => {
                    if (isDown) {
                        let l = e.clientX - x;
                        let t = e.clientY - y;

                        if (binding.modifiers.limit) {
                            if (l < 0) {
                                l = 0;
                            }
                        }

                        el.style.left = l + 'px';
                        el.style.top = t + 'px';
                    }
                });

                document.addEventListener('mouseup', e => {
                    isDown = false;
                });

            },

            componentUpdated(el, binding) {
                el._canDrag = binding.value;
            }
        });

        let app = new Vue({
            el: '#app',
            data: {
                canDrag: false
            }
        });