vue-beginner-guide/README.md

A novice boot component based on vue

## Novice boot component

### Install
```js
npm install vue-beginner-guide -S
```
```js
import Guide from 'vue-beginner-guide';
Vue.component('Guide', Guide);
```

### Params

| Attribute | Explanation | Type | Default |
| --------- | ----------- | ---- | ------- |
| show | Control the display of novice boot | Boolean | false |
| config | Content configuration, each array entry is a step in the boot, as follows | Array | [] | 

### The config sample

```js
config: [{
    dom: 'block1',// Box selection element, DOM node or ID name
    title: 'Step 1 Title',// Description copy title
    cont: ['1.This is the first paragraph', '2.This is the second paragraph'],// State the content of the copy, each item is a paragraph
    btnText: { // Action buttons
        pre: 'previous',// Previous button copy
        next: 'next',// Next button copywriting
        close: 'close'// Close button copywriting
    },

    width: 200, // Optional:You can customize the width of the box area. When not specified, the component automatically takes the width of the target element
    height: 100, // Optional:The box area defines the height. If this is not specified, the component automatically takes the width of the target element

    fakeImg: './image.png' // Optional:Overwrite the image of the target element, if you want to replace the element to be illustrated with a picture.
},
{
    //... Step 2
}]
```

### Events

| The event name | instructions | The return value |
| --------- | ----------- | ------ |
| before-next | Click the Next button to switch before triggering | preIndex & nextIndex：Index before and after the switch; preConfig & nextConfig: The configuration before and after the switch |
| after-next | Click the next button to trigger the switch | preIndex & nextIndex：Index before and after the switch; preConfig & nextConfig: The configuration before and after the switch |
| before-back | Click the previous button to switch before triggering | preIndex & nextIndex：Index before and after the switch; preConfig & nextConfig: The configuration before and after the switch |
| after-back | Click the previous button to trigger the switch | preIndex & nextIndex：Index before and after the switch; preConfig & nextConfig: The configuration before and after the switch |
| close | Click the close button to trigger | index: The sequence number of the step when closing; curConfig:Step configuration when closing |


## 新手引导组件

### 引入
```js
npm install vue-beginner-guide -S
```
```js
import Guide from 'vue-beginner-guide';

Vue.component('Guide', Guide);
```

### 参数

| 属性 | 解释 | 类型 | 默认 |
| --------- | ----------- | ---- | ------- |
| show | 控制新手引导的展示 | Boolean | false |
| config | 内容配置，每一个数组项是引导中的一步，具体配置如下 | Array | [] | 

### config配置内容示例

```js
config: [{
    dom: 'block1', //框选元素，dom节点或id名
    title: '第一步标题', //说明文案标题
    cont: ['1.这是第一段文案', '2.这是第二段文案'], //说明文案内容，每一项是一段
    btnText: { //操作按钮
        pre: '上一步', // 上一步按钮文案
        next: '下一步', // 下一步按钮文案
        close: '关闭' // 关闭引导按钮文案
    },

    width: 200, //（可选）框选区域自定义宽度，当不指定时，组件自动取目标元素的宽度
    height: 100, //（可选）框选区域自定义高度，当不指定时，组件自动取目标元素的高度

    fakeImg: './image.png' //（可选）覆盖目标元素的图片（如果想用一张图片替代要说明的元素时）
},
{
    //... 第二步
}]
```

### 事件

| 事件名 | 说明 | 返回值 |
| --------- | ----------- | ------ |
| before-next | 点击下一步按钮，切换之前触发 | preIndex 和 nextIndex：切换前后的index；preConfig 和 nextConfig：切换前后步骤的配置 |
| after-next | 点击下一步按钮，切换之后触发 | preIndex 和 nextIndex：切换前后的index；preConfig 和 nextConfig：切换前后步骤的配置 |
| before-back | 点击上一步按钮，切换之前触发 | preIndex 和 nextIndex：切换前后的index；preConfig 和 nextConfig：切换前后步骤的配置 |
| after-back | 点击上一步按钮，切换之后触发 | preIndex 和 nextIndex：切换前后的index；preConfig 和 nextConfig：切换前后步骤的配置 |
| close | 点击关闭按钮触发 | index: 关闭时的步骤序号；curConfig：关闭时的步骤的配置 |