<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义指令</title>
<script src='./node_modules/vue/dist/vue.min.js'></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]" rel="stylesheet" type="text/css">
<style>
.box{
width: 200px;
height: 200px;
position: absolute;
left:50%;
top:50%;
margin-top: -100px;
margin-left:-100px;
border:1px solid black;
box-shadow:
}
</style>
</head>
<body>
<div id='app'>
<div class='box' v-shadow></div>
</div>
<script>
Vue.directive('shadow',{
bind(el){
document.addEventListener('mousemove',function(e){
var needY = 30-(e.clientY/window.innerHeight)*60;
var needX = 30-(e.clientX/window.innerWidth)*60;
el.style.boxShadow = needX + 'px ' + needY + 'px ' + '10px 0px black';
},false);
}
})
// 插槽
new Vue({
el:'#app',
});
</script>
</body>
</html>vue封装一个移动阴影的盒子
猜你喜欢
转载自blog.csdn.net/hahahahahahahaha__1/article/details/81462087
今日推荐
周排行