如果您觉得这个项目还不错, 可以在 Github 上面帮我点个star, 支持一下作者 ☜(ﾟヮﾟ☜)

Quick start

• 待更新...

Features

• 支持初始化功能，初始化触发onload函数，可以做监听事件
• 支持步数、成功、失败等回调，开始/重置
• 支持自动划分格数，通过行数和列数自由组合
• 支持自定义动画时间，让拖拽丝滑般顺畅
• 支持自动寻路算法，可控制步数区间
• 基于 typescript，7KB Gzipped，支持服务端渲染
• 支持跨端使用，支持umd,esm等方式加载
• 附带零基础上手教程，快速学习，分步拆解讲解

Install

yarn add grid-picture

Basic usage:

方式 1：通过 script 标签引入

CDN 链接
jsdelivr：https://cdn.jsdelivr.net/npm/[email protected]
unpkg：https://unpkg.com/[email protected]/dist/index.umd.js
这里提供 jsdelivr 或 unpkg 的 CDN 链接

<div id="grid-picture"></div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
  // 九宫格拼图的简易Demo
  const Gpicture = new GridPicture({
        url: "",
        el: "#grid-picture",
        col: 3,
        row: 3,
        loadComplete: () => {
            // console.log('加载完毕')
        },
        onBlockMove: (steps, moveDom) => {
            // console.log('移动的DOM', moveDom)
        },
        success: (steps) => {
            // console.log('拼图成功')
        },
        beforeDestroy: () => {
            // console.log('加载完毕')
        }
  })
</script>

方式 2：通过 import 引入

1. 安装

# npm 安装
npm install grid-picture@latest

# 或者 yarn 安装
yarn add grid-picture@latest 

# 或者 pnpm 安装
pnpm add grid-picture@latest

2. 使用

<div id="grid-picture"></div>
import  GridPicture  from 'grid-picture'

// 大转盘简易 Demo
const Gpicture = new GridPicture({
        url: "",
        el: "#grid-picture",
        col: 3,
        row: 3,
        loadComplete: () => {
            // console.log('加载完毕')
        },
        onBlockMove: (steps, moveDom) => {
            // console.log('移动的DOM', moveDom)
        },
        success: (steps) => {
            // console.log('拼图成功')
        },
        beforeDestroy: () => {
            // console.log('加载完毕')
        }
  })

方式 3：在Vue3中使用

撸码进行中....

License

MIT