vue实现ps辅助线功能

先上效果图

项目地址 (vue-ruler-tool)

点此进入

特点

没有依赖 可拖动的辅助线 快捷键支持

安装与基本用法

$ npm install --save vue-ruler-tool

全局注册

import Vue from 'vue'
import VueRulerTool from 'vue-ruler-tool'
Vue.component('vue-ruler-tool', VueRulerTool)

你现在就可以使用该组件了

<template>
  <div id="app">
    <vue-ruler-tool
      :content-layout="{left:200,top:100}"
      :is-scale-revise="true"
      :preset-line="presetLine"
    >
      <div class="test"></div>
    </vue-ruler-tool>
  </div>
</template>

<script>
import VueRulerTool from 'vue-ruler-tool'
export default {
  name: 'app',
  components:{
    VueRulerTool
  },
  data () {
    return {
      presetLine: [{ type: 'l', site: 100 }, { type: 'v', site: 200 }]
    }
  }
}
</script>

npmjs地址 (内含参数配置)

点此进入

注意

目前我下载的最新版npm包无法使用，建议大家下载1.0.8版本

"vue-ruler-tool": "^1.0.8",