基于vue的网页标尺辅助线工具(vue-ruler-tool)

vue-ruler-tool

---

最近在网上找到一个 网页制作辅助工具-jQuery标尺参考线插件 ，觉得在现在的一个项目中能用的上，插件是基于JQuery的，但是现在的项目是用vue写的。So...,
就照葫芦画瓢改装成了Vue组件，总的来说算是一个用处较多的组件，于是乎，就想着把它分享出来。

项目地址

https://github.com/gorkys/vue...

特点

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

好吧，其实这个组件没什么太多的特点~

安装与基本用法

$ npm install --save vue-ruler-tool

全局注册

import Vue from 'vue'
import VueRulerTool from 'vue-ruler-tool'

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

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

Props

position

类型:String

默认值: relative

可能值:['absolute', 'fixed', 'relative', 'static', 'inherit']

规定标尺工具的定位类型

isHotKey

类型: Boolean

默认值: true

快捷键键开关，目前仅支持快捷键R标尺显示开关

isScaleRevise

类型: Boolean

默认值: false

刻度修正(根据content进行刻度重置),意思就是从内容的位置开始从0计数

topSpacing

类型: Number

默认值: 0,

标尺与窗口的上间距，如果你的position不为fixed，此项必填

leftSpacing

类型: Number

默认值: 0

标尺与窗口的左间距，如果你的position不为fixed，此项必填

presetLine

类型: Array

默认值: []

接受格式: [{ type: 'l', site: 50 }, { type: 'v', site: 180 }]

预置参考线l代表水平线，v代表垂直线，site为Number类型

contentLayout

类型: Object

默认值: { top: 50, left: 50 }

内容部分布局分布，及内容摆放位置

Methods

quickGeneration

参数:[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]

快速设置参考线，一般用来通过弹窗让用户输入

let params=[
        { type: 'l', site: 100 },
        { type: 'v', site: 200 }
]
this.$refs.rulerTool.quickGeneration(params)

发布到NPM教程

制作并发布第一个vue组件的npm包