vue实现ps辅助线功能

先上效果图

项目地址 (vue-ruler-tool)

点此进入

特点

没有依赖可拖动的辅助线快捷键支持

安装与基本用法

$ 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>

npmjs地址 (内含参数配置)

点此进入

注意

目前我下载的最新版npm包无法使用，建议大家下载1.0.8版本

"vue-ruler-tool": "^1.0.8",

vue实现ps辅助线功能相关推荐

认识ps基本功能和代码规范详解
11.19认识ps基本功能和代码规范详解在学习ps中需基本熟悉ps快捷键,快捷键能大大提高我们工作的效率,节省时间.在我们常用的ps快捷键有新建图形文件:Ctrl + N 新建图层:Ctrl + ...
vue暂存功能_示例vue 的keep-alive缓存功能的实现
本篇文章主要介绍了vue 的keep-alive缓存功能的实现,写的十分的全面细致,具有一定的参考价值,对此有需要的朋友可以参考学习下.如有不足之处,欢迎批评指正. #Vue 实现组件信息的缓存当我 ...
添加数据功能java,SpringBoot+Vue实现数据添加功能
一.添加代码生成器用来自动为数据库映射类建立:mapper.service.controller package com.hanmh.utils; import com.baomidou.mybat ...
vue项目搜索历史功能的实现
vue项目搜索历史功能的实现播放器项目中歌曲搜素页面的首先需要在state定义搜索历史,在其中保存搜索历史 state.js:<br>// 搜索历史: searchHistory: [ ...
拖拽功能 php,基于Vue实现拖拽功能
这篇文章主要为大家详细介绍了Vue实现拖拽功能,拖动方块进行移动,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: ...
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果...
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
vue 实现文本的拖拽_基于Vue实现拖拽功能
本文实例为大家分享了Vue实现拖拽功能的具体代码,供大家参考,具体内容如下效果图: HTML代码: 位置 x:{{val.x}} y:{{val.y}} //注意这里要通过指令绑定函数将当前元素的位 ...
molicode生成vue增删改查功能
2019独角兽企业重金招聘Python工程师标准>>> molicode生成vue增删改查功能背景描述当前生成的页面主要应用于VUE前端UI框架 iview: https://i ...
Vue活动倒计时的功能
Vue的活动倒计时功能话不多说,直接上代码吧,我是前端小白一枚,我搬过的砖给大家共享啦~ 欢迎大佬批评指教~ 第一步: 创建组件: <template><div class ...

vue实现ps辅助线功能

先上效果图

项目地址 (vue-ruler-tool)

特点

安装与基本用法

npmjs地址 (内含参数配置)

注意

vue实现ps辅助线功能相关推荐

最新文章

热门文章