<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .card{ width: 200px; background: #ccc; padding: 10px; margin: 5px; } </style> </head> <body> <div id="app"> <div v-pin:true.bottom.right="card1.pinned" class="card"> <button @click="card1.pinned = !card1.pinned">点我啊~</button> this is my first card! this is my first card! this is my first card! this is my first card! this is my first card! </div> <div v-pin.top.right="card2.pinned" class="card"> <a @click="card2.pinned = !card2.pinned" href="#">please touch me</a> this is my second card! this is my second card! this is my second card! this is my second card! this is my second card! </div> <div> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> this is my test [email protected]! <br> </div> </div> <script src="../lib/vue.js"></script> <script src="js/main.js"></script> </body> </html>
Vue.directive("pin", function (el, binding) {
var pinned = binding.value;
var position = binding.modifiers; //获取属性的函数
var warning = binding.arg; //获取属性的函数
// console.log("position:",position);
if (pinned) {
el.style.position = "fixed";
for (var key in position) {
if (position[key]) {
el.style[key] = "20px"
}
}if(warning === "true"){
el.style.background = "red"
}
} else {
el.style.position = "static"
}
});
var app = new Vue({
el: "#app",
data: {
card1: {
pinned: false
},
card2: {
pinned: false
}
}
});