vue 按钮根据状态切换_一个vue实现的标尺插件

简介

具备以下功能，start过50+才考虑添加额外的功能 ... （开源不容易啊）

该插件支持通过点击标尺，添加参考线

该插件支持通过鼠标悬浮参考线顶部或左部，显示移除按钮，或直接拖出边界外部

该插件支持显示或隐藏参考线

该插件支持标尺响应视图的缩放

该插件支持显示或隐藏线标尺

吐槽

也是奇怪，这个这么好看且实用的插件，竟然只有20+star，不能忍 ...

因为该插件也用在了可视化大屏编辑器上，所以也纳入了可视化编辑器的专栏。

项目地址

https://github.com/chuxiaoguo/vue-sketch-rulergithub.com

项目预览

vue-sketch-ruler-testchuxiaoguo.github.io

实战项目截图

安装

支持全局导入和模块导入

npm install --save vue-sketch-ruler

支持的功能

[✔] 标尺渲染
[✔] 缩放内容，重绘标尺
[✔] 滚动内容，重绘标尺
[✔] 切换标尺状态，显示或隐藏
[✔] 参考线管理（增加删除）
[✔] 切换参考线状态，显示或隐藏

未来支持的功能

[] 支持标尺的右键菜单
[] 标角支持事件
[] 分离css样式，支持导入样式
[] 国际化

使用

<template><SketchRule:lang="lang":thick="thick":scale="scale":width="582":height="482":startX="startX":startY="startY":shadow="shadow":horLineArr="lines.h":verLineArr="lines.v":cornerActive="true"@handleLine="handleLine"@onCornerClick="handleCornerClick">
</template>
<script>
import Vue from 'vue';
import SketchRule from "vue-sketch-ruler";
const rectWidth = 160;
const rectHeight = 200;
export default Vue.extend({data() {return {scale: 2, //658813476562495, //1,startX: 0,startY: 0,lines: {h: [100, 200],v: [100, 200]},thick: 20,lang: "zh-CN",isShowRuler: true,isShowReferLine: true}},components: {SketchRule}
});
</script>

参考一个完整的例子，点击这里

更加具体的api就请参考github上的文档了

vue 按钮根据状态切换_一个vue实现的标尺插件 - vue-sketch-ruler相关推荐

vue props 多类型_一个TypeScript简例，以及Vue支持TS的一些些事儿
前言我们知道在Vue里用options来声明一个组件,举一个简单的例子 const options = {props: {name: {type: String,},},data() {return ...
Vue全家桶学习笔记_零基础入门到入坑:Vue篇
文章目录前言什么是Vue,什么又是框架完善的准备 Vue 引入 npm 安装 cnpm镜像加速器安装 Vue-Cli脚手架安装 webpack 安装 webpack-cli 安装 axios ...
vue component created没有触发_面试！面试！面试！vue常见面试题。
"金三银四"的时候到了,一大批准备跳槽的程序员蠢蠢欲动,小编最近也在投简历,找工作.现在很多公司都要求vue.react.ng三大主流框架中的一两个.小编在此总结一下vue常见的面 ...
js实现点击按钮图片自动切换_☆往事随風☆的博客
文章目录前言一.基本思路二.代码分析 1.创建数组保存图片的存储路径 2.获取按钮对象 3.调用定时器 4.关闭定时器三.整体代码四.效果展示前言利用js实现一个图片自动切换的功能. 一 ...
组织结构图插件_一个简单直接的组织结构图插件
组织结构图插件 Vue-orgchart (vue-orgchart) It's a simple and direct organization chart plugin. Anytime you ...
vue按钮字体大小设置_用Vue模仿antd的样式造UI组件之button
一.环境的配遇新是直朋能到置 1.新建一个遇新是直朋能到分览文件夹 mkdir eassyui 2.使用npm作为包管理新直能分支调二浏页器朋代说,工具 npm init -y 3件览客需和下于有快都 ...
vue拖动添加模块展示_一个全新的Vue拖拽特性实现：“移动”部分
关于拖拽 CabloyJS提供了完备的拖拽特性,可以实现移动和调整尺寸两大类功能,这里对移动的开发进行阐述关于调整尺寸的开发,请参见:拖拽:调整尺寸演示开发步骤下面以模块test-party为例 ...
vue 3.0 正式版_一个亲历了vue1.x到3.0的魔幻男人
今天凌晨,00:45,尤小右更新了一条微博: 截止到目前,这条微博下面的留言已经多达136条,满屏焦虑,直呼学不动了... 前端届的菜鸟们纷纷献上膝盖,别更新了,学不动了.jpg搞前端开发N年的老鸟们 ...
vue img src 动态赋值_一个基于Vue的开源延迟加载插件——vuelazyload
介绍 vue-lazyload是一个基于Vue的延迟加载插件,用于延迟加载Vue组件或者图像. Github https://github.com/hilongjw/vue-lazyload 特点轻 ...

vue 按钮根据状态切换_一个vue实现的标尺插件 - vue-sketch-ruler

简介

吐槽