这篇文章将为大家详细讲解有关利用Vue 怎么实现一个鼠标拖拽滚动效果,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
首先给外层加个大大的宽和高:
<div class="vue-drag-scroll-wrapper" :> // 这里省略一些不太重要的代码 </div> <script> export default { 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})` } } } } </script>
网页题目:利用Vue怎么实现一个鼠标拖拽滚动效果-创新互联
分享链接:https://www.cdcxhl.com/article42/cegshc.html
成都网站建设公司_创新互联,为您提供网站建设、微信小程序、网页设计公司、云服务器、外贸网站建设、App设计
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联