脚本宝典收集整理的这篇文章主要介绍了

基于vue的网页标尺辅助线工具(vue-ruler-tool)

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <p><span class="img-wrap"><img data-src="/img/remote/1460000016445262?w=1028&amp;h=764" src="/img/remote/1460000016445262?w=1028&amp;h=764" alt="标尺辅助线.gif" title="标尺辅助线.gif" style="cursor: pointer; display: inline;"></span></p> <h1 id="articleHeader0">vue-ruler-tool</h1> <hr> <blockquote><p>最近在网上找到一个<a href="http://www.zhangxinxu.com/wordpress/?p=1002" rel="nofollow noreferrer" target="_blank"> 网页制作辅助工具-jQuery标尺参考线插件 </a>,觉得在现在的一个项目中能用的上,插件是基于JQuery的,但是现在的项目是用vue写的。So...,<br />就照葫芦画瓢改装成了<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>组件,总的来说算是一个用处较多的组件,于是乎,就想着把它分享出来。</p></blockquote> <h3 id="articleHeader1">项目地址</h3> <p><a href="https://github.com/gorkys/vue-ruler-tool" rel="nofollow noreferrer" target="_blank">https://github.com/gorkys/vue...</a></p> <h3 id="articleHeader2">特点</h3> <ul> <li>没有依赖</li> <li>可拖动的辅助线</li> <li>快捷键支持</li> </ul> <blockquote><p>好吧,其实这个组件没什么太多的特点~</p></blockquote> <h3 id="articleHeader3">安装与基本用法</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="$ npm install --save vue-ruler-tool" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">$ npm <span class="hljs-keyword">install</span> <span class="hljs-comment">--save vue-ruler-tool</span></code></pre> <p>全局注册</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import VueRulerTool from 'vue-ruler-tool' Vue.component('vue-ruler-tool', VueRulerTool)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs typescript"><code><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueRulerTool <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-ruler-tool'</span> Vue.component(<span class="hljs-string">'vue-ruler-tool'</span>, VueRulerTool)</code></pre> <p>你现在就可以使用该组件了</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div id=&quot;app&quot;> <vue-ruler-tool :content-layout=&quot;{left:200,top:100}&quot; :is-scale-revise=&quot;true&quot; :preset-line=&quot;presetLine&quot; ></p> <div class=&quot;test&quot;></div> <p> </vue-ruler-tool> </div> <p></template></p> <p><script> import <a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>RulerTool from 'vue-ruler-tool' <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> default { name: 'app', components:{ VueRulerTool }, data () { return { presetLine: [{ type: 'l', site: 100 }, { type: 'v', site: 200 }] } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span> <span class="hljs-attr">id</span>=<span class="hljs-string">"app"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">vue-ruler-tool</span> <span class="hljs-attr">:content-layout</span>=<span class="hljs-string">"{left:200,top:100}"</span> <span class="hljs-attr">:is-scale-revise</span>=<span class="hljs-string">"true"</span> <span class="hljs-attr">:preset-line</span>=<span class="hljs-string">"presetLine"</span> &gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"test"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">vue-ruler-tool</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword">import</span> VueRulerTool <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-ruler-tool'</span> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, <span class="hljs-attr">components</span>:{ VueRulerTool }, data () { <span class="hljs-keyword">return</span> { <span class="hljs-attr">presetLine</span>: [{ <span class="hljs-attr">type</span>: <span class="hljs-string">'l'</span>, <span class="hljs-attr">site</span>: <span class="hljs-number">100</span> }, { <span class="hljs-attr">type</span>: <span class="hljs-string">'v'</span>, <span class="hljs-attr">site</span>: <span class="hljs-number">200</span> }] } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader4"><a href="http://www.js-code.com/tag/prop" title="Prop" target="_blank">Prop</a>s</h3> <p><strong>position</strong></p> <p>类型:<code>String</code></p> <p>默认值: <code>relative</code></p> <p>可能值:<code>['absolute', 'fixed', 'relative', 'static', 'inherit']</code></p> <p>规定标尺工具的定位类型</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-ruler-tool :position=&quot;'fixed'&quot; >" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code style="word-break: break-word; white-space: initial;">&lt;vue-ruler-<span class="hljs-string">tool :</span>position=<span class="hljs-string">"'fixed'"</span> &gt;</code></pre> <p><strong>isHotKey</strong></p> <p>类型: <code>Boolean</code></p> <p>默认值: <code>true</code></p> <p>快捷键键开关,目前仅支持快捷键<code>R</code>标尺显示开关</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-ruler-tool :is-hot-key=&quot;ture&quot; >" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code style="word-break: break-word; white-space: initial;">&lt;vue-ruler-tool <span class="hljs-symbol">:is-hot-key=<span class="hljs-string">"ture"</span></span> &gt;</code></pre> <p><strong>isScaleRevise</strong></p> <p>类型: <code>Boolean</code></p> <p>默认值: <code>false</code></p> <p>刻度修正(根据content进行刻度重置),意思就是从内容的位置开始从0计数</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-ruler-tool :is-scale-revise=&quot;ture&quot; >" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code style="word-break: break-word; white-space: initial;">&lt;vue-ruler-tool <span class="hljs-symbol">:is-scale-revise=<span class="hljs-string">"ture"</span></span> &gt;</code></pre> <p><del><strong>topSpacing</strong></del></p> <p><del>类型: <code>Number</code></del></p> <p><del>默认值: 0,</del></p> <p><del>标尺与窗口的上间距,如果你的<code>position</code>不为<code>fixed</code>,此项必填</del></p> <p><del><strong>leftSpacing</strong></del></p> <p><del>类型: <code>Number</code></del></p> <p><del>默认值: <code>0</code></del></p> <p><del>标尺与窗口的左间距,如果你的<code>position</code>不为<code>fixed</code>,此项必填</del></p> <p><strong>presetLine</strong></p> <p>类型: <code><a href="http://www.js-code.com/tag/array" title="Array" target="_blank">Array</a></code></p> <p>默认值: <code>[]</code></p> <p>接受格式:<code> [{ type: 'l', site: 50 }, { type: 'v', site: 180 }]</code></p> <p>预置参考线<code>l</code>代表水平线,<code>v</code>代表垂直线,<code>site</code>为Number类型</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-ruler-tool :preset-line=&quot;[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]&quot; >" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code style="word-break: break-word; white-space: initial;">&lt;vue-ruler-tool <span class="hljs-symbol">:preset-line=<span class="hljs-string">"[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]"</span></span> &gt;</code></pre> <p><strong>contentLayout</strong></p> <p>类型: <code>Object</code></p> <p>默认值: <code>{ top: 50, left: 50 }</code></p> <p>内容部分布局分布,及内容摆放位置</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-ruler-tool :content-layout=&quot;{left:200,top:100}&quot; >" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs ruby"><code style="word-break: break-word; white-space: initial;">&lt;vue-ruler-tool <span class="hljs-symbol">:content-layout=<span class="hljs-string">"{left:200,top:100}"</span></span> &gt;</code></pre> <h3 id="articleHeader5">Methods</h3> <p><strong>quickGeneration</strong></p> <p>参数:<code>[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]</code></p> <p>快速设置参考线,一般用来通过弹窗让用户输入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<vue-ruler-tool ref='rulerTool' ><br /> let params=[<br /> { type: 'l', site: 100 },<br /> { type: 'v', site: 200 }<br /> ]<br /> this.$refs.rulerTool.quickGeneration(params)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>&lt;vue-ruler-tool ref=<span class="hljs-string">'rulerTool'</span> &gt; <a href="http://www.js-code.com/tag/let" title="浏览关于“let”的文章" target="_blank" class="tag_link">let</a> params=[ { <span class="hljs-string">type:</span> <span class="hljs-string">'l'</span>, <span class="hljs-string">site:</span> <span class="hljs-number">100</span> }, { <span class="hljs-string">type:</span> <span class="hljs-string">'v'</span>, <span class="hljs-string">site:</span> <span class="hljs-number">200</span> } ] <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$refs.rulerTool.quickGeneration(params)</code></pre> <h3 id="articleHeader6">发布到NPM教程</h3> <p><a href="https://www.jianshu.com/p/27de92e912cb" rel="nofollow noreferrer" target="_blank">制作并发布第一个vue组件的npm包</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

基于vue的网页标尺辅助线工具(vue-ruler-tool)

全部内容,希望文章能够帮你解决

基于vue的网页标尺辅助线工具(vue-ruler-tool)

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过