vue和html兩種方式實現可拖拽對話方塊以及最小化

2021-10-03 23:23:55 字數 1962 閱讀 2128

html方式：



標題1    內容111


this.obj = document.getelementbyid(id);


this.startx = 0;


this.starty;


this.startleft;


this.starttop;


this.maindiv = this.obj.parentnode;


this.isdown = false;


this.originindex = this.maindiv.style.zindex;


var that = this;


this.movedown = function (e)   


that.isdown = true;


that.obj.style.cursor = 'move';


that.maindiv.style.zindex = 1000;


that.startx = e.clientx;


that.starty = e.clienty;


that.startleft = parseint(that.maindiv.offsetleft);


that.starttop = parseint(that.maindiv.offsettop);


}this.move = function (e) 


}this.moveup = function ()  


}this.obj.onmousedown = this.movedown;


this.obj.onmousemove = this.move;


this.obj.onmouseup = this.moveup;


//非ie瀏覽器


document.addeventlistener("mousemove", this.move, true);


}var mover1 = new mover("title_1");
vue實現

1、在main.js同級建乙個檔案directives.js

import vue from 'vue';


// v-dialogdrag: 彈窗拖拽


vue.directive('dialogdrag',  else ;


document.onmousemove = function (e) px`;


dragdom.style.top = `$px`;


//將此時的位置傳出去


};document.onmouseup = function (e) ;


}}})


// v-dialogdragwidth: 彈窗寬度拖大 拖小


vue.directive('dialogdragwidth', px`;


};document.onmouseup = function (e) ;


}}})
2、main.js新增引用

import './directives.js'
3、在需要用到拖拽功能的彈窗標籤上加

v-dialogdrag
例如

最小化



//最大化


maxbtn())


this.dialogformvisiblepoint=true//當前彈窗出現


},	//最小化


minbtn())


this.dialogformvisiblepoint=false//當前彈窗關閉


},
樣式

.popbtn


.popclose


.popclose:hover


.popshow


.popshow:hover

VUE彈窗的兩種實現方式

方法一 使用.sync修飾符 element就是使用的這種方式，實現方式如下 父元件 test model div template import testmodel from src components testmodel export default components script sty...

vue下拉列表的兩種實現方式

select v model form.columetype placeholder 字段型別 option v for item,index in columetypearr key index label item.label value item.value option select 這種方...

vue建立專案（兩種方式）

建立專案的前提是 已經安裝成功vue cli，安裝vue cli的詳細 請檢視博文 1.第一種方式 命令方式 vue create 專案名稱 注意專案名稱不要是中文 大寫字母，例項如下 1.vue create demo 2.cd demo 3.npm run serve 2.第二種方式 視覺化介面...