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

資訊專欄INFORMATION COLUMN

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

劉玉平 / 3541人閱讀

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

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

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

特點

沒有依賴

可拖動的輔助線

快捷鍵支持

好吧，其實這個組件沒什么太多的特點~
安裝與基本用法 
$ npm install --save vue-ruler-tool

全局注冊

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計數(shù)

topSpacing

類型: Number

默認(rèn)值: 0,

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

leftSpacing

類型: Number

默認(rèn)值: 0

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

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ā)布第一個vue組件的npm包

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

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

相關(guān)文章

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

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

    codecraft 評論0 收藏0

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

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

    bawn 評論0 收藏0

  • 前端ps中常用的操作

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

    libxd 評論0 收藏0

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

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

    liuchengxu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<