Vue点击div按钮使其具备自动居中功能

最新推荐文章于 2025-02-21 04:15:00 发布

爱学习滴小可桢

最新推荐文章于 2025-02-21 04:15:00 发布

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/qq_48731430/article/details/129217746

版权

本文介绍如何在Vue项目中创建一个div按钮，并通过JavaScript实现点击后自动居中的功能。首先，编写一个scroll.vue组件，该组件支持横向和纵向滑动。然后，在需要使用此功能的页面中引入该组件，以此实现点击div按钮后的居中效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.写一个支持滑动的组件scroll.vue

<template>
    <div class="scrollBarWrapper" :style="scrollBarWrapperStyle">
      <div
        class="scrollBarContent"
        :class="direction === 'y' ? 'directionY' : 'directionX'"
        ref="scrollBarContent"
      >
        <slot></slot>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    props: {
      direction: {
        type: String,
        default: "x",
        validator(value) {
          return value === "x" || value === "y";
        }
      },
      activeIndex: {
        type: Number,
        default: 0,
        validator(value) {
          return value >= 0;
        }
      }
    },
    watch: {
      activeIndex(newVal, oldVal) {
        this.handleChange();
      }
    },

最低0.47元/天解锁文章