57 lines
826 B
Markdown
57 lines
826 B
Markdown
# dsw-ruler
|
|
|
|
## Description
|
|
vue2 ruler tool
|
|
|
|
## Feature
|
|
- dynamic size
|
|
- mouse events(click, move)
|
|
- orientation switch(horizontal, vertical)
|
|
|
|
## Installation
|
|
```
|
|
npm install dsw-ruler
|
|
```
|
|
|
|
## Usage
|
|
### Example
|
|
|
|
### 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()
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|