<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./vue.js"></script>
<style>
.dd {
width: 100px;
height: 100px;
background-color: lightblue;
user-select: none;
}
.dd2 {
width: 600px;
height: 100px;
background-color: lightblue;
}
</style>
</head>
<body>
<div id="app">
<!-- <input type="text" placeholder="姓名" ref="inp1" />
<br />
<input type="text" placeholder="年龄" ref="inp2" /> -->
<hr />
<input type="text" placeholder="姓名" v-focus />
<div class="dd" v-move="{ color: 'red', fontSize: '16px' }">
可以拖拽的标签11
</div>
<div class="dd" v-move="{ color: 'blue', fontSize: '12px' }">
可以拖拽的标签22
</div>
<com v-move:parmas="{a: 100, b:200}"></com>
</div>
<template id="com">
<div class="dd2">
<h1 v-pin:[direction]>我是子组件</h1>
<input type="radio" v-model="direction" value="left" />左对齐
<input type="radio" v-model="direction" value="right" />右对齐
<input type="radio" v-model="direction" value="center" />居中对齐
</div>
</template>
<script>
// 什么场景下需要自定义指令？
// 一般是要对这个元素进行DOM操作，可以不用使用ref和$refs进行DOM操作，只需要声明自定义指令即可。
// 自定义指令可以将这一段操作DOM的代码，重复利用。
// 全局注册自定义指令，只要某一个标签使用了这个指令，就会拥有这个指令的功能。
Vue.directive("focus", {
// inserted(): 当指令被添加到元素或组件的时候，会执行。
inserted(el, obj) {
// el: 当前指令所在的元素。
// obj: 当前指令的配置信息。
// console.log(el, obj);
el.focus();
},
});
let isdown = false;
let startX;
let startY;
/*
// 自定义拖拽指令
Vue.directive("drag", {
inserted(el) {
console.log(el);
el.style.position = "relative";
el.onmousedown = function (e) {
// 获取此时按下的点坐标
startX = e.x;
startY = e.y;
if (!el.style.left) {
el.style.left = "0";
}
if (!el.style.top) {
el.style.top = "0";
}
isdown = true;
};
document.onmousemove = function (e) {
if (isdown) {
let offsetX = e.x - startX;
let offsetY = e.y - startY;
el.style.left = parseInt(el.style.left) + offsetX + "px";
el.style.top = parseInt(el.style.top) + offsetY + "px";
startX = e.x;
startY = e.y;
}
};
document.onmouseup = function (e) {
isdown = false;
};
},
});
*/
let vm = new Vue({
el: "#app",
mounted() {
// this.$refs.inp1.focus();
// this.$refs.inp2.focus();
},
components: {
com: {
template: "#com",
data() {
return {
direction: "center",
};
},
directives: {
pin: {
bind: function (el, binding) {
if (binding.arg == "left") {
el.style.textAlign = "left";
} else if (binding.arg == "right") {
el.style.textAlign = "right";
} else if (binding.arg == "center") {
el.style.textAlign = "center";
}
},
update: function (el, binding) {
console.log("update = ", el);
if (binding.arg == "left") {
el.style.textAlign = "left";
} else if (binding.arg == "right") {
el.style.textAlign = "right";
} else if (binding.arg == "center") {
el.style.textAlign = "center";
}
},
},
},
},
},
directives: {
move: {
// bind 是在指令被添加到一个元素上的时候，会执行这个事件。
bind: function (el, binding) {
el.style.color = binding.value.color;
el.style.fontSize = binding.value.fontSize;
},
// inserted 被指令绑定的元素添加到父元素时，触发这个函数。
inserted: function (el, obj) {
// el.style.color = obj.value.color;
// el.style.fontSize = obj.value.fontSize;
el.style.position = "relative";
el.onmousedown = function (e) {
isdown = true;
// 获取此时按下的点坐标
startX = e.x;
startY = e.y;
if (!el.style.left) {
el.style.left = "0";
}
if (!el.style.top) {
el.style.top = "0";
}
document.onmousemove = function (e) {
if (isdown) {
let offsetX = e.x - startX;
let offsetY = e.y - startY;
el.style.left = parseInt(el.style.left) + offsetX + "px";
el.style.top = parseInt(el.style.top) + offsetY + "px";
startX = e.x;
startY = e.y;
}
};
document.onmouseup = function (e) {
isdown = false;
};
};
},
},
},
});
</script>
</body>
</html>
效果如下:
