# vue-tool-ruler

**Repository Path**: Angst/vue-tool-ruler

## Basic Information

- **Project Name**: vue-tool-ruler
- **Description**: vue刻度尺插件
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-04-04
- **Last Updated**: 2023-04-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue-tool-ruler

## 安装
```
npm install vue-tool-ruler --save
```

## 在main.js中引入组件和样式
```
import vueToolRuler from 'vue-tool-ruler'
import 'vue-tool-ruler/lib/vue-tool-ruler.css'
Vue.use(vueToolRuler)
```

## 使用
```
<vue-tool-ruler ref="vueToolRuler" :max="100" :min="0" :spacing="10" @getRulerScore="getRulerScore"></vue-tool-ruler>
```

## 属性

|属性|类型|说明|默认值|
|-|-|-|-|
|max|Number|刻度最大值|10|
|min|Number|刻度最小值|0|
|spacing|Number|刻度跨度|1|
|width|String|尺子宽度|500px|
|height|String|尺子高度|70px|
|background|String|尺子颜色|#339966|

## 事件

```
// @getRulerScore

methods: {
    getRulerScore(num) {
      //得到点击尺子对应的刻度值  
      console.log(num);
    }
  }
```

## 方法

```
// setCurrentScore
// 设置尺子当前的刻度，若传入的值小于最小刻度或大于最大刻度，则设置无效
this.$refs.vueToolRuler.setCurrentScore(100)
```

## 交流

[欢迎交流和贡献代码](https://gitee.com/qileshan/vue-tool-ruler)