1缚陷、vue中， 我們要實現(xiàn)以下效果往核，多個菜單一行放置不下箫爷，被擋住，點擊不了铆铆。這時候我們考慮用鼠標移動拖拽，對菜單進行拖拽操作丹喻，點擊
image.png
2. 實現(xiàn)代碼如下： html
// 給當前 h-tabs 增加 ref 屬性薄货，方便在 js 中獲取該元素。
<h-tabs ref="tabs" type="card" size="small" v-if="tabData.length > 1" > </h-tabs>
3. js
<script>
let target, intX, scrollLeft;
export default {
watch: {
tabData (val) {
this.$nextTick(() => {
if (val.length > 0) {
this.$refs.tabs.$el.querySelector('.h-tabs-nav-wrap').style.float = 'none';
target = this.$refs.tabs.$refs.nav;
Object.assign(target.style, {
display: 'flex',
overflow: 'hidden',
'user-select': 'none'
})
target.onmousedown = (e) => {
// 鼠標到窗口左側(cè)的距離
intX = e.clientX;
// tarb的滾動條左側(cè)的距離
scrollLeft = e.currentTarget.scrollLeft;
// 監(jiān)聽鼠標移動事件
document.addEventListener('mousemove', this.dragMove)
}
// 監(jiān)聽鼠標松開事件
document.addEventListener('mouseup', this.dcMouseUp);
// 禁止拖拽
target.ondrop = function (e) {
e.preventDefault();
}
target.ondragstart = function (e) {
e.preventDefault();
}
target.ondragend = function (e) {
e.preventDefault();
}
}
})
}
}碍论，
methods: {
// 滾動條移動了多少距離==鼠標移動的距離
dragMove (e) {
target.scrollLeft = scrollLeft + (intX - e.clientX);
},
// 取消鼠標移動監(jiān)聽事件
dcMouseUp () {
document.removeEventListener('mousemove', this.dragMove);
},
}
}
</script>
4. this.
el.querySelector('.h-tabs-nav-wrap' ）指哪如下元素
image.png
