open-index/open-npm huggingface dataset:
npm package: @fcli/anchor-point-page
Description: vue3 锚点，导航组件
Author: fcli
Latest version: 1.0.0

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2024-02-06 10:49:23
 * @FilePath: /anchor-point-page/README.md
 * @Description: 
-->

## 锚点导航组件

```bash
npm install @fcli/anchor-point-page --save-dev 来安装

在项目中使用
import AnchorPointPage from '@fcli/anchor-point-page';
const app=createApp(App)
app.use(AnchorPointPage);

```

示例请查看APP.vue

**authorData需要id、label和children属性**

#### slot

可自定义第三层的展示内容
例：
```
  <template #slot-scope="{ data }">
        <div class="li">{{ data.label }}</div>
  </template>
```
npm package: @fcli/vue-auto-scroll
Description: vue3 无缝滚动组件
Author: fcli
Latest version: 0.0.5

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2024-01-04 15:31:11
 * @FilePath: /vue-auto-scroll/README.md
 * @Description: 
-->
# vue-auto-scroll


## VUE3 无缝滚动，循环滚动列表插件,支持鼠标滚动

```bash
npm install @fcli/vue-auto-scroll --save-dev 来安装


在项目中使用
import VueAutoScroll from '@fcli/vue-auto-scroll';
const app=createApp(App)
app.use(VueAutoScroll);
```

示例：

```html

<div class="content">
    <vue-auto-scroll :data="list" :steep="0.5" scrollDirection="top" :isRoller="true" :rollerScrollDistance="50">
      <div class="li" v-for="i in list" :key="i">
        {{ i }}
      </div>
    </vue-auto-scroll>
</div>

```

| 属性   | 属性名称 | 类型   | 可选值 |
| ------ | -------- | ------ | ------ |
| steep  | 滚动的速率   | number | 为正数即可,如果为0则不会自动滚动 |
| scrollDirection | 滚动的方向   | string | top ,bottom,left,right |
| isRoller | 是否可以使用滚轮滚动   | boolean |true,false |
| rollerScrollDistance | 滚轮滚动的速率   | number |（isRoller 必须为 true）为正数即可  |
| data | 接收异步数据   | array |同步任务可不传 |


<font color=#ff0000>注： 当scrollDirection 为top或bottom时，一定要为 vue-auto-scroll 组件设置高度。 当scrollDirection 为left或right时，一定要为 vue-auto-scroll 组件设置宽度。并为嵌入vue-auto-scroll中的标签设置样式为display:inline-block; 示例样式名为list-item可以更改为其他类名。</font>

<font color=#ff0000>注：  当scrollDirection 为left或right时,是基于行内元素的“white-space: nowrap;” 来控制强制不换行的。有可能会影响其内部的文字排列。可以在list-item 层添加  white-space: normal; 来处理给问题。并为其添加固定宽度，以保证文字可以正常换行及插件的正确计算与显示。如果没有为其添加固定宽度，会造成插件获取父容器层的宽度值错误，导致显示混乱</font>
npm package: @fcli/vue-calendar-map
Description: 仿git提交 vue3 日历热点图
Author: fcli
Latest version: 1.0.2

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2023-11-08 10:09:04
 * @FilePath: /vue-calendar-map/README.md
 * @Description: 
-->
# vue-calendar-map


## 仿git提交 vue3 日历热点图

```bash
npm install @fcli/vue-calendar-map --save-dev 来安装

在项目中使用
import VueCalendarMap from '@fcli/vue-calendar-map';
const app=createApp(App)
app.use(VueCalendarMap);

```

## 使用实例

```
<template>
  <div class="content">
    <vue-calendar-map :timeData="timeData" :maxData="maxData"></vue-calendar-map>
  </div>
</template>

<script setup lang="ts">
import dayjs from 'dayjs';
import VueCalendarMap from './plugin/index.vue';
import {ref} from 'vue';
components:{
  VueCalendarMap
}
const maxData=ref(190);
const timeData=ref<any>({})
let tempDate:any={}
for(let i=0;i<366;i++){
  let date=dayjs().subtract(1, 'year').add(i, 'days').format('YYYY-MM-DD')
  tempDate[date]=(Math.random() * 200).toFixed(0);
}
timeData.value=tempDate;
</script>

```

## 参数说明

