open-index/open-npm huggingface dataset:
npm package: @oldeng/v-bar
Description: ![预览](https://github.com/oldeng/v-bar/blob/master/public/v-bar.gif)
Latest version: 0.0.2

#预览

![预览](https://github.com/oldeng/v-bar/blob/master/public/v-bar.gif)

#使用

```
<template>
  <div class="sector">
    <div>
        <button @click="refresh">刷新</button>
    </div>
    <div class="bar-container">
      <v-bar ref="v-bar"></v-bar>
    </div>
  </div>
</template>
<script>
import { VBar } from "../../dist/v-bar.umd.js";
import '../../dist/v-bar.css';
import { range, shuffle } from 'lodash';

var options = {
  animation: true,
  legend: [
    {
      name: "系列一",
      background: "green",
      color: "white",
      fontSize: "12px",
      align: "",
      width: 10,
      height: 10,
      x: 80,
      y: 20
    },
    {
      name: "系列二",
      background: "white",
      color: "white",
      fontSize: "12px",
      align: "",
      width: 10,
      height: 10,
      x: 200,
      y: 20
    }
  ],
  grid: {
    top: 50,
    right: 50,
    bottom: 50,
    left: 50
  },
  xAxis: {
    name: "x轴线",
    color: "red",
    splitWidth: 6,
    fontSize: 12,
    fontFamily: "微软雅黑",
    data: ["aa", "B", "C", "D"]
  },
  yAxis: {
    name: "",
    color: "red",
    splitWidth: 6,
    fontSize: 14,
    fontFamily: "微软雅黑",
    data: [1, 2, 3, 4, 5],
    interval: 10,
    min: 0,
    max: 100
  },
  series: [
    {
      name: "已经办理业务",
      background: "white",
      width: 30,
      spliteColor: "white",
      data: [30, 20, 30, 40]
    },
    {
      name: "未经办理业务",
      background: "green",
      width: 30,
      spliteColor: "white",
      data: [40, 30, 20, 10]
    }
  ]
};
export default {
  methods: {
    refresh() {
      this.$refs["v-bar"].setOptions(
        Object.assign(options, {
          series: [
            {
              name: "已经办理业务",
              background: "white",
              width: 30,
              spliteColor: "white",
              data: shuffle([13, 22, 45, 66])
            },
            {
              name: "未经办理业务",
              background: "green",
              width: 30,
              spliteColor: "white",
              data: shuffle([23, 32, 20, 10])
            }
          ]
        })
      );
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs["v-bar"].setOptions(options);
    });
  },
  components: {
    VBar
  }
};
</script>
<style lang="less" scoped>
.sector {
  .bar-container {
    margin: 0 auto;
    width: 400px;
    height: 400px;
    border: 1px solid red;
  }
}
</style>

```
npm package: @oldeng/v-infinite-scroll
Description: ![scroll-preview.gif](https://github.com/oldeng/v-infinite-scroll/blob/master/src/assets/v-infinite-scroll.gif)
Latest version: 0.0.5

#预览

![scroll-preview.gif](https://github.com/oldeng/v-infinite-scroll/blob/master/src/assets/v-infinite-scroll.gif)

![scroll-preview.gif](https://upload-images.jianshu.io/upload_images/15373994-58182328d0a05d78.gif?imageMogr2/auto-orient/strip)

#安装

```
npm install @oldeng/v-infinite-scroll
```

#使用

```js
import { VInfoniteScroll } from '@oldeng/v-infinite-scroll'
//局部注册
```
或者
```js
import { VInfoniteScroll } from '@oldeng/v-infinite-scroll'
Vue.use(VInfoniteScroll)
```
#参数
|  参数名 | 取值范围   | 说明|
|---|---|---|
| isStart|Boolean |是否开始滚动|
|  row | Number |垂直滚动列表中显示行数|
|  col | Number |垂直滚动列表中显示行数|
|  maxCache | Number |最大缓存数据|
|  direction | "horizontal"或“vertical” |垂直滚动列表中显示行数|
|  interval | Number |滚动间隔毫秒值（ms）|
#范例
1. 水平滚动
2. 垂直滚动
>详细代码参考源码中Demo代码
##水平滚动
```js
    <div class="horizental-wraper">
      <v-infinite-scroll
        direction="horizontal"
        ref="infinite-scroll"
        :maxCache="15"
        :isStart="isStart"
        :col="5"
      >
        <template #up="{ up }">
          <div class="col up" v-for="(col, index) in up">{{col}}</div>
        </template>
        <template #down="{ down }">
          <div class="col down" v-for="(col, index) in down">{{col}}</div>
        </template>
      </v-infinite-scroll>
    </div>
```
##垂直滚动
```js
    <div class="text-list">
      <v-infinite-scroll ref="infinite-scroll" :interval="5000" :isStart="isStart" :row="5">
        <template #up="{ up }">
          <div
            :class="['col','up', clazz[index]]"
            v-for="(col, index) in up"
            :style="stateColor(index, col)"
            :key="index"
          >{{col}}</div>
        </template>
        <template #down="{ down }">
          <div
            :class="['col','up', clazz[index]]"
            v-for="(col, index) in down"
            :style="stateColor(index, col)"
            :key="index"
          >{{col}}</div>
        </template>
      </v-infinite-scroll>
    </div>
```

#调试
>源码调试需要开启vmock插件模拟接口数据

##运行vmock
模拟数据服务默认端口为8000
```
npm run vmock
```

#npm地址

[npm传送门](https://github.com/oldeng/v-infinite-scroll)

#Github地址

[源码传送门](https://github.com/oldeng/v-infinite-scroll)
npm package: @oldeng/v-pie
Description: #效果
Latest version: 0.1.6

# 饼状图插件v-pie

#效果

#特性
1. 多种样式
2. 独立的渲染库
3. 独立的动画库
4. 轻量级源码，简洁易懂，可根据需求自定义改造


#参考资料

> 1. 基于charjs库代码裁剪，只保留了pie相关代码
  2. 渲染库为Crender
  3. 动画库为transition

> 详细资料请参考
http://charts.jiaminghi.com/
http://crender.jiaminghi.com/
http://transition.jiaminghi.com/

## 安装
```
npm install @oldeng/v-pie

```
# 使用

详情参考demo源码
```
//导入饼状图组件
import { VPie } from "../../dist/v-pie.umd.js";
//导入样式
import   "../../dist/v-pie.css";
//导入配置文件
import Options from "./options.1";
export default {
  name: "Experiment",
  methods: {
    //刷新
    refresh() {
      Options[0].series[0].data = Options[1].series[0].data = Options[2].series[0].data = [
        {
          name: "汉字A",
          value: Math.floor(Math.random() * 100),
        },
        {
          name: "汉字B",
          value: Math.floor(Math.random() * 100),
        },
        {
          name: "汉字C",
          value: Math.floor(Math.random() * 100),
        },
        {
          name: "汉字D",
          value: Math.floor(Math.random() * 100),
        },
      ];
      this.pie1.setOption(Options[0]);
      this.pie2.setOption(Options[1]);
      this.pie3.setOption(Options[2]);
    },
  },
  mounted() {
    this.$nextTick(() => {
      //样式一
      this.pie1 = this.$refs["pie1"];
      this.pie1.setOption(Options[0]);
      //样式二
      this.pie2 = this.$refs["pie2"];
      this.pie2.setOption(Options[1]);
      //样式三
      this.pie3 = this.$refs["pie3"];
      this.pie3.setOption(Options[2]);
    });
  },
  components: {
    VPie,
  },
};
```

#Github
https://github.com/oldeng/v-pie/tree/Crender

#Npm
npm package: @oldeng/v-simulator
Description: ``` npm install @oldeng/v-simulator ```
Latest version: 0.0.2

#安装
```
npm install @oldeng/v-simulator
```

#使用
```
import { Spinners } from "v-simulator";
import "v-spinners/plugin/v-simulator.css";
```
|  参数   | 值  | 作用 |
|  ----  | ----  |----|
| url  | String | webapp加载地址 |


#
#使用示例
```
<template>
  <div class="home">
    <div class="container">
      <div class="wraper">
        <v-simulator :url="url"></v-simulator>
      </div>
    </div>
  </div>
</template>

<script>
import VSimulator from '../../packages/src/index';
export default {
  name: "Home",
  data() {
    return {
      url: 'http://www.baidu.com'
    }
  },
  components: {
    VSimulator
  }
};
</script>
<style lang="less" scoped>
h1 {
  margin: 0;
}
.container {

  .wraper {
    margin: 0 auto;
    width: 320px;

  }
}
</style>
```
npm package: @oldeng/v-slider
Description: |  参数 | 取值  | 说明 | |---|---|--| | v-model  |  Number |  绑定值| | isVal| Boolwan | 是否显示值选取点 | | border | 无 | 是否显示边框| | min| Number | 最小值 | | max| Number | 最大值 | | range | Array | 滑块支持的最大值和最小值 |
Latest version: 0.0.2

# 效果


# 参数
|  参数 | 取值  | 说明 |
|---|---|--|
| v-model  |  Number |  绑定值|
| isVal| Boolwan | 是否显示值选取点 |
| border | 无 | 是否显示边框|
| min| Number | 最小值 |
| max| Number | 最大值 |
| range | Array | 滑块支持的最大值和最小值 |

# 事件
|  名称 | 参数  | 说明 |
|---|---|--|
| @on-range  |  取值范围 | 当拉动最大值最小值滑块时，传出变化的最大值和最小值 |


## 安装
```
npm install @oldeng/v-slider

```
# 使用

```js
//导入
import { VSlider } from "@oldeng/v-slider";
import  "@oldeng/v-number-counter/dist/v-slider.css";
```

```
      <v-slider  v-model="val"
          :isVal="true"
          :range="range"
          border
          @on-range="rangeHandler"
          :min="min"
          :max="max"></v-slider>
```

# Npm
[npmjs.com/package/v-number-counter](npmjs.com/package/v-number-counter)

# 源码分析
npm package: @oldeng/v-spiners
Description: ``` npm install @oldeng/v-spiners ```
Latest version: 0.0.7

#安装
```
npm install @oldeng/v-spiners
```

#使用
```
import { Spinners } from "v-spinners";
import "v-spinners/plugin/v-spinners.css";
```
|  参数   | 值  | 作用 |
|  ----  | ----  |----|
| type  | 字符窜： small、middle、default | 设置spinners尺寸 |


#
#使用示例
```
<template>
  <div class="experiment">
    <div class="demo1">
      <v-spinners :type="type"></v-spinners>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import { Spinners } from '../../plugin/v-spinners.umd';
import '../../plugin/v-spinners.css';

export default {
  name: 'experiment',
  data() {
    return {
      type: 'default'
    }
  },
  components: {
    VSpinners: Spinners
  }
}
</script>
<style lang="less" scoped>
  .experiment {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
</style>
```
npm package: @oldeng/v-spinners
Description: ``` npm install @oldeng/v-spiners ```
Latest version: 0.0.8

#安装
```
npm install @oldeng/v-spiners
```

#使用
```
import { Spinners } from "v-spinners";
import "v-spinners/plugin/v-spinners.css";
```
|  参数   | 值  | 作用 |
|  ----  | ----  |----|
| type  | 字符窜： small、middle、default | 设置spinners尺寸 |


#
#使用示例
```
<template>
  <div class="experiment">
    <div class="demo1">
      <v-spinners :type="type"></v-spinners>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import { Spinners } from '../../plugin/v-spinners.umd';
import '../../plugin/v-spinners.css';

export default {
  name: 'experiment',
  data() {
    return {
      type: 'default'
    }
  },
  components: {
    VSpinners: Spinners
  }
}
</script>
<style lang="less" scoped>
  .experiment {
    width: 500px;
    height: 500px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
  }
</style>
```