## @jianyu/vue-anti

### npm-package-git-url-formats

> [官网npm-package-git-url-formatsnpm-package-git-url-formats](https://docs.npmjs.com/about-packages-and-modules#npm-package-git-url-formats

- `http://192.168.3.207:8080/EFE/vue-anti.git#commit-ish`
- `ssh://root@192.168.3.207:10022/EFE/vue-anti.git#commit-ish`

 `commit-ish` 可以是所有`标签` 、`sha (commit-id)`、`分支` 

 `commit-ish` 默认是`master`

### 开发库

```
yarn
yarn run serve
```



### 引用库

#### 安装

```json
1. 在package.json的dependencies中添加
{
  "dependencies": {
    "@jianyu/vue-anti": "http://192.168.3.207:8080/EFE/vue-anti.git#v0.1.0",
  }
}
2. 执行命令 yarn
```

```
# 使用git tag进行包的版本管理
http://192.168.3.207:8080/EFE/vue-anti.git#v0.1.0
{仓库地址}#{commit-ish}
```



#### 调用示例

```js
// 库一共提供了以下内容
import {
  VerifyPointsComponent, // 验证码组件.vue
  VerifyPointsPopup, // (popup+验证码组件).vue
  VerifyPointsClass, // 提供了js调用VerifyPointsPopup的class
  registerAntiInterceptors // 集成axios响应拦截器，并支持重发请求等弹窗验证逻辑
} from '@jianyu/vue-anti'
```

##### 拦截器注册方式

> 这是最简单的使用方式。只需要引入调用并传入 **axios** 实例即可

```js
import service from './service'
import { registerAntiInterceptors } from '@jianyu/vue-anti'
// 注册拦截器
registerAntiInterceptors(service)
export default service
```

##### JS调用方式

> 该库还提供了单独调用验证码弹窗的class。
>
> 在 拦截器注册 满足不了需求的情况下可以更加灵活的使用验证码弹窗组件

```js
import { VerifyPointsClass } from '@jianyu/vue-anti'
const instance = new VerifyPointsClass()

// 显示弹窗
instance.verify({
    value: true, // 控制显示隐藏
    imgBase64: res.imgData,
    textVerify: res.textVerify,
    refresh () {},
    confirm (msg) {
        const { pointsCoordinate, imgWidth } = msg
        // pointsCoordinate，验证点的坐标信息 [`${x},${y}`]
        // example: ['34,22', '76,82']
        // imgWidth图片宽度 Int(px)
        console.log(msg)
    }
})

// 隐藏弹窗
instance.verify({ value: false })
```

```js
// 弹窗高级用法
const iReceivedMsg = await new Promise((resolve) => {
    instance.verify({
        value: true,
        imgBase64: res.imgData,
        textVerify: res.textVerify,
        refresh () {
            resolve({
                type: 'refresh'
            })
        },
        confirm (msg) {
            resolve({
                type: 'confirm',
                imgw: msg.imgWidth,
                antiVerifyCheck: msg.pointsCoordinate.join(';')
            })
            verify.$vm.onReset()
        }
    })
})
console.log(iReceivedMsg)
```

##### 引用组件方式

> 该库还可以支持在vue组件内使用
>
> 在页面弹窗可以使用 VerifyPointsPopup 组件
>
> 嵌入到页面信息流中可以使用 VerifyPoints 组件

```vue
<template>
	<VerifyPoints />
	<VerifyPointsPopup v-model="show"></VerifyPointsPopup>
</template>
<script>
import { VerifyPoints, VerifyPointsPopup } from '@jianyu/vue-anti'  
export default {
    name: 'test',
    components: {
        VerifyPoints,
        VerifyPointsPopup
    },
    data () {
        return {
            show: true
        }
    }
}
</script>
```