console
Vue.directive('anyName', {
bind: (el,binding,vnode)=> {
let fn = ()=>{
const {value} = binding;
console.log(binding)
};
}
})
var app = new Vue({
el: '#app',
data: {
text:'OK'
},
methods:{
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
</style>
</head>
<body id="body">
<div id="out">
<div id="container" class="container">
<iframe
src="https://www.bilibili.com/"
frameborder="0"
width="100%"
height="100%"
class="bilibili-frame"
>
</iframe>
</div>
</div>
</body>
<script>
let body = document.getElementById("body");
let c = document.getElementById("container");
let out = document.getElementById("out");
body.addEventListener("mouseup", up);
bindResize()
let outClient = out.getBoundingClientRect();
let resizeAble = false;
let clientX, clientY;
let minW = 16;
let minH = 16;
let direc = "";
function up() {
resizeAble = false;
}
function outEnterFn(){
body.addEventListener("mousemove", move);
c.addEventListener("mousedown", down);
}
function outLeaveFn(){
body.removeEventListener("mousemove", move);
c.removeEventListener("mousedown", down);
}
function bindResize(){
out.addEventListener("mouseenter",outEnterFn);
out.addEventListener("mouseleave", outLeaveFn);
}
function removeResize(){
out.removeEventListener("mouseenter", outEnterFn);
out.removeEventListener("mouseleave", outLeaveFn);
}
function down(e) {
let d = getDirection(e);
if (d !== "") {
resizeAble = true;
direc = d;
clientX = e.clientX;
clientY = e.clientY;
}
}
function move(e) {
requestAnimationFrame(()=>{
let d = getDirection(e);
let cursor = d === "" ? "default" : d + "-resize";
c.style.cursor = cursor;
setResizeBorder(contactDetection(c,outClient));
if(!resizeAble){
currentDomMove(e)
}
if (resizeAble) {
if (direc.indexOf("e") !== -1) {
if (e.clientX < outClient.right) {
c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + "px";
clientX = e.clientX;
} else {
c.style.width = outClient.right - c.getBoundingClientRect().left + "px";
}
}
if (direc.indexOf("n") !== -1) {
if (e.clientY >= outClient.top) {
let newHeight = Math.max(minH,c.offsetHeight + (clientY - e.clientY));
let topNum = Number((c.style.top || "").slice(0, -2));
if (newHeight !== minH) {
c.style.top = topNum + e.clientY - clientY + "px";
c.style.height = newHeight + "px";
clientY = e.clientY;
}
} else {
c.style.height = c.getBoundingClientRect().bottom - outClient.top + "px";
c.style.top = "0px";
}
}
if (direc.indexOf("s") !== -1) {
if (e.clientY <= outClient.bottom) {
c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + "px";
clientY = e.clientY;
} else {
console.log(c.getBoundingClientRect().bottom, outClient.top);
c.style.height = outClient.bottom - c.getBoundingClientRect().top + "px";
}
}
if (direc.indexOf("w") !== -1) {
if (e.clientX >= outClient.left) {
let newWidth = Math.max(minW, c.offsetWidth + (clientX - e.clientX));
let leftNum = Number((c.style.left || "").slice(0, -2));
if (newWidth !== minH) {
c.style.left = leftNum + e.clientX - clientX + "px";
c.style.width = newWidth + "px";
clientX = e.clientX;
}
} else {
c.style.left = c.getBoundingClientRect().right - outClient.left + "px";
c.style.left = "0px";
}
}
}
})
}
function getDirection(ev) {
let xP, yP, offset, dir;
dir = "";
xP = ev.offsetX;
yP = ev.offsetY;
offset = 10;
if (yP < offset) dir += "n";
else if (yP > c.offsetHeight - offset) dir += "s";
if (xP < offset) dir += "w";
else if (xP > c.offsetWidth - offset) dir += "e";
return dir;
}
function contactDetection(cDom, outClient) {
let distance = 8;
let cDomClient = cDom.getBoundingClientRect();
let isLeft = cDomClient.left - outClient.left <= distance;
let isRight = outClient.right - cDomClient.right <= distance;
let isTop = cDomClient.top - outClient.top <= distance;
let isBottom = outClient.bottom - cDomClient.bottom <= distance;
return {
isLeft,isRight,isTop,isBottom
}
}
function setResizeBorder ({
isLeft,isRight,isTop,isBottom
}){
requestAnimationFrame(()=>{
let className = [
'container',
isLeft?'left':'',
isRight?'right':'',
isTop?'top':'',
isBottom?'bottom':'',
].join(' ');
let moveClass=c.getAttribute("data-class-move");
c.setAttribute("data-class-resize",className);
c.className = moveClass + ' ' + className;
})
}
function currentDomMove(ev){
requestAnimationFrame(()=>{
ev=ev||window.event;
let {left,right,top,bottom} = c.getBoundingClientRect();
let x = ev.clientX;
let y = ev.clientY;
let isFromL = (x-left) <= 6 && (left-x) <6
let isFromR = (right-x) <= 6 && (x-right) <6
let isFromB= (bottom-y) <= 6 && (y-bottom) <6
let isFromT = (y-top) <= 6 && (top-y) <6
let className = [
'container',
isFromL?'from-left':'',
isFromR?'from-right':'',
isFromB?'from-bottom':'',
isFromT?'from-top':'',
].join(' ');
let resizeClass=c.getAttribute("data-class-resize");
c.setAttribute("data-class-move", className);
c.className = resizeClass +' ' + className;
})
}
function currentDomLeave(){
c.setAttribute("data-class-move", '');
c.className=c.className.replace('from-left','')
c.className=c.className.replace('from-right','')
c.className=c.className.replace('from-top','')
c.className=c.className.replace('from-bottom','')
}
function dragDom(dv ,{
onMouseDown=()=>{},
onMouseMove =()=>{},
onMouseUp=()=>{},
// 边缘检测 获取是否已达上下左右边界
boundaryDetection=()=>{}
}){
let x = 0;
let y = 0;
let l = 0;
let t = 0;
let preLeft,preTop;
let isDown = false;
let isMoving = false;
dv.onmousedown = (e) => {
if(resizeAble) return ;
onMouseDown()
x = e.clientX;
y = e.clientY;
l = dv.offsetLeft;
t = dv.offsetTop;
isDown = true;
dv.style.cursor = 'move';
};
window.onmousemove = (e) => {
if (isDown == false||resizeAble) {
return;
}
let nx = e.clientX;
let ny = e.clientY;
let nl = nx - (x - l);
let nt = ny - (y - t);
isMoving = true;
preLeft=(preLeft===0||preLeft)?preLeft:nl;
preTop=(preTop===0||preTop)?preTop:nt;
let {isLeft,isBottom,isRight,isTop} = boundaryDetection();
let isToLeft = preLeft-nl>0
let isToRight = preLeft-nl<0
let isToTop = preTop-nt>0
let isToBottom = preTop-nt<0
if((isLeft&&isToLeft)||(isRight&&isToRight)){
nl=preLeft
}
if((isTop&&isToTop)||(isBottom&&isToBottom)){
nt=preTop
}
dv.style.left = `${nl}px`;
dv.style.top = `${nt}px`;
preLeft=nl
preTop=nt
onMouseMove()
};
window.onmouseup = (e) => {
if(resizeAble) return ;
if (isMoving) {
(e || window.event).stopImmediatePropagation();
(e || window.event).stopPropagation();
}
isDown = false;
isMoving = false;
dv.style.cursor = 'default';
onMouseUp()
};
};
dragDom(c,{
onMouseDown:removeResize,
onMouseUp:bindResize,
boundaryDetection:()=>{
return contactDetection(c,outClient)
},
onMouseMove:()=>{
},
})
</script>
</html>
html {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#body {
width: 100%;
height: 100%;
padding: 30px;
}
#out {
position: relative;
box-sizing: border-box;
width: 90%;
height: 100%;
border: 1px solid seagreen;
}
.bilibili-frame{
}
.container {
box-sizing: border-box;
position: absolute;
top: 0;
left: 0;
width: 80%;
height: 80%;
padding-top: 20px;
border: #00cdcd 1px solid;
}
.container.top{
border-top: red 1px solid;
}
.container.right{
border-right: red 1px solid;
}
.container.bottom{
border-bottom: red 1px solid;
}
.container.left{
border-left: red 1px solid;
}
.from-top{
border-top: blue 1px solid;
}
.from-right{
border-right: blue 1px solid;
}
.from-bottom{
border-bottom: blue 1px solid;
}
.from-left{
border-left: blue 1px solid;
}