使用 Vue.js 单击时向下滚动

Question

我想要做的是，当用户点击一篇文章时，它会向下滚动到同级部分。 代码看起来像这样。

<template>
    <article @click="handleCardClick" class="text-center mr-8 mb-12 cursor-pointer hover:opacity-50 w-1/5">
        <picture class="flex justify-center items-center mb-4 w-full" style="height: 320px">
            <img :src="source" :alt="imgAlt" class="shadow-md" style="" />
        </picture>
        <h4 class="font-bold mb-1">{{ title }}</h4>
        <h6 class="text-sm text-gray-600">{{ tags.length > 0 ? tags[0].name : '' }}</h6>
    </article>
</template>
<script>
    import { mapActions, mapState } from 'vuex';

    export default {
        props: {
            title: {
                type: String,
                required: true,
            },
        },
        computed: {
            ...mapState({
                previewIndex: state => state.templates.hasTemplate
            }),
        },
        methods: {
            ...mapActions({
                setActiveTemplate: 'templates/setActive',
                setPreview: 'templates/setPreview',
                removePreview: 'templates/removePreview',
            }),
            handleCardClick () {
                this.setActiveTemplate(this.template);
                this.selectTemplate(this.pos);
            },
        }
    }
</script>

另一个文件看起来像这样

<template>
    <section v-if="template" class="flex justify-between w-full pt-10 pl-10 pr-5 pb-12 relative border-b border-t border-black my-4" style="height: 75vh">
        <article class="flex flex-col justify-between" style="width: 25%">
            <button @click="changeSection('invite')" class="h-1/3 pb-4">
                <picture class="h-full w-full flex justify-center items-center bg-gray-100">
                    <img :src="template.url || ''" class="bg-gray-200 shadow-lg" style="min-height: 20px; min-width: 20px; height:80%" alt="Preview de la invitacion">
                </picture>
            </button>
        </article>
    </section>
</template>

我对 Vue 有点陌生，所以也许它真的很简单，我只是找不到如何去做:) 提前谢谢！

Answer 1

您只需为每篇文章分配一个引用ref ，然后为您引用的任何文章构建一个 go 的方法：

<article @click="goto('art1')">Go to article 1</article>

为每个兄弟姐妹声明它的引用，以便您可以在goto方法上调用它们

<article ref="art1">
    Article 1
</article>

声明goto方法，它有一个参数，你要到哪里的参考go。

methods: {
    goto(refName) {
        var element = this.$refs[refName];
        var top = element.offsetTop;
        window.scrollTo(0, top);
    }
},

就是这样。

---

如果您在子组件中有单击操作，则必须使用 $emit 对父组件执行单击操作，以下是上述示例：

家长

<template>
    <Article @scrollto="goto"></Article>
    <Section ref="art1">
      ...
    </Section>  
</template>
<script>
import Article from "./article";
import Section from "./section";
    export default {
        methods: {
          goto(refName) {
            var element = this.$refs[refName];
            var top = element.offsetTop;
            window.scrollTo(0, top);
          }
        }
     }
</script>

文章.vue

<template>
  <div>
    <button @click="$emit("scrollto", 'art1')">
      Go to the Article!
    </button>
  </div>
</template>

---

关于 vue ref function 的文档

关于 window.scrollTo function 的文档