@dianjing/vue-components v1.0.7

vue-components

• vue-components

• dependency

• components
  • toast
  • navigation-bar
  • overlay
  • List
  • SvgaPlayer

dependency

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

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

components

toast

轻提示

类型定义

(string | Options) => void;

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

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

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

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

demo

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

navigation-bar

顶部导航栏

类型定义

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

slots

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

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

demo

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

overlay

遮罩层

类型定义

type Options {
  'v-model': boolean,

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

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

demo

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

List

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

类型定义

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

<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

<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"

类型定义

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

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

demo

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