JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • 0
  • Score
    100M100P100Q47651F
  • License ISC

a cool 3D paper cut

Package Exports

  • duo-paper-cut

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (duo-paper-cut) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

一个炫酷的3D图片切割轮播图

目录

快速入门

安装

$ npm i duo-paper-cut --save             # install duo-paper-cut 

用法

main.js 文件:

import duoPaperCut from 'duo-paper-cut'

Vue.use(duoPaperCut)

使用:

<template>
  <div>
    <duo-paper-cut 
      :width="width"
      :height="height"
      :srcList="srcList"
      :autoPlay="autoPlay"
      :interval="interval"
      :transition="transition"
      :cutsNumber="cutsNumber"
      :paginationDirection="paginationDirection"
    />
  </div>
</template>
<script>
export default {
  data() {
    return {
      width: 1200, // 宽度
      height: 560, // 高度
      cutsNumber: 18, // 切割数
      interval: 8000, // 自动轮播间隔时间(单位ms)
      autoPlay: false, // 是否自动轮播
      transition: 1500, // 动画过渡时间(单位ms)
      paginationDirection: "left-bottom", // 分页位置
      srcList: [ // 图片资源
        "https://goss.cfp.cn/static/home/h2_5.png",
        "http://d300.paixin.com/thumbs/1739009/19194001/staff_1024.jpg",
        "https://goss.cfp.cn/static/home/h2_6.png",
        "http://d300.paixin.com/thumbs/1067920/20205975/staff_1024.jpg",
      ],
    };
  },
};
</script>

→ simple demo

维护者