vue自定义指令怎么写？vue中的自定义指令
vue自定义指令怎么写？vue中的自定义指令
代码如下<template>
<div>
<div id="dynamicexample">
<input type="range" min="0" max="500" v-model="pinPadding">
<!--使用[]动态绑定指令参数-->
<p class="aC" v-pin:[direction]="pinPadding">自定义指令</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
direction: 'left'
pinPadding: 20
}
}
//使用directives选项注册局部指令
directives: {
// 注册自定义指令'v-pin'
pin: (el binding) => {
el.style.position = 'fixed';
// binding.arg 是我们传递给指令的参数
const s = binding.arg || 'top';
// binding.value为指令绑定的值
el.style[s] = binding.value 'px';
}
}
methods: {
}
}
</script>
<style scoped>
.aC {
width: 100px;
height: 100px;
background: red;
}
</style>效果如下
