基於vue的網頁標尺輔助線工具(vue-ruler-tool)

vue-ruler-tool

---

最近在網上找到一個 網頁製做輔助工具-jQuery標尺參考線插件 ，以爲在如今的一個項目中能用的上，插件是基於JQuery的，可是如今的項目是用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)

你如今就能夠使用該組件了

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

Props

position

類型:String

默認值: relative

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

規定標尺工具的定位類型

<vue-ruler-tool :position="'fixed'" >

isHotKey

類型: Boolean

默認值: true

快捷鍵鍵開關，目前僅支持快捷鍵R標尺顯示開關

<vue-ruler-tool :is-hot-key="ture" >

isScaleRevise

類型: Boolean

默認值: false

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

<vue-ruler-tool :is-scale-revise="ture" >

topSpacing

類型: Number

默認值: 0,

標尺與窗口的上間距，若是你的position不爲fixed，此項必填

leftSpacing

類型: Number

默認值: 0

標尺與窗口的左間距，若是你的position不爲fixed，此項必填

presetLine

類型: Array

默認值: []

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

預置參考線l表明水平線，v表明垂直線，site爲Number類型

<vue-ruler-tool :preset-line="[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]" >

contentLayout

類型: Object

默認值: { top: 50, left: 50 }

內容部分佈局分佈，及內容擺放位置

<vue-ruler-tool :content-layout="{left:200,top:100}" >

Methods

quickGeneration

參數:[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]

快速設置參考線，通常用來經過彈窗讓用戶輸入

<vue-ruler-tool ref='rulerTool' >
let params=[
        { type: 'l', site: 100 },
        { type: 'v', site: 200 }
]
this.$refs.rulerTool.quickGeneration(params)

發佈到NPM教程

製做併發布第一個vue組件的npm包