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>