npm package: @femate/grid-picture
Description: 一个基于 TypeScript 的跨平台 ( Vue3 / React / 小程序 ) 九宫格拼图游戏插件
Author: BlindMonk
Latest version: 1.1.7


<div align="center">
  <img src="https://cdn.jsdelivr.net/gh/MaleWeb/picture/images/techblog/grid-picture-logo.svg" width="128" alt="logo" />
  <h1>grid-picture 九宫格拼图游戏</h1>
  <p>一个基于 TypeScript 的跨平台 ( Vue3 / React / 小程序 ) 九宫格拼图游戏插件</p>
  <p>
    <a href="https://github.com/tobe-fe-dalao/femate/stargazers" target="_black">
      <img src="https://img.shields.io/github/stars/tobe-fe-dalao/femate?color=%23ffba15&logo=github&style=flat-square" alt="stars" />
    </a>
    <a href="https://github.com/tobe-fe-dalao/femate/network/members" target="_black">
      <img src="https://img.shields.io/github/forks/tobe-fe-dalao/femate?color=%23ffba15&logo=github&style=flat-square" alt="forks" />
    </a>
    <a href="https://github.com/BlindMonk" target="_black">
      <img src="https://img.shields.io/badge/Author-%20BlindMonk%20-7289da.svg?&logo=github&style=flat-square" alt="author" />
    </a>
    <a href="https://github.com/tobe-fe-dalao/femate/blob/master/LICENSE" target="_black">
      <img src="https://img.shields.io/github/license/tobe-fe-dalao/femate?color=%232dce89&logo=github&style=flat-square" alt="license" />
    </a>
  </p>
</div>

<div align="center">

<img src="./examples/demo.gif" width="600" alt="全功能版 " />   


<img src="./examples/auto.gif" width="600" alt="自动寻路版" />
</div>

**如果您觉得这个项目还不错, 可以在 [Github](https://github.com/tobe-fe-dalao/femate) 上面帮我点个`star`, 支持一下作者 ☜(ﾟヮﾟ☜)**

# Quick start

- 待更新...

# Features

- 支持初始化功能，**初始化触发onload函数，可以做监听事件**
- 支持步数、成功、失败等回调，**开始/重置**
- 支持自动划分格数，通过行数和列数自由组合
- 支持自定义动画时间，让拖拽丝滑般顺畅
- 支持自动寻路算法，可控制步数区间
- 基于 `typescript`，`7KB Gzipped`，支持服务端渲染
- 支持跨端使用，支持`umd`,`esm`等方式加载
- 附带零基础上手教程，快速学习，分步拆解讲解

# Install

```bash
yarn add grid-picture
```

# Basic usage:
## 方式 1：通过 script 标签引入
> CDN 链接  
> jsdelivr：https://cdn.jsdelivr.net/npm/grid-picture@1.0.6  
> unpkg：https://unpkg.com/grid-picture@1.0.6/dist/index.umd.js  
> 这里提供 jsdelivr 或 unpkg 的 CDN 链接

```html
<div id="grid-picture"></div>
<script src="https://cdn.jsdelivr.net/npm/grid-picture@1.0.2"></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. 安装
```shell
# npm 安装
npm install grid-picture@latest

# 或者 yarn 安装
yarn add grid-picture@latest 

# 或者 pnpm 安装
pnpm add grid-picture@latest
```
### 2. 使用
```js
<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