vue custom directives

vue can extend instructions by itself

Add a v-color to change the element color according to the value of the attribute

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./vue.js" charset="utf-8"></script>
</head>

<body>
    <div id="app">
        <div style="width:100px;height:100px" v-color="color">
        </div>
        <input type="text" v-model="color" />
    </div>
    <script type="text/javascript">
        new Vue({
            el: "#app",
            data: {
                color: "red"
            },
            directives: {
                color: function(el, bindings) {
                    console.log(arguments)
                    el.style.background = bindings.value
                }
            }
        })
    </script>
</body>

</html>

The effect is as shown in the figure

The instruction passes five parameters

It includes the element, value and attribute of the instruction. For example, v-color.red is the attribute of the instruction

 

The instruction function corresponding to v-color-red is colorRed, and hump naming method is adopted

 

 

Create an instruction, you can drag an element, change the element positioning to absolute positioning when clicking the element, then calculate the coordinates after dragging, assign the value to the element, reset the event function to null after dragging, and cancel the default behavior to avoid bug

 

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <script src="./vue.js" charset="utf-8"></script>
    <style>
        .drag {
            /* position: absolute; */
            width: 100px;
            height: 100px;
            background: blue;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div v-drag class='drag'></div>
        <div class='drag' v-drag></div>
        <div class='drag' v-drag></div>
    </div>
    <script type="text/javascript">
        new Vue({
            el: '#app',
            directives: {
                drag: function(elem) {
                    console.log(arguments)

                    elem.onmousedown = function(e) {
                        elem.style['position'] = 'absolute'
                        var disx = e.pageX - elem.offsetLeft
                        var disy = e.pageY - elem.offsetTop
                        console.log(disx, disy)

                        document.onmousemove = function(e) {
                            console.log(elem.style)
                            elem.style.left = e.pageX - disx + 'px'
                            elem.style.top = e.pageY - disy + 'px'
                            console.log(elem.style.left, elem.style.top)
                        }
                        document.onmouseup = function() {
                            console.log('Cancel event')
                            document.onmousemove = document.onmouseup = null
                        }
                        console.log("Cancel default action")
                        e.preventDefault()
                    }
                }
            }
        })
    </script>
</body>

</html>

 

You can drag any element with this label

Tags: Vue Attribute Javascript

Posted on Mon, 04 May 2020 19:10:52 -0400 by MadnessRed