涉及到的知識(shí)
- 事件方法
dragstart妇斤，dragenter，dragend - 事件對(duì)象e的屬性值獲取
e.target;//拖拽對(duì)象
e.clientX;//獲取鼠標(biāo)相對(duì)于瀏覽器的坐標(biāo)x的位置
e.clientY;//獲取鼠標(biāo)相對(duì)于瀏覽器的坐標(biāo)H的位置
e.pageX;//獲取鼠標(biāo)相對(duì)于整個(gè)文檔的坐標(biāo)x
e.pageY;//獲取鼠標(biāo)相對(duì)于整個(gè)文檔的坐標(biāo)h
- $refs對(duì)dom對(duì)象屬性的設(shè)置和獲取
//獲取
let w = this.$refs.你設(shè)置的ref名稱.clientWidth; // 獲取標(biāo)簽屬性
//設(shè)置
this.$refs.你設(shè)置的ref名稱.style.top = 20px;//單屬性設(shè)置
this.$refs.你設(shè)置的ref名稱.style = ‘left:20px;top:30px’荸恕；//多屬性設(shè)置
代碼演示
<template>
<div
id="navBox"
draggable="true"
@dragstart.stop="onDragStart"
@dragenter.stop="onDragEnter"
@dragend.stop="onDragEnd"
ref="navDom"
>
<ul class="navLeft">
<li v-for="item in navList" v-bind:key="item.title" @click="$router.push(item.url)">{{item.title}}</li>
</ul>
</div>
</template>
<script>
//可拖動(dòng)死相？
// 引入狀態(tài)管理模式-store
import {store} from '../store/store.js'
export default{
name:'NavLeftStart',
props:{
navList:Array,
},
data(){
return{
isFold:false,
styleNmae:'navLeft',
animNmae:'anmHide'
}
},
methods:{
onDragStart(e){//開始拖拽
console.log(e,'拖拽開始');
let target = e.target;//拖拽對(duì)象
let mouseXforW = e.clientX;//獲取鼠標(biāo)相對(duì)于瀏覽器的坐標(biāo)x的位置
let mouseHforW = e.clientY;//獲取鼠標(biāo)相對(duì)于瀏覽器的坐標(biāo)H的位置
let mouseXforDom=e.pageX;//獲取鼠標(biāo)相對(duì)于整個(gè)文檔的坐標(biāo)x
let mouseHforDom=e.pageY;//獲取鼠標(biāo)相對(duì)于整個(gè)文檔的坐標(biāo)h
},
onDragEnter(e){//拖拽中
console.log(e,'拖拽中');
},
onDragEnd(e){//拖拽結(jié)束
console.log(e,'拖拽結(jié)束');
// 獲取拖拽結(jié)束時(shí)鼠標(biāo)的坐標(biāo)點(diǎn)
let target = e.target;//拖拽對(duì)象
let mouseX = e.clientX;
let mouseY = e.clientY;
// 獲取拖拽對(duì)象寬度
let w = this.$refs.navDom.clientWidth; // 獲取標(biāo)簽屬性
let h = this.$refs.navDom.clientHeight;
// this.$refs.navDom.style.left = mouseX - w/2+'px';
// this.$refs.navDom.style.top = mouseY - h/2+'px';
this.$refs.navDom.style = `left:${mouseX - w/2}px;top:${mouseY - h/2}px`
console.log(this.$refs.navDom.clientHeight,'pp')
}
},
}
</script>
<style scoped>
#navBox{
position: fixed;
left: 10px;
top:200px;
z-index: 1000;
}
.navLeft{
list-style: none;
width: auto;
height: auto;
background: #99CC99;
border-radius: 50px;
overflow: hidden;
transition: all .2s ease-in-out;
box-shadow: 1px 2px 13px 0px #33663361;
}
.navLeft li{
padding: 10px;
font-size: 18px;
color: #336633;
width: 100%;
text-align: center;
/* line-height: 40px; */
cursor: pointer;
transition: all 0.1s ease-in-out;
}
.navLeft li:nth-child(1){
padding-top: 20px;
}
.navLeft li:nth-last-child(1){
padding-bottom: 20px;
}
.navLeft li:hover{
background: #669933;
/* color: #fff; */
}
.anmHide{
height: auto;
/* animation: anmateHeight 0.4s ease-in-out inherit;
animation-iteration-count:1; */
}
</style>
github地址：
路徑：https://github.com/wyweb1/lxaboutVue/blob/main/src/components/NavLeftStart.（地址：https://github.com/wyweb1/lxaboutVue/）
根據(jù)路徑找該組件的文件夾位置
