import { storiesOf } from '@storybook/vue' import { defineComponent, ref, computed } from '@vue/composition-api' import { useList } from '../index' import md from '../docs/list.md' const Count = defineComponent({ template: `
EXAMPLE
dataLength: {{data.length}}
renderData: {{renderData}}
size: {{size}}
itemHeight: {{itemHeight}}

{{item}}

`, setup() { const { data, renderData, scroll, top, itemHeight, size, el, toTop } = useList() let all = []; for (let i = 0; i < 10000; i++) { all.push(i); } data.value = all itemHeight.value = 20 size.value = 10 const viewStyle = computed(() => { return { height: size.value * itemHeight.value + 'px', overflowY: "scroll" } }) const containerStyle = computed(() => { return { height: data.value.length * itemHeight.value + 'px', position: "relative" } }) const offsetTop = computed(() => { return { top: top.value + 'px', position: "absolute" } }) const onScroll = function (e) { scroll(e.target.scrollTop) } return { data, renderData, itemHeight, size, onScroll, toTop, viewStyle, containerStyle, offsetTop, top, view: el, } } }) storiesOf('UI|useList', module) .add('list', () => Count, { readme: { sidebar: md } })