扫一扫分享
vue-Composable提供了基于Typscript的组合api组件,包含了i18n、验证、分页、事件等的30多个通用组件。
这个库的目标是成为许多现实世界中可组合的功能的一站式商店,使用具有侵略性的tree-shaking,让你的最终代码轻量化。
安装
# @vue/composition-api
# install with yarn
yarn add @vue/composition-api vue-composable
# install with npm
npm install @vue/composition-api vue-composable
# vue 3
# install with yarn
yarn add vue-composable
# install with npm
npm install vue-composable
使用
<template>
<div>
<p>page {{ currentPage }} of {{ lastPage }}</p>
<p>
<button @click="prev">prev</button>
<button @click="next">next</button>
</p>
<ul>
<li v-for="n in result" :key="n">
{{ n }}
</li>
</ul>
</div>
</template>
<script>
import { useArrayPagination } from "vue-composable";
export default {
setup() {
const array = new Array(1000).fill(0).map((_, i) => i);
const { result, next, prev, currentPage, lastPage } = useArrayPagination(
array,
{
pageSize: 3
}
);
return { result, next, prev, currentPage, lastPage };
}
};
</script>
手机预览