时间戳

首页 > 解决方案 > 有没有办法使 css 属性与 vuejs @scroll 反应？

css - 有没有办法使 css 属性与 vuejs @scroll 反应？

问题描述

我正在我的项目中制作一个 vuejs 组件，我需要在 div 中创建一个带有滚动的缩放（如 googlemaps）。

<div @scroll="scroll">
    <Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

<style>
  div {
  transform: scale(property1);
  }
<\style>

<script>
export default {
    methods: {
        scroll(event) {
        },
    },
    created() {
        window.addEventListener('scroll', this.scroll);
    },
    destroyed() {
        window.removeEventListener('scroll', this.scroll);
    }
}
</script>

我怎样才能制作一种使“property1”反应的方法？或者还有另一种方法可以仅滚动 div 进行缩放？

标签： cssvue.js

解决方案

您可以将动态样式对象绑定到您的对象，div其中包括transform具有动态值的属性（有关更深入的解释，请参阅文档）：

<div @scroll="scroll" :style="{ transform : `scale(${property1})`}">
      <Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

new Vue({
   ...
   data() {
     return {
        property1: defaultValue
     }
   },
   methods : {
      scroll(e){
         // e is the event emitted from the scroll listener
         this.property1 = someValue
      }
   }
})

您还可以在模板中添加一些修饰符，如文档中所示，以减少方法代码（这里我们可以防止页面在用户悬停此特定元素时滚动时滚动）：

<div @scroll.self.stop="scroll" :style="{ transform : `scale(${property1})`}">
      <Plotly :data="info" :layout="layout" :display-mode-bar="false"></Plotly>
</div>

推荐阅读