自定义指令传参

最新推荐文章于 2024-06-28 11:34:03 发布

我叫小黑人

最新推荐文章于 2024-06-28 11:34:03 发布

阅读量725

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_35438359/article/details/79975315

本文介绍如何使用Vue.js自定义指令实现DOM元素的固定定位，并通过实例演示了如何根据不同的条件改变元素的位置和样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<div v-pin:xxx.bottom.right="card1.pinned"  :class="liked">111
    <button @click="card1.pinned = !card1.pinned"></button>
</div>

Vue.directive('pin',function (el,binding) {
    var el = el; //el代表所在元素

//v-pin:xxx.bottom.right="card1.pinned"

var val = binding.value; //card1.pinned中的card1.pinned对应data值例子中是true或false var position = binding.modifiers; //bottom和right var warning = binding.arg; //xxx console.log("val:",warning) if(val){ el.style.position = 'fixed'; for(var P in position){ // console.log(P) if(position[P]){ console.log([P])

el.style[P] = '10px'

} } if(warning ==='xxx'){ el.style.background = 'yellow' } }else { el.style.position = 'static'; } }) var app = new Vue({ el:"#app", data:{ liked:'liked', card1:{ pinned:false } } })