基于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)
你现在就可以使用该组件了
<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>
Props
position
类型:String
默认值: relative
可能值:['absolute', 'fixed', 'relative', 'static', 'inherit']
规定标尺工具的定位类型
<vue-ruler-tool :position="'fixed'" >
isHotKey
类型: Boolean
默认值: true
快捷键键开关,目前仅支持快捷键R
标尺显示开关
<vue-ruler-tool :is-hot-key="ture" >
isScaleRevise
类型: Boolean
默认值: false
刻度修正(根据content进行刻度重置),意思就是从内容的位置开始从0计数
<vue-ruler-tool :is-scale-revise="ture" >
topSpacing
类型: Number
默认值: 0,
标尺与窗口的上间距,如果你的position
不为fixed
,此项必填
leftSpacing
类型: Number
默认值: 0
标尺与窗口的左间距,如果你的position
不为fixed
,此项必填
presetLine
类型: Array
默认值: []
接受格式: [{ type: 'l', site: 50 }, { type: 'v', site: 180 }]
预置参考线l
代表水平线,v
代表垂直线,site
为Number类型
<vue-ruler-tool :preset-line="[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]" >
contentLayout
类型: Object
默认值: { top: 50, left: 50 }
内容部分布局分布,及内容摆放位置
<vue-ruler-tool :content-layout="{left:200,top:100}" >
Methods
quickGeneration
参数:[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]
快速设置参考线,一般用来通过弹窗让用户输入
<vue-ruler-tool ref='rulerTool' >
let params=[{ type: 'l', site: 100 },{ type: 'v', site: 200 }
]
this.$refs.rulerTool.quickGeneration(params)
发布到NPM教程
制作并发布第一个vue组件的npm包
基于vue的网页标尺辅助线工具(vue-ruler-tool)相关推荐
- vue连线 插件_基于vue的网页标尺辅助线工具(vue-ruler-tool)
原文首发于我的博客,欢迎点击查看获得更好的阅读体验~ 标尺辅助线.gif vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件,觉得在现在的一个项目中能用的上, ...
- 一款基于VUE的在线绘制流程图工具安装使用node.js
1.安装node.js 下载地址:https://nodejs.org/en/download/ 安装一下三项,并检查是否成功: node -v npm -v vue -V(大写的V) 一款基于VUE ...
- Vue CLI 3.0 正式发布,Vue.js 开发标准化工具
Vue CLI 3.0 已发布,该版本经历了重构,旨在: 减少现代前端工具的配置烦扰,尤其是在将多个工具混合在一起使用时: 尽可能在工具链中加入最佳实践,让它成为任意 Vue 应用程序的默认实践. V ...
- Springboot毕设项目基于WEB的延边旅游网 5jjp2java+VUE+Mybatis+Maven+Mysql+sprnig)
Springboot毕设项目基于WEB的延边旅游网 5jjp2java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + ...
- Vue修改网页浏览器标签的标题和图标
Vue修改网页浏览器标签的标题和图标 方法一 直接在./index.html中修改即可,如下: <title>lovEaNdpeAce</title> <link rel ...
- Springboot毕设项目基于springboot的模拟面试平台 7tch0java+VUE+Mybatis+Maven+Mysql+sprnig)
Springboot毕设项目基于springboot的模拟面试平台 7tch0java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomc ...
- springboot毕设项目基于Java酒店管理系统53blc(java+VUE+Mybatis+Maven+Mysql)
springboot毕设项目基于Java酒店管理系统53blc(java+VUE+Mybatis+Maven+Mysql) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql ...
- ssm毕设项目王者荣耀网页hzagi(java+VUE+Mybatis+Maven+Mysql+sprnig)
ssm毕设项目王者荣耀网页hzagi(java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBui ...
- Springboot毕设项目基于springboot的城市智能出行rota7java+VUE+Mybatis+Maven+Mysql+sprnig)
Springboot毕设项目基于springboot的城市智能出行rota7java+VUE+Mybatis+Maven+Mysql+sprnig) 项目运行 环境配置: Jdk1.8 + Tomca ...
- python websocket django vue_Django资料 Vue实现网页前端实时反馈输出信息
Django资料 Vue实现网页前端实时反馈输出信息 前言 功能实现:网也点击任务,页面实时返回执行的信息 本次的任务是执行本地的一个sh脚本 这个sh脚本就是每隔1S,输出一段文字 如果需要远程可以 ...
最新文章
- undefined reference to 'WinMain@16' 的四种情况
- asp.net夜话之五:Page类和回调技术
- 文献记录(part33)-Hierarchical deep neural network for mental stress state detection using IoT ...
- linux之通过htop操作进程使用总结
- 荔枝派 Nano 全志 F1C100s 编译运行 Linux ubuntu并升级gcc
- php 日期 间隔,PHP实现计算日期间隔天数的方法
- 采用JAVA编写程序实现从文件读取操作
- 多项logistic回归系数解释_因变量无序多分类资料的logistic回归
- 错误: 程序包org.eclipse.swt.graphics不存在/swt.jar下载方法
- esp8266 wifi 中继整理
- 电驴v1.2.2.45574最新版官方下载
- POC_Jenkins
- SNF开发平台WinForm-EasyQuery统计分析-效果-非常牛逼的报表查询工具
- C#学习纪要(8):7月17日
- 51GIF GIF动图中文搜索平台,表情包发源地,GIF动图素材库
- 文件下载(功能实现)(详细分析)
- Mobile(3)-攻防世界-APK逆向
- 数据结构C语言实现-6—图
- Graylog服务器rpm安装
- 免费课程:升级? 使用布尔玛CSS