摘要:最近在网上找到一个网页制作辅助工具标尺参考线插件,觉得在现在的一个项目中能用的上,插件是基于的,但是现在的项目是用写的。
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 }]
快速设置参考线,一般用来通过弹窗让用户输入
发布到NPM教程let params=[ { type: "l", site: 100 }, { type: "v", site: 200 } ] this.$refs.rulerTool.quickGeneration(params)
制作并发布第一个vue组件的npm包
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/97872.html
摘要:最近在网上找到一个网页制作辅助工具标尺参考线插件,觉得在现在的一个项目中能用的上,插件是基于的,但是现在的项目是用写的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在网上找到一个 网页制作辅助工具-jQuery标尺参考线插件 ,觉得在现在的一...
摘要:发布到注册进入官网,注册帐号登录并发布提示报错是因为注册完后没有进行邮箱验证,验证完成即可发布成功参考文献如何制作并发布一个的组件的包发布自己第一个组件包基于的文字跑马灯组件 最近在网上找到一个 网页制作辅助工具-jQuery标尺参考线插件 ,觉得在现在的一个项目中能用的上,插件是基于JQuery的,但是现在的项目是用vue写的。So...,就照葫芦画瓢改装成了Vue组件,总的来说算是...
摘要:昨天,给了个图,让写成网页。很久之前,操作的还凑乎。把自己需要的图片切下来第一种方法选择切片工具,把自己想要的图片框选出来。另外,,这时候,关于文字的面板信息就会出来了。可以返回步以内取消选区待续。。 昨天,ui给了个psd图,让写成网页。额,要自己切图。很久之前,操作的还凑乎。但是,好久了,都忘了。所以,打算自己记个笔记,方便以后查看。 首先,打开ps就先来设置一下ps的单位啦点击...
摘要:前端每周清单第期支付宝前端构建工具发展用加快网页响应速度饿了么升级实践前端前端每周清单前端每周清单专注前端领域内容,分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。 前端每周清单第 12 期:支付宝前端构建工具发展、LinkedIn用Brotli加快网页响应速度、饿了么PWA 升级实践 为InfoQ中文站特供稿件,首发地址为这里;如需转载,请与InfoQ中文站联系。从属于笔...
阅读 1053·2021-11-16 11:42
阅读 2866·2021-10-12 10:18
阅读 2821·2021-09-24 09:48
阅读 3423·2019-08-30 15:56
阅读 1487·2019-08-30 14:17
阅读 3014·2019-08-29 12:14
阅读 871·2019-08-27 10:51
阅读 1988·2019-08-26 13:28