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

刘玉平发布于2019-08-02 16:06 / 3505人阅读

摘要：最近在网上找到一个网页制作辅助工具标尺参考线插件，觉得在现在的一个项目中能用的上，插件是基于的，但是现在的项目是用写的。

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包

云服务器 GPU云服务器辅助线基于webrtc的网页基于webrtc的网页视频辅助工具

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54671.html

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

摘要：最近在网上找到一个网页制作辅助工具标尺参考线插件，觉得在现在的一个项目中能用的上，插件是基于的，但是现在的项目是用写的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件，觉得在现在的一...

codecraft 2019-08-23 12:02 评论0 收藏0
制作并发布第一个vue组件的npm包

摘要：发布到注册进入官网，注册帐号登录并发布提示报错是因为注册完后没有进行邮箱验证，验证完成即可发布成功参考文献如何制作并发布一个的组件的包发布自己第一个组件包基于的文字跑马灯组件最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件，觉得在现在的一个项目中能用的上，插件是基于JQuery的，但是现在的项目是用vue写的。So...,就照葫芦画瓢改装成了Vue组件，总的来说算是...

bawn 2019-08-23 12:02 评论0 收藏0
前端ps中常用的操作

摘要：昨天，给了个图，让写成网页。很久之前，操作的还凑乎。把自己需要的图片切下来第一种方法选择切片工具，把自己想要的图片框选出来。另外，，这时候，关于文字的面板信息就会出来了。可以返回步以内取消选区待续。。昨天，ui给了个psd图，让写成网页。额，要自己切图。很久之前，操作的还凑乎。但是，好久了，都忘了。所以，打算自己记个笔记，方便以后查看。首先，打开ps就先来设置一下ps的单位啦点击...

libxd 2019-08-02 10:41 评论0 收藏0
前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿

摘要：前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容，分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。前端每周清单第 12 期：支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践为InfoQ中文站特供稿件，首发地址为这里；如需转载，请与InfoQ中文站联系。从属于笔...

liuchengxu 2019-08-20 16:23 评论0 收藏0