ue全局和局部自定义属性v-xxx
一局部自定义属性v-xxx,写在需要的组件内
<template>
<div class="container">
<h1>局部:自定义指令</h1>
<!-- 局部自定义指令 -->
<input type="text" v-aaa="numb" />
<button @click="numb++">numb++</button>
<div class="box" v-move></div>
</div>
</template>
<script>
export default {
// 自定义指令:对使用该指令 dom节点 做dom简单操作
directives: {
// v-自定义指令名称:v-aaa
aaa: {
inserted(el) {
// 虚拟dom第一次渲染到页面是成为真实dom节点 执行
// el: 对使用该指令 真实dom节点
el.focus();
},
update(el, obj) {
// 自定义指令对应 数据/标签 更新时, 此方法执行
// el: 对使用该指令 真实dom节点
// obj:传入的数据对象,里面可以获取传入的数据值
// console.log(obj);
// obj里有个属性value
el.style.width = 100 + obj.value + "px";
},
},
},
};
</script>
<style scoped>
.container {
height: 600px;
border: 1px solid #ccc;
position: relative;
}
.box {
width: 100px;
height: 100px;
background-color: #ccc;
position: absolute;
top: 200px;
left: 0px;
}
</style>
二,全局自定义属性v-xxx,既然是全局,就要写在main.js里,重要的事情说三遍,写在main.js里,写在main.js里,写在main.js里,写在main.js里,写在main.js里
// 全局指令:背景色就会随机变:在任何组件内都可以使用
Vue.directive("bgc", {
inserted(el) {
let a = () => Math.floor(Math.random() * 256);
el.style.backgroundColor = `rgb(${a()},${a()},${a()})`;
// 拓展:给dom注册事件
},
});
Vue.directive("move", {
inserted(el) {
let father = el.parentNode;
let mx_ = father.offsetWidth - el.offsetWidth;
let my_ = father.offsetHeight - el.offsetHeight;
el.onmousedown = function(e) {
let x = e.offsetX;
let y = e.offsetY;
father.onmousemove = function(e) {
let mx = e.clientX - x;
let my = e.clientY - y;
mx = mx > mx_ ? mx_ : mx;
my = my > my_ ? my_ : my;
mx = mx < 0 ? 0 : mx;
my = my < 0 ? 0 : my
el.style.left = mx + 'px';
el.style.top = my + 'px';
}
}
el.onmouseup = function() {
father.onmousemove = null;
}
},
});