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></div> <div v-drag></div> <div 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
