vue-ruler-fast

This is a component that creates rulers. Its name is vue-rule-fast.Hopefully this component will help you in your development。

下载

npm i vue-ruler-fast

使用

1. 全局使用

import Ruler from "vue-ruler-fast";
Vue.component(Ruler.name,Ruler);

2. 局部使用

import Ruler from "vue-ruler-fast";
components: {Ruler}
  

Props

| 参数 | 类型| 作用 | |---| ----| ----| | origin | Object| 坐标0位置| | origin.h | Number | 横标尺的0坐标位置| | origin.v | Number| 竖标尺的0坐标位置| | scroll | Object| 滚动条参数 | | scroll.left | Number| scroll.left的位置| | scroll.top | Number | scroll.top的位置| | zoomW | Number| 横标尺的宽度 | | zoomH | Number| 竖标尺的高度 |

例子

 
 <template>
  <div style="position: relative;">
    <Ruler :scroll="scroll" :origin="origin" :zoom-h="2000" :zoom-w="2000"/>
  </div>
 <template/> 
 
<script>
import Ruler from "vue-ruler-fast";
export default {
  name: "Ruler",
  components: {Ruler},
  data() {
    return {
      scroll: {
        left: 0,
        top: 0
      },
      origin: {
        h: 200,
        v: 100
      }
    }
  },
}
</script>