# dsw-ruler

## Description
vue2 ruler tool

## Feature
- dynamic size
- mouse events(click, move)
- orientation switch(horizontal, vertical)

## Installation
```
npm install dsw-ruler
```

## Usage
### Example
![ruler.gif](http://tva1.sinaimg.cn/large/63d2d71egy1h2hii6kb01g20fb08442k.gif)
### Template
```
<template>
<div>
  <DswRuler
    ref="ruler"
    :minNum="0"
    :maxNum="100"
    :orientation="1"
    @move="moveHandle"
    @click="clickHandle"
  />
</div>
</template>
```
### Script
```
import DswRuler from 'dsw-ruler';

export default {
  name: 'example',
  components: {
    DswRuler
  },
  method: {
    moveHandle(val) {
      console.log("mouse move to: ", val);
    },
    clickHandle(val) {
      console.log("mouse click on: ", val);
    },
    resize() {
      this.$refs.ruler.resize()
    }
  }
}
```