您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue怎么實(shí)現(xiàn)拖拽窗口功能的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
效果
實(shí)現(xiàn)代碼
<template> <transition> <!-- 綁定style中top和left--> <div class="moveBox" : v-show="show"> <div class="moveHead" @mousedown="mousedown" @mousemove="mousemove" @mouseup="mouseup" @mouseleave="mousemove" ></div> <!-- 關(guān)閉按鈕--> <div class="close" @click="toggleShow">×</div> <div class="content"> <!--插槽--> <slot></slot> </div> </div> </transition> </template> <script> export default { name: "moveBox", data() { return { show: true,//是否顯示 x: 100,//left:x y: 50,//top:y leftOffset: 0,//鼠標(biāo)距離移動(dòng)窗口左側(cè)偏移量 topOffset: 0,//鼠標(biāo)距離移動(dòng)窗口頂部偏移量 isMove: false,//是否移動(dòng)標(biāo)識(shí) }; }, computed: { //top與left加上px position() { return `top:${this.y}px;left:${this.x}px;`; }, }, methods: { //控制打開關(guān)閉 toggleShow() { this.x = 100; this.y = 50; this.show = !this.show; }, mousedown(event) { //鼠標(biāo)按下事件 this.leftOffset = event.offsetX; this.topOffset = event.offsetY; this.isMove = true; }, //鼠標(biāo)移動(dòng) mousemove(event) { if (!this.isMove) { return; } this.x = event.clientX - this.leftOffset; this.y = event.clientY - this.topOffset; }, //鼠標(biāo)抬起 mouseup() { this.isMove = false; }, }, }; </script> <style lang="less" scoped> .moveBox { width: 500px; height: 300px; position: fixed; box-shadow: 0 0 5px 3px #95a5a6; .moveHead { height: 30px; background-color: #bdc3c7; cursor: move; } .close { position: absolute; right: 0; top: 0; line-height: 30px; font-size: 24px; cursor: pointer; display: block; width: 30px; height: 30px; text-align: center; } } .v-enter, .v-leave-to { opacity: 0; transform: scale(0.5); } .content { padding: 10px; } .v-enter-active, .v-leave-active { transition: all 0.5s ease; } </style>
使用
<template> <div class="home"> <button @click="$refs.moveBox.toggleShow()">toggle moveBox</button> <move-box ref="moveBox"> Hello World </move-box> </div> </template>
代碼沒什么難度,主要是使用了定位,在鼠標(biāo)移動(dòng)事件中定義top和left值。
以上就是“vue怎么實(shí)現(xiàn)拖拽窗口功能”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會(huì)為大家更新不同的知識(shí),如果還想學(xué)習(xí)更多的知識(shí),請(qǐng)關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。