| 属性   | 属性名称 | 类型   | 可选值 |
| ------ | -------- | ------ | ------ |
| timeData  | 日期和数量对应对象   | Object | {} |
| maxData | 最大值   | Number | 0 |
npm package: @fcli/vue-drag
Description: vue3 拖动悬浮
Author: fcli
Latest version: 1.0.1

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2023-10-27 15:23:55
 * @FilePath: /vue-drag/README.md
 * @Description: 
-->
# vue-drag


## VUE3 拖拽组件

```bash
npm install @fcli/vue-drag --save-dev 来安装

在项目中使用
import VerCode from '@fcli/vue-vercode';
const app=createApp(App)
app.use(VerCode);

```

## 使用实例

```
 <div class="content">
    <vue-drag right="20px" bottom="30px">
      <div class="circle">+</div>
    </vue-drag>
</div>
```

## 参数说明

| 属性   | 属性名称 | 类型   | 可选值 |
| ------ | -------- | ------ | ------ |
| right  | 初始化时距离右边的距离   | string | 20px |
| bottom | 初始化时距离底部的距离   | string | 30px |

## slot

可拖拽组件中的自定义内容
npm package: @fcli/vue-grid-waterfall
Description: vue3 瀑布流
Author: fcli
Latest version: 1.0.1

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2023-09-20 11:25:33
 * @FilePath: /my_module/vue-grid-waterfall/README.md
 * @Description: 
-->
# vue-grid-waterfall


## VUE3 瀑布流组件，基于Grid布局

```bash
npm install @fcli/vue-grid-waterfall --save-dev 来安装

在项目中使用
import VueGridWaterfall from '@fcli/vue-grid-waterfall';
const app=createApp(App)
app.use(VueGridWaterfall);

```

示例：

```html

<template>
  <div class="content">
    <vue-grid-waterfall :data-list="dataList" :columns="3" @getMoreData="getMoreData" :loading="isLoading">
      <template #slot-scope="{ slotProps }">
        <div class="item" :style="{ height: slotProps.data.height, background: slotProps.data.color }">{{ slotProps.data.color
        }}</div>
      </template>
    </vue-grid-waterfall>
  </div>
</template>

<script setup lang="ts">
import vueGridWaterfall from './plugin/index.vue';
import { ref, onMounted } from 'vue'
component: {
  vueGridWaterfall
}

const dataList = ref<any>([]);
//获取随机颜色
const getRandomColor = () => {
  const getColor: any = (color: any) => {
    return (color += '0123456789abcdef'[Math.floor(Math.random() * 16)]) && (color.length == 6) ? color : getColor(color);
  };
  return '#' + getColor('')
}

const getMoreData = () => {
  isLoading.value = true;
  getData()
}
const isLoading = ref(true);

//获取数据
const getData = () => {
  for (let i = 0; i < 100; i++) {
    dataList.value.push({ height: 50 + Math.random() * 50 + 'px', color: getRandomColor() })
  }
  setTimeout(()=>{
      isLoading.value = false;
  })
}

onMounted(() => {
  getData()
})
</script>

```

| 属性   | 属性名称 | 类型   | 可选值 |
| ------ | -------- | ------ | ------ |
| dataList  | 瀑布流列表数据   | Array | [] |
| columns | 展示的列数   | number | 2 |
| width | 瀑布流宽度   | number | 0 |
| height | 瀑布流高度   | number | 0  |
| bottom | 滚动到底部触发加载数据的距离  | number | 50 |
| loading | 是否加在载数据  | boolean | 加载数据完数据设为false |
| #slot-scope  |  插槽   | object | slotProps.data|

#### slot

例：
```
  <template #slot-scope="{slotProps}">
    <div class="li">{{ slotProps.data.text }}</div>
  </template>
```
npm package: @fcli/vue-vercode
Description: vue3 验证码组件
Author: fcli
Latest version: 1.0.1

<!--
 * @Author: fcli
 * @Date: 2023-09-04 14:12:29
 * @LastEditors: fcli
 * @LastEditTime: 2023-09-07 09:07:02
 * @FilePath: /vue-vercode/README.md
 * @Description: 
-->
# vue-vercode


## VUE3 虚拟列表，支持动态计算数据高度

```bash
npm install @fcli/vue-vercode --save-dev 来安装

在项目中使用
import VerCode from '@fcli/vue-vercode';
const app=createApp(App)
app.use(VerCode);

```

示例：

```html

<div class="content">
    <ver-code ref=verCode></ver-code>
</div>

```

```
//获取验证码组件的数据
let code = verCode.value.show_num.join('');
```