vue实现ps辅助线功能
程序员文章站
2022-03-10 21:05:21
...
先上效果图
项目地址 (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",