<!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>
效果如下:
