今天范了了一個(gè)很低級(jí)的錯(cuò)誤梁只，本身想用element ui來做橫向滾動(dòng)條熊响，結(jié)果改樣式與事件均不符合個(gè)人需要。于是自己重構(gòu)scroll英染，為了在vue3中修改scrollLeft揽惹，找了很久文檔都沒找到結(jié)果，無論怎樣獲取及設(shè)置xx.value.scrollLeft的值都為0四康。
# template
<div class='box' ref='box' >
<div class='content' ref='content'>
…橫向展示的內(nèi)容
</div>
</div>
解決辦法
樣式自己寫搪搏，主要樣式說明
- box 的display:inline-block,
- content的display:inline-flex,
- 以上是這了將content樣式獲取到他的寬度。只有content div的寬度大于box寬度后才能獲得或設(shè)置xx.value.scrollLeft
vue3獲取$refs元素
vue3中的steup中不能使用this.$refs闪金，具體使用如下:
import {ref} form 'vue'
steup() {
const box = ref(0) //div中定義的ref變量名
console.log(box.value.scrollWidth)
}
