Vue # 进度条_this

type: String,
default: ‘default’,
validator (value) {
return [‘default’, ‘small’].includes(value)
}
},
waiting: {
type: Boolean,
default: false
}
},
destroy () {
window.removeEventListener(‘resize’, debounce(this.handleResize, 50))
},
mounted () {
this.changeProgressbarWidth(this.percent)
let _this = this
window.addEventListener(‘resize’, debounce(this.handleResize, 50))
const virtualBar = this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ssBar = \_this.refs.progressBar
let pageX = e.pageX
let diff = pageX - progressBar.getBoundingClientRect().left
let percent = (diff / progressBar.clientWidth).toFixed(2)
_this.KaTeX parse error: Expected 'EOF', got '}' at position 45: …X, percent }) }̲, 200)) virtua…emit(‘virtualBarLeave’)
}, 200))
},
computed: {
handleCls () {
return this.size === ‘small’
? ‘handle small’
: ‘handle’
}
},
watch: {
percent (newPercent) {
if (newPercent >= 0 && !this.mouse.isDown) {
this.changeProgressbarWidth(newPercent)
}
},
bufferedPercent (newPercent) {
this.changeBufferedWidth(newPercent)
}
},
methods: {
handleResize () {
this.changeBufferedWidth(this.bufferedPercent)
this.changeProgressbarWidth(this.percent)
},
onMouseDown (e) {
e.preventDefault()
this.mouse.startX = e.pageX
this.mouse.isDown = true
this.mouse.left = this.KaTeX parse error: Expected '}', got 'EOF' at end of input: …ressBar = this.refs.progressBar
const progress = this.$refs.progressconstprogressBarWidth=progressBar.getBoundingClientRect().widththis.mouse.moveX=e.pageXletdiffX=this.mouse.moveX-this.mouse.startX+this.mouse.leftif(diffX<0)diffX=0if(diffX>progressBarWidth)diffX=progressBarWidththis.progressOffsetWidth=diffXthis.progressbarTranslateX=diffXthis.$emit(‘percentChanging’, this.calcPercent())
}
document.onmouseup = e => {
if (!this.mouse.isDown) return
this.mouse.isDown = false
document.onmousemove = null
this.KaTeX parse error: Expected 'EOF', got '}' at position 45: …alcPercent()) }̲ }, progressC…refs.progressBar.getBoundingClientRect()
const offsetWidth = e.pageX - rect.left
this.progressOffsetWidth = offsetWidth
this.progressbarTranslateX = offsetWidth
this.KaTeX parse error: Expected 'EOF', got '}' at position 45: …alcPercent()) }̲, calcPercent …refs.progressBar.clientWidth).toFixed(2)
},
changeProgressbarWidth (percent) {
const barWidth = this.KaTeX parse error: Undefined control sequence: \* at position 77: …idth = percent \̲*̲ barWidth this…refs.progressBar.getBoundingClientRect().width
const offsetWidth = percent * barWidth
this.bufferedOffsetWidth = offsetWidth
}
}
}