基于vue的网页标尺辅助线工具(vue-ruler-tool)
时间:2019-11-11
本文章向大家介绍基于vue的网页标尺辅助线工具(vue-ruler-tool),主要包括基于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教程
原文地址:https://www.cnblogs.com/qianduanwriter/p/11837938.html
- PLT:说说Evaluation strategy
- 被解放的姜戈06 假作真时
- idea 创建的maven+spring+mybatis项目整合 报错无法创建bean
- 代数几何:点,线,抛物线,圆,球,弧度和角度
- 被解放的姜戈05 黑面管家
- 用数据来告诉你2018年的未来趋势
- JavaWeb(三)JSP之3个指令、6个动作、9个内置对象和4大作用域
- 被解放的姜戈03 所谓伊人
- JS魔法堂: Native Promise Only源码剖析
- JavaWeb(三)JSP概述
- 人工智能拥有意识,仅是一个时间问题而已
- sqlserver 配置c3p0 连接池
- spring mvc 返回图片的请求
- JavaWeb(二)cookie与session的应用
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- MySQL组复制(MGR)全解析 Part 5 MGR单主模式部署指南
- php学习day4
- 使用Python爬取动态网页-腾讯动漫(Selenium)
- MySQL 5.7 常用命令
- MySQL复制全解析 Part 5 MySQL GTID的格式和存储
- Mycat分库分表全解析 Part 1 数据库切分概述
- RoarCTF2019-EasyJava
- ACTF2020新生赛-BackupFile
- DB2 Linux平台安装 Part 5 数据库常见参数配置
- GXYCTF2019-PingPingPing
- 利用cloudflareWorkers制作Google镜像站
- MySQL information_schema详解 COLLATIONS
- 极客大挑战2019-Knife
- DB2备份还原相关操作
- MySQL复制全解析 Part 8 MySQL Auto-Positioning