vue-components
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>