折叠列表 OverflowList

---

基本使用

折叠列表的基本使用方法。

代码事例

<template>
  <fk-form auto-label-width>
    <fk-form-item label="Tag Number">
      <fk-input-number v-model="number" :min="0" :max="20" style="width: 200px"/>
    </fk-form-item>
    <fk-form-item label="List Width">
      <fk-slider v-model="width" :min="0" :max="800" />
    </fk-form-item>
  </fk-form>
  <div :style="{width:`${width}px`,marginTop:'20px'}">
    <fk-overflow-list>
      <div>DIV Element</div>
      <fk-tag v-for="item of tags" :key="item">Tag{{item}}</fk-tag>
    </fk-overflow-list>
  </div>
</template>

<script>
import { computed, ref } from 'vue';

export default {
  setup() {
    const width = ref(500);
    const number = ref(10);
    const tags = computed(() => Array.from({length: number.value}, (_, idx) => idx + 1));

    return {
      width,
      number,
      tags
    }
  }
}
</script>

折叠方向

通过 from 属性可以设置折叠的方向。

代码事例

<template>
  <fk-form auto-label-width>
    <fk-form-item label="Tag Number">
      <fk-input-number v-model="number" :min="0" :max="20" style="width: 200px"/>
    </fk-form-item>
    <fk-form-item label="List Width">
      <fk-slider v-model="width" :min="0" :max="800" />
    </fk-form-item>
  </fk-form>
  <div :style="{width:`${width}px`,marginTop:'20px'}">
    <fk-overflow-list from="start">
      <div>DIV Element</div>
      <fk-tag v-for="item of tags" :key="item">Tag{{item}}</fk-tag>
    </fk-overflow-list>
  </div>
</template>

<script>
import { computed, ref } from 'vue';

export default {
  setup() {
    const width = ref(500);
    const number = ref(10);
    const tags = computed(() => Array.from({length: number.value}, (_, idx) => idx + 1));

    return {
      width,
      number,
      tags
    }
  }
}
</script>

API

<overflow-list> Props

参数名	描述	类型	默认值
min	最少展示的元素个数	number	0
margin	项目间隔	number	6
from	折叠方向	'start' | 'end'	'end'

<overflow-list> Events

事件名	描述	参数
change	溢出数量改变时触发	value: number

<overflow-list> Slots

插槽名	描述	参数
overflow	折叠元素	number: number