dsw_ruler/README.md
2022-05-22 21:54:14 +08:00

826 B

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

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()
    }
  }
}