# vue-components #

[![npm version](https://img.shields.io/npm/v/@dianjing/vue-components.svg?style=flat-square)](https://www.npmjs.org/package/@dianjing/vue-components)
[![install size](https://packagephobia.com/badge?p=@dianjing/vue-components)](https://packagephobia.com/result?p=@dianjing/vue-components)
[![npm downloads](https://img.shields.io/npm/dm/@dianjing/vue-components.svg?style=flat-square)](https://npm-stat.com/charts.html?package=@dianjing/vue-components)
[![js delivr downloads](https://data.jsdelivr.com/v1/package/npm/@dianjing/vue-components/badge)](https://www.jsdelivr.com/package/npm/@dianjing/vue-components)

<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
- [vue-components](#vue-components)

- [dependency](#dependency)
- [components](#components)
  - [toast](#toast)
  - [navigation-bar](#navigation-bar)
  - [overlay](#overlay)
  - [List](#list)
  - [SvgaPlayer](#svgaplayer)

<!-- END doctoc generated TOC please keep comment here to allow auto update -->

## dependency ##

> 如果通过cdn移入并且不想引入 vant, 需要定义全局变量 vant `window.vant = {}`

> 不引入 `vant` 无法使用 `<list></list>`

## components ##

### toast ###

> 轻提示

类型定义

```typescript
(string | Options) => void;

type Options = {
  /**
   * 消息主体
   */
  message: string;

  /**
   * 出现位置
   */
  position?: 'top' | 'bottom';

  /**
   * 持续时间
   */
  duration?: number;

  /**
   * 自定义样式
   */
  style?: string;
};
```

demo

```typescript
this.$toast('Hello World');
this.$toast({
  message: 'Hello World',
  position: 'top',
  duration: 5000,
  style: 'background: rgba(0, 0, 0, 1)',
});
```

### navigation-bar ###

> 顶部导航栏

类型定义

```typescript
type Options {
  /**
   * 点击左侧的内容触发的事件
   */
  back: () => void;
  
  /**
   * 内容是否会出现在导航栏下面
   */
  fullScreen: boolean;
}
```

> slots

```html
<template v-slot="left">
  左侧的内容
</template>

<template v-slot="right">
  右侧的内容
</template>
```

demo

```html
<navigation-bar @back="back" :fullScreen="false">
  导航栏
</navigation-bar>
```

### overlay ###

> 遮罩层

类型定义

```typescript
type Options {
  'v-model': boolean,

  /**
   * 默认居中
   */
  position?: 'center', 'left' | 'right' | 'top' | 'bottom';

  /**
   * 点击遮罩是否直接关闭
   */
  closeOnClickModal: false,
};
```

demo

```html
<overlay v-model="show" position="left" closeOnClickModal="true">
  <div class="content"></div>
</overlay>
```

### List ###

> 列表组件，带上拉加载，下拉刷新  

类型定义

```typescript
type Options {
  /**
   * 请求数据的方法，必传
   */
  getData: (page: number) => Promise<any[]>;

  /**
   * 禁用下拉刷新, 默认false
   */
  pullRefreshDisabled: boolean;

  /**
   * 下拉刷新顶部高度, 默认50px
   */
  pullRefreshHeight: number;

  /**
   * 触发下拉刷新的高度, 默认50px
   */
  pullRefreshDistance: number;

  /**
   * 刷新动画时长, 默认 300ms
   */
  pullRefreshAnimationDuration: number;

  /**
   * 刷新成功提示时长, 默认 500ms
   */
  pullRefreshSuccessDuration: number; 

  /**
   * 距离底部的高度小于 `loadMoreOffset` 时，触发加载更多
   * 默认 300 px
   */
  loadMoreOffset: number,
};
```

> slots

```html
<template v-slot:load-more-loading>
  加载更多提示
</template>

<template v-slot:load-more-finished="{ size }">
  加载结束提示，size 为当前数据量
</template>

<template v-slot:load-more-error>
  加载失败提示
</template>

<template v-slot:pulll-refresh-finish="{ error }">
  下拉刷新结束提示,error为true表示加载出错
</template>

<template v-slot:pull-refresh-normal="{ error }">
  非下拉状态提示，error为true表示上一次加载出错
</template>

<template v-slot:pull-refresh-pulling="{ distance, error }">
  下拉中提示，distance 表示距离顶部的距离
</template>

<template v-slot:pull-refresh-loosing="{ distance }">
  下拉释放过程中提示，distance 表示距离顶部的距离
</template>

<template v-slot:pull-refreshing="{ distance }">
  下拉刷新数据请求中提示，distance 表示距离顶部的距离
</template>
```
demo

```html
<template>
  <list :get-data="getData">
    <template v-slot="{ data }">
      <li
        class="list-item"
        v-for="item in data"
        :key="item"
      >
        {{item}}
      </div>
    </template>
  </list>
</template>

<script>
export default {
  async getData(page) {
    // TODO 请求数据
    return new Promise([]);
  },
}
</script>
```
### SvgaPlayer ###

> svga 播放器,每次播放需要卸载原来的组件,建议加 :key="src"

类型定义

```typescript
type Options = {
  /**
   * svga 地址,建议放cdn上
   */
  src: string;

  /**
   * 是否使用 indexDB
   * 默认ios不使用，其他使用
   */
   useDB?: boolean;
};
```

demo

```html
<template>
  <SvgaPlayer src="https://s.xingqiu123.com/h5/zodiac/0.svga" />
</template>
```