【最近项目小结】使用 Vue 实现一个简单的鼠标拖拽滚动效果插件

name: ‘VueDragScroll’,

props: {

msg: String

},

data () {

return {

scale: 100

}

},

computed: {

zoomStye () {

const INIT_WIDTH = 2208

const INIT_HEIGHT = 1206

const width = INIT_WIDTH * (1 + (100 - this.scale)/100)

const height = INIT_HEIGHT * (1 + (100 - this.scale)/100)

console.log(width)

console.log(height)

return {

width: ${width}px,

height: ${height}px,

transform: scale(${this.scale/100})

}

}

}

}

这里设置了一个计算属性 zoomStye，主要使用就是给外层加一个在的宽，和高，这里我还设置了一个缩放比较，为了是能放大缩小页面，下面讲。运行效果：

接着，我们需要监听鼠标的拖拽来触发滚动条效果，因为需