vue的自定義指令

注意點：bind 和 inserted

共同點： dom插入都會呼叫，bind在inserted之前

不同點：
    bind 時父節點為 null
    inserted 時父節點存在，
    bind是在dom樹繪制前呼叫，inserted在dom樹繪制后呼叫

bind: function (el) {
    console.log('bind',el.parentNode)  // null
},
inserted: function (el) {
    console.log('inserted',el.parentNode)  // <div>...</div>
}

注意：自定義指令的鉤子里面沒有vue實體，this指向undefined；

自定義指令的作用是用于對DOM元素進行底層操作

鉤子函式

• bind 類似于created 只呼叫一次，指令第一次系結到元素時呼叫，此時被系結元素在頁面上還不存在；

• inserted 類似于mounted ,被系結元素插入到dom的時候執行，此時該元素在頁面上已經存在了；

• update 被系結元素所在的模板更新時呼叫，而不論系結值是否變化，通過比較更新前后的系結值，可以忽略不必要的模板更新；

• componentUpdated 被系結元素所在模板完成一次更新周期時呼叫；

• unbind 只呼叫一次，指令與元素解綁時呼叫；

鉤子函式內的引數

• el: 被系結的元素，可以用來直接操作 DOM el.innerHTML 、 el.addEventListener

• binding: 一個物件, 指的是指令本身 v-abc:xxx.a.b.c="abcde"

[arg] 動態指令引數

v-myDirectiveValue:[argument]="value"

注：具體看官網解釋

未指明鉤子函式時，默認bind和update中

const vm = new Vue({
            el: "#app",
            data: {
                
            },
            //自定義區域指令的時候，如果直接跟一個函式，沒有寫(bind inserted update)的時候，就相當于把該函式寫到了bind和update中
            directives:{
                fontSize:function(el,binding){
                    el.style.fontSize = binding.value+'px'
                }
            }
        })

font-size的設定

 directives:{
        fontSize:function(el,binding){
            el.style.fontSize = binding.value+'px'
        }
 }

使用

<template>
    <div>
        <div v-fontSize='40'>牛奶</div>
    </div>
</template>
<script>

export default {
    name: 'homePage',
    components:{
        test
    },
    data() {
        return {
            test:''
        }
    },
    created(){
    },
    computed:{
    },
    methods:{
   
    },
    mounted() {
        console.log(this.$el);
        // this.$el.style.backgroundColor = "green"
    },
    directives:{
        fontSize:function(el,binding){
            el.style.fontSize = binding.value+'px'
        }
    }
}
</script>
<style lang="scss" scoped>

</style>
<style scoped>

</style>

PC端拖拽

// 拖拽
Vue.directive('drag', { // 全域彈窗拖拽指令
    bind: function (el, binding, vnode) {
    	console.log("parent",el.parentNode)  // null
        let oDiv = el;
        let self = vnode.context;
        oDiv.onmousedown = (e) => {
            let disX = e.clientX - oDiv.offsetLeft;
            let disY = e.clientY - oDiv.offsetTop;
            document.onmousemove = (e) => {
                let left = e.clientX - disX;
                let top = e.clientY - disY;
                if (!left && !top) {
                    oDiv.style.left = self.currentLeft;
                    oDiv.style.top = self.currentTop;
                } else {
                    oDiv.style.left = left + "px";
                    oDiv.style.top = top + "px";
                }
            };
            document.onmouseup = (e) => {
                document.onmousemove = null;
                document.onmouseup = null;
            };
        };
    },
    // inserted : function (el, binding, vnode) {
    //     console.log("parent",el.parentNode) 
    //     let oDiv = el;
    //     let self = vnode.context;
    //     oDiv.onmousedown = (e) => {
    //         let disX = e.clientX - oDiv.offsetLeft;
    //         let disY = e.clientY - oDiv.offsetTop;
    //         console.log("1123",disX,disY);
    //         document.onmousemove = (e) => {
    //             let left = e.clientX - disX;
    //             let top = e.clientY - disY;
    //             if (!left && !top) {
    //                 oDiv.style.left = self.currentLeft;
    //                 oDiv.style.top = self.currentTop;
    //             } else {
    //                 oDiv.style.left = left + "px";
    //                 oDiv.style.top = top + "px";
    //             }
    //         };
    //         document.onmouseup = (e) => {
    //             document.onmousemove = null;
    //             document.onmouseup = null;
    //         };
    //     };
    // },
})

移動端拖拽

全域指令寫法如下

Vue.directive('drag', {
    inserted(el) {
        let switchPosition = {
            x: 10,
            y: 10,
            startX: 0,
            startY: 0,
            endX: 0,
            endY: 0
        }
        el.addEventListener('touchstart', function (e) {
            console.log(e)
            switchPosition .startX = e.touches[0].pageX
            switchPosition .startY = e.touches[0].pageY
        })
        el.addEventListener('touchend', function (e) {
            switchPosition .x = switchPosition .endX
            switchPosition .y = switchPosition .endY
            switchPosition .startX = 0
            switchPosition .startY = 0
        })
        el.addEventListener('touchmove', function (e) {
            if (e.touches.length > 0) {
                let offsetX = e.touches[0].pageX - switchPosition .startX
                let offsetY = e.touches[0].pageY - switchPosition .startY
                let x = switchPosition .x - offsetX
                let y = switchPosition .y - offsetY
                if (x + el.offsetWidth > document.documentElement.offsetWidth) {
                    x = document.documentElement.offsetWidth - el.offsetWidth
                }
                if (y + el.offsetHeight > document.documentElement.offsetHeight) {
                    y = document.documentElement.offsetHeight - el.offsetHeight
                }
                if (x < 0) {
                    x = 0
                }
                if (y < 0) {
                    y = 0
                }
                el.style.right = x + 'px'
                el.style.bottom = y + 'px'
                switchPosition .endX = x
                switchPosition .endY = y
                e.preventDefault()
            }
        })
    }
})

使用

<template>
    <div>
        <h1 v-drag class="drag"></h1>
    </div>
</template>
<script>
export default {
    name: 'homePage',
    components:{
       
    },
    data() {
        return {
            
        }
    },
    created(){
    },
    computed:{
    },
    methods:{
      
    },
    mounted() {
        console.log(this.$el);
        // this.$el.style.backgroundColor = "green"
    },
}
</script>
<style lang="scss" scoped>

</style>
<style scoped>
.drag{
    width: 200px;
    height: 200px;
    background: #ccc;
    text-align: center;
    line-height: 200px;
    color: #fff;
    cursor:move;
    position: fixed;
    z-index: 99;
    right: 10px;
    bottom: 85px;
    width: 40px;
    height: 40px;
}
</style>