Question

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

Answer 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所示，以减少方法代码（在此情况下，只要用户在悬停该特定元素时进行滚动，我们就可以防止页面滚动）：< / p>

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

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

1 个答案: