1.1.3 • Published 11 months ago

rh-carousel v1.1.3

Weekly downloads
-
License
-
Repository
-
Last release
11 months ago

Vue 3 + TypeScript + Vite

vue3 的轮播图

支持 1 张,2 张,多张一起轮播 alt 实例

npm 安装

npm install rh-carousel

pnpm 安装

pnpm install rh-carousel

yarn 安装

yarn add rh-carousel

/** main.js */
import "rh-carousel/lib/style.css"; // main.js 引入样式
import { createApp } from "vue";
// 全局注册
import Carousel from "rh-carousel";
createApp(App).use(Carousel);
// -----
//局部引入
import { RCascader, RCarouselItem } from "rh-carousel";
// 组件内使用
<RCascader :viewNum="3" width="1200px">
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg1">111</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg2">2222</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg3">3333</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg4">4444</div>
      </div>
    </RCarouselItem>
    <RCarouselItem>
      <div style="padding: 20px; height: 100%;">
        <div class="bg5">5555</div>
      </div>
    </RCarouselItem>
    <template #left>111</template>
  </RCascader>

RCascader Props(属性)

属性说明默认值类型
width轮播图的宽度500pxString, Number
height轮播图的高度度300pxString, Number
viewNum可视数量3Number
interval自动轮播的时间3000Number
autoPlay是否自动轮播trueBoolean

RCascader Slots(插槽)

插槽说明
default轮播图的子项,必须是\<RCarouselItem>
left左按钮 <template #left>icon\
right右按钮 <template #right>icon\

RCarouselItem Props(属性)

轮播图子项

暂无属性

RCarouselItem Slots(插槽)

插槽说明
default每一项的具体内容
1.1.3

11 months ago

1.0.3

11 months ago

1.0.2

11 months ago

1.0.1

11 months ago

0.0.1

11 months ago