<!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 code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<br>
this is my test code@!
<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
}
}
});