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

【问题标题】：Is there a way to make a css property reactive with vuejs @scroll?有没有办法使 css 属性与 vuejs @scroll 反应？
【发布时间】：2019-12-24 10:03:26
【问题描述】：

我正在我的项目中制作一个 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 进行缩放？

【问题讨论】：

标签： css vue.js

【解决方案1】：

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

<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
      }
   }
})

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

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

【讨论】：