vue CLI3.0自己实现一个轮播组件，并设置自定义属性

最新推荐文章于 2024-09-18 08:00:00 发布

原创

最新推荐文章于 2024-09-18 08:00:00 发布 · 置顶 · 1.1k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #cli #javascript #轮播 #swiper

本文通过Vue CLI3.0创建了一个自定义轮播组件，利用Vue.component注册全局组件，采用translateX实现滑动效果。详细步骤包括新建组件文件、注册组件、在main.js中引入以及组件使用方法。同时，讨论了如何获取用户设置的参数和轮播数量，寻求优化建议。

搭建CLI步奏过程不详细介绍了

主要利用Vue.component()注册全局组件,滑动效果使用了translateX
如下图
在这里插入图片描述
让后开始详细介绍如何实现自己的轮播组件

一.新建jv-swiper文件夹
1.1、然后在jv-swiper文件夹新建index.vue ，该vue其实为swiper的外层控制

<template>
  <div class="jv-swiper" ref="swileng">
    <slot></slot>
    
     <div v-if="indicator==='true'" class="indicator-box">//此段代码为指示器，轮播的小点点
        <div  v-for="(i,index) in jv_siwdom" :key="index" :class="jv_siw_index==index?'indicator_color':''" class="indicator">    </div>
     </div>
   
  </div>
</template>

<script>

/* eslint-disable */
export default {
  name: "JvSwiper",
  porps: {},
  data() {
    return {
      indicator: true,
      jv_siwdom: 0,
      jv_siw_index: 0,
    };
  },
  created() {},
  mounted() {
    let jv_interval = 3000,//滑动间隔
      jv_duration = 300,//运动时间
      jv_indicator = tru