国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

基于vue的網(wǎng)頁(yè)標(biāo)尺輔助線工具(vue-ruler-tool)

劉玉平 / 3535人閱讀

摘要：最近在網(wǎng)上找到一個(gè)網(wǎng)頁(yè)制作輔助工具標(biāo)尺參考線插件，覺得在現(xiàn)在的一個(gè)項(xiàng)目中能用的上，插件是基于的，但是現(xiàn)在的項(xiàng)目是用寫的。

vue-ruler-tool 
最近在網(wǎng)上找到一個(gè) 網(wǎng)頁(yè)制作輔助工具-jQuery標(biāo)尺參考線插件 ，覺得在現(xiàn)在的一個(gè)項(xiàng)目中能用的上，插件是基于JQuery的，但是現(xiàn)在的項(xiàng)目是用vue寫的。So...,
就照葫蘆畫瓢改裝成了Vue組件，總的來說算是一個(gè)用處較多的組件，于是乎，就想著把它分享出來。
項(xiàng)目地址

https://github.com/gorkys/vue...

特點(diǎn)

沒有依賴

可拖動(dòng)的輔助線

快捷鍵支持

好吧，其實(shí)這個(gè)組件沒什么太多的特點(diǎn)~
安裝與基本用法 
$ npm install --save vue-ruler-tool

全局注冊(cè)

import Vue from "vue"
import VueRulerTool from "vue-ruler-tool"

Vue.component("vue-ruler-tool", VueRulerTool)

你現(xiàn)在就可以使用該組件了
Props

position

類型:String

默認(rèn)值: relative

可能值:["absolute", "fixed", "relative", "static", "inherit"]

規(guī)定標(biāo)尺工具的定位類型

isHotKey

類型: Boolean

默認(rèn)值: true

快捷鍵鍵開關(guān)，目前僅支持快捷鍵R標(biāo)尺顯示開關(guān)

isScaleRevise

類型: Boolean

默認(rèn)值: false

刻度修正(根據(jù)content進(jìn)行刻度重置),意思就是從內(nèi)容的位置開始從0計(jì)數(shù)

topSpacing

類型: Number

默認(rèn)值: 0,

標(biāo)尺與窗口的上間距，如果你的position不為fixed，此項(xiàng)必填

leftSpacing

類型: Number

默認(rèn)值: 0

標(biāo)尺與窗口的左間距，如果你的position不為fixed，此項(xiàng)必填

presetLine

類型: Array

默認(rèn)值: []

接受格式: [{ type: "l", site: 50 }, { type: "v", site: 180 }]

預(yù)置參考線l代表水平線，v代表垂直線，site為Number類型

contentLayout

類型: Object

默認(rèn)值: { top: 50, left: 50 }

內(nèi)容部分布局分布，及內(nèi)容擺放位置

Methods

quickGeneration

參數(shù):[{ type: "l", site: 100 }, { type: "v", site: 200 }]

快速設(shè)置參考線，一般用來通過彈窗讓用戶輸入


let params=[
        { type: "l", site: 100 },
        { type: "v", site: 200 }
]
this.$refs.rulerTool.quickGeneration(params)
發(fā)布到NPM教程

制作并發(fā)布第一個(gè)vue組件的npm包

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/54671.html

相關(guān)文章

  • 基于vue的網(wǎng)頁(yè)標(biāo)尺輔助線工具(vue-ruler-tool)

    摘要：最近在網(wǎng)上找到一個(gè)網(wǎng)頁(yè)制作輔助工具標(biāo)尺參考線插件，覺得在現(xiàn)在的一個(gè)項(xiàng)目中能用的上，插件是基于的，但是現(xiàn)在的項(xiàng)目是用寫的。 showImg(https://segmentfault.com/img/remote/1460000016445262?w=1028&h=764); vue-ruler-tool 最近在網(wǎng)上找到一個(gè) 網(wǎng)頁(yè)制作輔助工具-jQuery標(biāo)尺參考線插件 ，覺得在現(xiàn)在的一...

    codecraft 評(píng)論0 收藏0

  • 制作并發(fā)布第一個(gè)vue組件的npm包

    摘要：發(fā)布到注冊(cè)進(jìn)入官網(wǎng)，注冊(cè)帳號(hào)登錄并發(fā)布提示報(bào)錯(cuò)是因?yàn)樽?cè)完后沒有進(jìn)行郵箱驗(yàn)證，驗(yàn)證完成即可發(fā)布成功參考文獻(xiàn)如何制作并發(fā)布一個(gè)的組件的包發(fā)布自己第一個(gè)組件包基于的文字跑馬燈組件 最近在網(wǎng)上找到一個(gè) 網(wǎng)頁(yè)制作輔助工具-jQuery標(biāo)尺參考線插件 ，覺得在現(xiàn)在的一個(gè)項(xiàng)目中能用的上，插件是基于JQuery的，但是現(xiàn)在的項(xiàng)目是用vue寫的。So...,就照葫蘆畫瓢改裝成了Vue組件，總的來說算是...

    bawn 評(píng)論0 收藏0

  • 前端ps中常用的操作

    摘要：昨天，給了個(gè)圖，讓寫成網(wǎng)頁(yè)。很久之前，操作的還湊乎。把自己需要的圖片切下來第一種方法選擇切片工具，把自己想要的圖片框選出來。另外，，這時(shí)候，關(guān)于文字的面板信息就會(huì)出來了。可以返回步以內(nèi)取消選區(qū)待續(xù)。。 昨天，ui給了個(gè)psd圖，讓寫成網(wǎng)頁(yè)。額，要自己切圖。很久之前，操作的還湊乎。但是，好久了，都忘了。所以，打算自己記個(gè)筆記，方便以后查看。 首先，打開ps就先來設(shè)置一下ps的單位啦點(diǎn)擊...

    libxd 評(píng)論0 收藏0

  • 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁(yè)響應(yīng)速度、餓

    摘要：前端每周清單第期支付寶前端構(gòu)建工具發(fā)展用加快網(wǎng)頁(yè)響應(yīng)速度餓了么升級(jí)實(shí)踐前端前端每周清單前端每周清單專注前端領(lǐng)域內(nèi)容，分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。 前端每周清單第 12 期：支付寶前端構(gòu)建工具發(fā)展、LinkedIn用Brotli加快網(wǎng)頁(yè)響應(yīng)速度、餓了么PWA 升級(jí)實(shí)踐 為InfoQ中文站特供稿件，首發(fā)地址為這里；如需轉(zhuǎn)載，請(qǐng)與InfoQ中文站聯(lián)系。從屬于筆...

    liuchengxu 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<