欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

vue实现ps辅助线功能

程序员文章站 2022-03-10 21:05:21
...

先上效果图

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",
相关标签: 杂七杂八