vue-ruler-tool 一个基于vue的网页标尺辅助线工具 特点 没有依赖 可拖动的辅助线 快捷键支持 好吧,其实这个组件没什么太多的特点~ 安装与基本用法 $ npm install --save vue-ruler-tool 全局注册 import Vue from 'vue' import VueRulerTool from 'vue-ruler-tool' Vue.component('vue-ruler-tool', VueRule...
<vue-ruler-tool :parent="true" > position 类型:String 默认值:relative 可能值:['absolute', 'fixed', 'relative', 'static', 'inherit'] 规定标尺工具的定位类型 <vue-ruler-tool :position="'fixed'" > isHotKey 类型:Boolean 默认值:true ...
预置参考线l代表水平线,v代表垂直线,site为Number类型 <vue-ruler-tool :preset-line="[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]" > contentLayout 类型:Object 默认值:{ top: 0, left: 0 } 内容部分布局分布,及内容摆放位置 <vue-ruler-tool :content-layout="{left:200,top:...
vue-ruler是一个用于实现刻度尺功能的Vue组件。它提供了一种简单而灵活的方式来展示和操作刻度尺。 使用vue-ruler,你可以轻松创建水平或垂直的刻度尺,并自定义其外观和行为。你可以指定刻度尺的起始值、结束值和步长,并选择是否显示标签和刻度线。 该组件还支持交互功能,例如拖动刻度尺上的滑块以更改值。你可以监听...
vue-ruler-tool 最近在网上找到一个网页制作辅助工具-jQuery标尺参考线插件,觉得在现在的一个项目中能用的上,插件是基于JQuery的,但是现在的项目是用vue写的。So..., 就照葫芦画瓢改装成了Vue组件,总的来说算是一个用处较多的组件,于是乎,就想着把它分享出来。
1.1.0•Public• Publisheda year ago A ruler component for vue 2.x install npm i vue-x-ruler Usage <template> <vue-x-ruler> Any text or component here </vue-x-ruler> </template>importVuefrom'vue';importVueXRulerfrom'vue-x-ruler';import'vue-x-ruler/lib/vue-x-ruler.css';Vu...
https://rulertool.yaolunmao.top/ 代码源于https://github.com/gorkys/vue-ruler-tool,只是改写成了vue3版本,并没有修复bug。。。 Install npm ivue3-ruler-tool Repository github.com/yaolunmao/vue3-ruler-tool Homepage rulertool.yaolunmao.top Weekly...
importCsRuler from 'cs-ruler'Vue.use(CsRuler) 代码 使用 <template> <!--pointerColor 指针颜色; numSize 字体大小; maxNum 最大值 minNum 最小值; NowNum当前值(默认100); ispoint开启小数[默认一位小数];ruleWidth:配置一页展示格数(默认40个)--> <!--@post...
Vue3-Sketch-Rulervue3是一个专为Vue 3打造的页面缩放操作插件,它采用TypeScript编写,以鼠标为中心进行页面缩放。该插件提供了简洁的配置方式,并支持通过插槽机制分离平台与业务代码,让开发者能够更专注于业务逻辑的实现。 在Vue3-Sketch-Rulervue3中,用户可以方便地设置一些参数来控制缩放和拖动操作,以满足不同的场...
vue3-sketch-ruler在vue3+typescript https://www.npmjs.com/package/vue3-sketch-ruler/v/1.1.5?activeTab=versions 安装后,发现 这个没有 复制完代码,准备运行,发现缺少 vue-demi 感觉vue2整的不彻底 ,没办法,yarn add vue-demi <template><SketchRule:thick="thick":scale="scale":width="1920":...