<div>
<div class="card" v-pin:aaa.top.right="card1.pinned">
<button @click="card1.pinned = !card1.pinned">定住\取消</button>
监控到开发贷款的vajfkdjg
</div>
<div class="card" v-pin="card2.pinned">
<a href="#" @click="card2.pinned = !card2.pinned"> pin it </a>
监控到开发贷款的vajfkdjg
</div>
监控到开发贷款的
等很多字......
</div>
<script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script>
<script type="text/javascript">
//v-XXX 都是默认的指令
//自定义组件,属性,也可以自定义指令
//自定义指令的修饰符和传参
Vue.directive("pin",function(el,binding){
console.log(0,el)//指向的是有pin属性的div
console.log(1,binding)//指向的是div的属性,默认的
var pinned = binding.value;
var position = binding.modifiers;
var warning = binding.arg;
if(pinned){
el.style.position = "fixed";
for(var key in position){
if(position[key]){
el.style[key] = "10px"
}
}
if(warning==="true"){
el.style.background = "red"
}
if(abc==="aaa"){
el.style.border = "2px solid cyan"
}
}else{
el.style.position = "static"
}
})
//初始化父组件
var parent = new Vue({
el:"#app",
data :{
card1 : {
pinned:false
},
card2 : {
pinned:false
},
price:10,
}
})
</script>
打印的binding的结果
binding的结果
