Question

使用原始HTML / CSS / JS时，我们在子元素，粘性标头中进行滚动处理，并通过滑动进行删除。但是，在父div元素上初始化Vue之后，所有功能立即丢失。仅父div滚动，并且仅触发单击事件（标题不再发粘，甚至子元素也不再记录滑动）。

有没有办法让Vue通过父级传递事件或使Vue无法覆盖我们的自定义动画？

我如何在index.js中使用Vue：

var app = new Vue({
    el: '#root',
    mounted() {
        window.onscroll = function () {
            myFunction()
        }
        swipeable()
    },
    data: {
        e: []
    },
    methods: {
        refresh: function () {
          e = ... mutate e like this ...
        }
    },
    updated: function () {
        this.$nextTick(function () {
            console.log("Update finished.")
            swipeable()
        })
    }
})

调用的函数仅将一些基本的jQuery和Hammer侦听器应用于不同的元素。

HTML的构造如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aiko</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
</head>

<body>
    <div class="loader"></div>
    <div class="top-container">
        ... raw html ...
    </div>

    <ul class="messages" id="root">
        <li v-for="el in e">
            <div class="message">
                <h3>{{el.header.title}}</h3>
          <div class="messages-bottom">
              ... raw html ...
          </div>
        </div>
        <button class="button-delete">Delete</button>
      </li>
    </ul>


    <div class="footer">
        ... raw html ...
    </div>


    <script src='https://hammerjs.github.io/dist/hammer.min.js '></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

Answer 1

您需要在根组件的mounted()方法中移动自定义插件，事件侦听器等的初始化。

例如：

<template>
    <div ref="sampleElement">Target Element</div>
</template>

<script>
    export default {
        mounted: function() {
            $(this.$refs.sampleElement).myPlugin();
        }

    }
</script>

Vue不会将事件传递给孩子

1 个答案: