├── .npmignore
├── .babelrc
├── src
    ├── components
    │   ├── image
    │   │   ├── line_dot.png
    │   │   ├── line_h.png
    │   │   ├── line_v.png
    │   │   ├── ruler_h.png
    │   │   ├── ruler_v.png
    │   │   ├── cur_move_h.cur
    │   │   └── cur_move_v.cur
    │   ├── event.js
    │   └── vue-ruler-tool.vue
    ├── index.js
    ├── main.js
    └── App.vue
├── .editorconfig
├── .gitignore
├── index.html
├── package.json
├── webpack.config.js
└── README.md


/.npmignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | .git
3 | node_modules/
4 | .idea/
5 | npm-debug.log
6 | yarn-error.log
7 | 


--------------------------------------------------------------------------------
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 |   "presets": [
3 |     ["env", { "modules": false }],
4 |     "stage-3"
5 |   ]
6 | }
7 | 


--------------------------------------------------------------------------------
/src/components/image/line_dot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/line_dot.png


--------------------------------------------------------------------------------
/src/components/image/line_h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/line_h.png


--------------------------------------------------------------------------------
/src/components/image/line_v.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/line_v.png


--------------------------------------------------------------------------------
/src/components/image/ruler_h.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/ruler_h.png


--------------------------------------------------------------------------------
/src/components/image/ruler_v.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/ruler_v.png


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | /*
2 |  Created by Gorky on 2018/9/15
3 | */
4 | export { default } from './components/vue-ruler-tool'
5 | 


--------------------------------------------------------------------------------
/src/components/image/cur_move_h.cur:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/cur_move_h.cur


--------------------------------------------------------------------------------
/src/components/image/cur_move_v.cur:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gorkys/vue-ruler-tool/HEAD/src/components/image/cur_move_v.cur


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App.vue'
3 | 
4 | new Vue({
5 |   el: '#app',
6 |   render: h => h(App)
7 | })
8 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | indent_style = space
 6 | indent_size = 2
 7 | end_of_line = lf
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules/
 3 | dist/
 4 | npm-debug.log
 5 | yarn-error.log
 6 | package-lock.json
 7 | 
 8 | # Editor directories and files
 9 | .idea
10 | *.suo
11 | *.ntvs*
12 | *.njsproj
13 | *.sln
14 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <title>vue-ruler-tool</title>
 6 |   </head>
 7 |   <style>
 8 |     html,body {
 9 |       margin: 0;
10 |       padding: 0;
11 |     }
12 |   </style>
13 |   <body>
14 |     <div id="app"></div>
15 |     <script src="/dist/index.js"></script>
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/components/event.js:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * @description 绑定事件 on(element, event, handler)
 3 |  */
 4 | export const on = (function () {
 5 |     if (document.addEventListener) {
 6 |         return function (element, event, handler) {
 7 |         if (element && event && handler) {
 8 |             element.addEventListener(event, handler, false)
 9 |         }
10 |         }
11 |     } else {
12 |         return function (element, event, handler) {
13 |         if (element && event && handler) {
14 |             element.attachEvent('on' + event, handler)
15 |         }
16 |         }
17 |     }
18 | })()
19 | 
20 | /**
21 |  * @description 解绑事件 off(element, event, handler)
22 |  */
23 | export const off = (function () {
24 |     if (document.removeEventListener) {
25 |         return function (element, event, handler) {
26 |         if (element && event) {
27 |             element.removeEventListener(event, handler, false)
28 |         }
29 |         }
30 |     } else {
31 |         return function (element, event, handler) {
32 |         if (element && event) {
33 |             element.detachEvent('on' + event, handler)
34 |         }
35 |         }
36 |     }
37 | })()


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <button @click="visible = !visible">显示/隐藏标尺</button>
 4 |     <button @click="presetLine = []">清空</button>
 5 |     <button @click="presetLine = [{ type: 'h', site: 100 }, { type: 'v', site: 200 }]">修改</button>
 6 |     <section style="margin: 50px;padding: 50px;border: 1px solid red;height: 600px;">
 7 |       <vue-ruler-tool
 8 |         v-model="presetLine"
 9 |         :step-length="20"
10 |         :parent="true"
11 |         :is-scale-revise="true"
12 |         :visible.sync="visible"
13 |       >
14 |         <img src="https://cn.vuejs.org/images/logo.png" style="width: 300px;height: 300px;margin: 100px;" alt="">
15 |          <!--<iframe src="https://www.baidu.com" width="500" height="300" />-->
16 |       </vue-ruler-tool>
17 |     </section>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | import VueRulerTool from './components/vue-ruler-tool'
23 | export default {
24 |   name: 'app',
25 |   components:{
26 |     VueRulerTool
27 |   },
28 |   data () {
29 |     return {
30 |       presetLine: [{ type: 'h', site: 200 }, { type: 'v', site: 100 }],
31 |       visible: true
32 |     }
33 |   },
34 |   watch: {
35 |     visible(val) {
36 |       console.log(val)
37 |     }
38 |   }
39 | }
40 | </script>
41 | 
42 | <style lang="scss">
43 | #app {
44 |   font-family: 'Avenir', Helvetica, Arial, sans-serif;
45 |   -webkit-font-smoothing: antialiased;
46 |   -moz-osx-font-smoothing: grayscale;
47 | }
48 | </style>
49 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "vue-ruler-tool",
 3 |   "description": "vue标尺辅助线",
 4 |   "version": "1.2.4",
 5 |   "author": "gorkys",
 6 |   "license": "MIT",
 7 |   "main": "dist/index.js",
 8 |   "jsnext:main": "src/index.js",
 9 |   "private": false,
10 |   "scripts": {
11 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
12 |     "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
13 |   },
14 |   "repository": {
15 |     "type": "git",
16 |     "url": "https://github.com/gorkys/vue-ruler-tool.git"
17 |   },
18 |   "bugs": {
19 |     "url": "https://github.com/gorkys/vue-ruler-tool/issues"
20 |   },
21 |   "homepage": "https://github.com/gorkys/vue-ruler-tool",
22 |   "keywords": [
23 |     "vue",
24 |     "component",
25 |     "ruler",
26 |     "tool"
27 |   ],
28 |   "dependencies": {
29 |     "vue": "^2.5.11"
30 |   },
31 |   "browserslist": [
32 |     "> 1%",
33 |     "last 2 versions",
34 |     "not ie <= 8"
35 |   ],
36 |   "devDependencies": {
37 |     "babel-core": "^6.26.0",
38 |     "babel-loader": "^7.1.2",
39 |     "babel-preset-env": "^1.6.0",
40 |     "babel-preset-stage-3": "^6.24.1",
41 |     "cross-env": "^5.0.5",
42 |     "css-loader": "^0.28.7",
43 |     "file-loader": "^1.1.4",
44 |     "node-sass": "^4.5.3",
45 |     "sass-loader": "^6.0.6",
46 |     "vue-loader": "^13.0.5",
47 |     "vue-template-compiler": "^2.4.4",
48 |     "webpack": "^3.8.0",
49 |     "webpack-dev-server": "^2.9.7"
50 |   }
51 | }
52 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
  1 | var path = require('path')
  2 | var webpack = require('webpack')
  3 | 
  4 | module.exports = {
  5 |   entry: process.env.NODE_ENV === 'production' ? './src/index.js' : './src/main.js',
  6 |   output: {
  7 |     path: path.resolve(__dirname, './dist'),
  8 |     publicPath: '/dist/',
  9 |     filename: 'index.js',
 10 |     libraryTarget: 'umd',
 11 |     umdNamedDefine: true
 12 |   },
 13 |   module: {
 14 |     rules: [
 15 |       {
 16 |         test: /\.css$/,
 17 |         use: [
 18 |           'vue-style-loader',
 19 |           'css-loader'
 20 |         ],
 21 |       },
 22 |       {
 23 |         test: /\.scss$/,
 24 |         use: [
 25 |           'vue-style-loader',
 26 |           'css-loader',
 27 |           'sass-loader'
 28 |         ],
 29 |       },
 30 |       {
 31 |         test: /\.sass$/,
 32 |         use: [
 33 |           'vue-style-loader',
 34 |           'css-loader',
 35 |           'sass-loader?indentedSyntax'
 36 |         ],
 37 |       },
 38 |       {
 39 |         test: /\.vue$/,
 40 |         loader: 'vue-loader',
 41 |         options: {
 42 |           loaders: {
 43 |             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
 44 |             // the "scss" and "sass" values for the lang attribute to the right configs here.
 45 |             // other preprocessors should work out of the box, no loader config like this necessary.
 46 |             'scss': [
 47 |               'vue-style-loader',
 48 |               'css-loader',
 49 |               'sass-loader'
 50 |             ],
 51 |             'sass': [
 52 |               'vue-style-loader',
 53 |               'css-loader',
 54 |               'sass-loader?indentedSyntax'
 55 |             ]
 56 |           }
 57 |           // other vue-loader options go here
 58 |         }
 59 |       },
 60 |       {
 61 |         test: /\.js$/,
 62 |         loader: 'babel-loader',
 63 |         exclude: /node_modules/
 64 |       },
 65 |       {
 66 |         test: /\.(png|jpg|gif|svg)$/,
 67 |         loader: 'file-loader',
 68 |         options: {
 69 |           name: '[name].[ext]?[hash]'
 70 |         }
 71 |       }
 72 |     ]
 73 |   },
 74 |   resolve: {
 75 |     alias: {
 76 |       'vue$': 'vue/dist/vue.esm.js'
 77 |     },
 78 |     extensions: ['*', '.js', '.vue', '.json']
 79 |   },
 80 |   devServer: {
 81 |     historyApiFallback: true,
 82 |     noInfo: true,
 83 |     overlay: true
 84 |   },
 85 |   performance: {
 86 |     hints: false
 87 |   },
 88 |   devtool: '#eval-source-map'
 89 | }
 90 | 
 91 | if (process.env.NODE_ENV === 'production') {
 92 |   module.exports.devtool = '#source-map'
 93 |   // http://vue-loader.vuejs.org/en/workflow/production.html
 94 |   module.exports.plugins = (module.exports.plugins || []).concat([
 95 |     new webpack.DefinePlugin({
 96 |       'process.env': {
 97 |         NODE_ENV: '"production"'
 98 |       }
 99 |     }),
100 |     new webpack.optimize.UglifyJsPlugin({
101 |       sourceMap: true,
102 |       compress: {
103 |         warnings: false
104 |       }
105 |     }),
106 |     new webpack.LoaderOptionsPlugin({
107 |       minimize: true
108 |     })
109 |   ])
110 | }
111 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | ![标尺辅助线.gif](https://upload-images.jianshu.io/upload_images/12792466-b910b0ac21305c52.gif?imageMogr2/auto-orient/strip)
  2 | # vue-ruler-tool
  3 | ---
  4 | >一个基于vue的网页标尺辅助线工具
  5 | 
  6 | ### 特点
  7 | - 没有依赖
  8 | - 可拖动的辅助线
  9 | - 快捷键支持
 10 | > 好吧，其实这个组件没什么太多的特点~
 11 | 
 12 | ### 安装与基本用法
 13 | ```
 14 | $ npm install --save vue-ruler-tool
 15 | ```
 16 | 全局注册
 17 | ```
 18 | import Vue from 'vue'
 19 | import VueRulerTool from 'vue-ruler-tool'
 20 | 
 21 | Vue.component('vue-ruler-tool', VueRulerTool)
 22 | ```
 23 | 你现在就可以使用该组件了
 24 | ```
 25 | <template>
 26 |   <div id="app">
 27 |     <vue-ruler-tool
 28 |       :content-layout="{left:200,top:100}"
 29 |       :is-scale-revise="true"
 30 |       :v-model="presetLine"
 31 |     >
 32 |       <div class="test"></div>
 33 |     </vue-ruler-tool>
 34 |   </div>
 35 | </template>
 36 | 
 37 | <script>
 38 | import VueRulerTool from 'vue-ruler-tool'
 39 | export default {
 40 |   name: 'app',
 41 |   components:{
 42 |     VueRulerTool
 43 |   },
 44 |   data () {
 45 |     return {
 46 |       presetLine: [{ type: 'l', site: 100 }, { type: 'v', site: 200 }]
 47 |     }
 48 |   }
 49 | }
 50 | </script>
 51 | ```
 52 | ### Props
 53 | **parent**
 54 | 
 55 | 类型:`Boolean`
 56 | 
 57 | 默认值: `false`
 58 | 
 59 | 限制组件大小在父级内部
 60 | ```
 61 | <vue-ruler-tool :parent="true" >
 62 | ```
 63 | **position**
 64 | 
 65 | 类型:`String`
 66 | 
 67 | 默认值: `relative`
 68 | 
 69 | 可能值:`['absolute', 'fixed', 'relative', 'static', 'inherit']`
 70 | 
 71 | 规定标尺工具的定位类型
 72 | ```
 73 | <vue-ruler-tool :position="'fixed'" >
 74 | ```
 75 | **isHotKey**
 76 | 
 77 | 类型: `Boolean`
 78 | 
 79 | 默认值: `true`
 80 | 
 81 | 快捷键键开关，目前仅支持快捷键`R`标尺显示开关
 82 | ```
 83 | <vue-ruler-tool :is-hot-key="true" >
 84 | ```
 85 | **visible**
 86 | 
 87 | 类型: `Boolean`
 88 | 
 89 | 默认值: `true`
 90 | 
 91 | 是否显示，如果设为false则隐藏，可通过.sync接收来自`R`快捷键的修改
 92 | ```
 93 | <v-ruler :visible.sync="visible" >
 94 | data() {
 95 |   return {
 96 |     visible: true
 97 |   }
 98 | }
 99 | ```
100 | **isScaleRevise**
101 | 
102 | 类型: `Boolean`
103 | 
104 | 默认值: `false`
105 | 
106 | 刻度修正(根据content进行刻度重置),意思就是从内容的位置开始从0计数
107 | ```
108 | <vue-ruler-tool :is-scale-revise="ture" >
109 | ```
110 | 
111 | **value(v-model)**
112 | 
113 | 类型: `Array`
114 | 
115 | 默认值: `[]`
116 | 
117 | 接受格式:` [{ type: 'l', site: 50 }, { type: 'v', site: 180 }]`
118 | 
119 | 预置参考线`l`代表水平线，`v`代表垂直线，`site`为Number类型
120 | ```
121 | <vue-ruler-tool :v-model="[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]" >
122 | ```
123 | **contentLayout**
124 | 
125 | 类型: `Object`
126 | 
127 | 默认值: `{ top: 0, left: 0 }`
128 | 
129 | 内容部分布局分布，及内容摆放位置
130 | ```
131 | <vue-ruler-tool :content-layout="{left:200,top:100}" >
132 | ```
133 | **stepLength**
134 | 
135 | 类型: `Number`
136 | 
137 | 默认值: `50`
138 | 
139 | 步长设置(10的倍数)
140 | ```
141 | <vue-ruler-tool :step-length="100" >
142 | ```
143 | ### Methods
144 | 
145 | **quickGeneration**
146 | 
147 | 参数:`[{ type: 'l', site: 100 }, { type: 'v', site: 200 }]`
148 | 
149 | 快速设置参考线，一般用来通过弹窗让用户输入
150 | ```
151 | <vue-ruler-tool ref='rulerTool' >
152 | let params=[
153 |         { type: 'l', site: 100 },
154 |         { type: 'v', site: 200 }
155 | ]
156 | this.$refs.rulerTool.quickGeneration(params)
157 | ```
158 | ### 优化项
159 | - [x] 标尺与窗口间距
160 | ## Build Setup
161 | 
162 | ``` bash
163 | # install dependencies
164 | npm install
165 | 
166 | # serve with hot reload at localhost:8080
167 | npm run dev
168 | 
169 | # build for production with minification
170 | npm run build
171 | ```
172 | 
173 | For detailed explanation on how things work, consult the [docs for vue-loader](http://vuejs.github.io/vue-loader).
174 | 


--------------------------------------------------------------------------------
/src/components/vue-ruler-tool.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div :style="wrapperStyle" class="vue-ruler-wrapper" onselectstart="return false;">
  3 |     <section v-show="rulerToggle">
  4 |       <div ref="horizontalRuler" class="vue-ruler-h" @mousedown.stop="horizontalDragRuler">
  5 |         <span v-for="(item,index) in xScale" :key="index" :style="{left:index * 50 + 2 + 'px'}" class="n">{{ item.id }}</span>
  6 |       </div>
  7 |       <div ref="verticalRuler" class="vue-ruler-v" @mousedown.stop="verticalDragRuler">
  8 |         <span v-for="(item,index) in yScale" :key="index" :style="{top:index * 50 + 2 + 'px'}" class="n">{{ item.id }}</span>
  9 |       </div>
 10 |       <div :style="{top:verticalDottedTop + 'px'}" class="vue-ruler-ref-dot-h" />
 11 |       <div :style="{left:horizontalDottedLeft + 'px'}" class="vue-ruler-ref-dot-v" />
 12 |       <div
 13 |         v-for="item in lineList"
 14 |         :title="item.title"
 15 |         :style="getLineStyle(item)"
 16 |         :key="item.id"
 17 |         :class="`vue-ruler-ref-line-${item.type}`"
 18 |         @mousedown="handleDragLine(item)"></div>
 19 |     </section>
 20 |     <div ref="content" class="vue-ruler-content" :style="contentStyle">
 21 |       <slot />
 22 |     </div>
 23 |     <div v-show="isDrag" class="vue-ruler-content-mask"></div>
 24 |   </div>
 25 | </template>
 26 | 
 27 | <script>
 28 | import { on, off } from './event.js'
 29 | export default {
 30 |   name: 'VRuler',
 31 |   components: {},
 32 |   props: {
 33 |     // 自定义宽度和高度
 34 |     width: {
 35 |       type: Number,
 36 |       default: 0
 37 |     },
 38 |     height: {
 39 |       type: Number,
 40 |       default: 0
 41 |     },
 42 |     // 宽度
 43 |     position: {
 44 |       type: String,
 45 |       default: 'relative',
 46 |       validator: function (val) {
 47 |         return ['absolute', 'fixed', 'relative', 'static', 'inherit'].indexOf(val) !== -1
 48 |       }
 49 |     }, // 规定元素的定位类型
 50 |     isHotKey: {
 51 |       type: Boolean, default: true
 52 |     }, // 热键开关
 53 |     isScaleRevise: {
 54 |       type: Boolean, default: false
 55 |     }, // 刻度修正(根据content进行刻度重置)
 56 |     value: {
 57 |       type: Array,
 58 |       default: () => {
 59 |         return [] // { type: 'h', site: 50 }, { type: 'v', site: 180 }
 60 |       }
 61 |     }, // 预置参考线
 62 |     contentLayout: {
 63 |       type: Object,
 64 |       default: () => {
 65 |         return { top: 0, left: 0 }
 66 |       }
 67 |     }, // 内容部分布局
 68 |     parent: {
 69 |       type: Boolean,
 70 |       default: false
 71 |     },
 72 |     visible: {
 73 |       type: Boolean,
 74 |       default: true
 75 |     },
 76 |     stepLength: {
 77 |       type: Number,
 78 |       default: 50,
 79 |       validator: (val) => val % 10 === 0
 80 |     } // 步长
 81 |   },
 82 |   data () {
 83 |     return {
 84 |       size: 17,
 85 |       left_top: 18, // 内容左上填充
 86 |       windowWidth: 0, // 窗口宽度
 87 |       windowHeight: 0, // 窗口高度
 88 |       xScale: [], // 水平刻度
 89 |       yScale: [], // 垂直刻度
 90 |       topSpacing: 0, // 标尺与窗口上间距
 91 |       leftSpacing: 0, //  标尺与窗口左间距
 92 |       isDrag: false,
 93 |       dragFlag: '', // 拖动开始标记，可能值x(从水平标尺开始拖动),y(从垂直标尺开始拖动)
 94 |       horizontalDottedLeft: -999, // 水平虚线位置
 95 |       verticalDottedTop: -999, // 垂直虚线位置
 96 |       rulerWidth: 0, // 垂直标尺的宽度
 97 |       rulerHeight: 0, // 水平标尺的高度
 98 |       dragLineId: '', // 被移动线的ID
 99 |       keyCode: {
100 |         r: 82
101 |       }, // 快捷键参数
102 |       rulerToggle: true // 标尺辅助线显示开关
103 |     }
104 |   },
105 |   computed: {
106 |     wrapperStyle() {
107 |       return {
108 |         width: (this.width || this.windowWidth) + 'px',
109 |         height: (this.height || this.windowHeight) + 'px',
110 |         position: this.position
111 |       }
112 |     },
113 |     contentStyle() {
114 |       return {
115 |         left: this.contentLayout.left + 'px',
116 |         top: this.contentLayout.top + 'px',
117 |         padding: this.left_top + 'px 0px 0px ' + this.left_top + 'px'
118 |       }
119 |     },
120 |     lineList() {
121 |       let hCount = 0;
122 |       let vCount = 0;
123 |       return this.value.map((item) => {
124 |         const isH = item.type === 'h'
125 |         return {
126 |           id: `${item.type}_${isH ? hCount++ : vCount++}`,
127 |           type: item.type,
128 |           title: item.site.toFixed(2) + 'px',
129 |           [isH ? 'top' : 'left']: item.site / (this.stepLength / 50) + this.size
130 |         }
131 |       })
132 |     }
133 |   },
134 |   watch: {
135 |     visible: {
136 |       handler(visible) {
137 |         this.rulerToggle = visible;
138 |       },
139 |       immediate: true
140 |     }
141 |   },
142 |   mounted () {
143 |     on(document, 'mousemove', this.dottedLineMove)
144 |     on(document, 'mouseup', this.dottedLineUp)
145 |     on(document, 'keyup', this.keyboard)
146 |     this.init()
147 |     on(window, 'resize', this.windowResize)
148 |   },
149 |   beforeDestroy () {
150 |     off(document, 'mousemove', this.dottedLineMove)
151 |     off(document, 'mouseup', this.dottedLineUp)
152 |     off(document, 'keyup', this.keyboard)
153 |     off(window, 'resize', this.windowResize)
154 |   },
155 |   methods: {
156 |     init () {
157 |       this.box()
158 |       this.scaleCalc()
159 |     },
160 |     windowResize() {
161 |       this.xScale = []
162 |       this.yScale = []
163 |       this.init()
164 |     },
165 |     getLineStyle({type, top, left}) {
166 |       return type === 'h' ? {top: top + 'px'} : {left: left + 'px'}
167 |     },
168 |     handleDragLine({type, id}) {
169 |       return type === 'h' ? this.dragHorizontalLine(id) : this.dragVerticalLine(id)
170 |     },
171 |     box () {
172 |       if (this.isScaleRevise) { // 根据内容部分进行刻度修正
173 |         const content = this.$refs.content
174 |         const contentLeft = content.offsetLeft
175 |         const contentTop = content.offsetTop
176 | 
177 |         this.getCalcRevise(this.xScale, contentLeft)
178 |         this.getCalcRevise(this.yScale, contentTop)
179 |       }
180 |       if (this.parent) {
181 |         const style = window.getComputedStyle(this.$el.parentNode, null)
182 |         this.windowWidth = parseInt(style.getPropertyValue('width'), 10)
183 |         this.windowHeight = parseInt(style.getPropertyValue('height'), 10)
184 |       } else {
185 |         this.windowWidth = document.documentElement.clientWidth - this.leftSpacing
186 |         this.windowHeight = document.documentElement.clientHeight - this.topSpacing
187 |       }
188 |       this.rulerWidth = this.$refs.verticalRuler.clientWidth
189 |       this.rulerHeight = this.$refs.horizontalRuler.clientHeight
190 |       this.setSpacing()
191 |     }, // 获取窗口宽与高
192 |     setSpacing () {
193 |       this.topSpacing = this.$refs.horizontalRuler.getBoundingClientRect().y //.offsetParent.offsetTop
194 |       this.leftSpacing = this.$refs.verticalRuler.getBoundingClientRect().x// .offsetParent.offsetLeft
195 |     },
196 |     scaleCalc () {
197 |       this.getCalc(this.xScale, this.width || this.windowWidth)
198 |       this.getCalc(this.yScale, this.width || this.windowHeight)
199 |     }, // 计算刻度
200 |     getCalc (array,length) {
201 |       for (let i = 0; i < length * this.stepLength / 50; i += this.stepLength) {
202 |         if (i % this.stepLength === 0) {
203 |           array.push({ id: i })
204 |         }
205 |       }
206 |     }, // 获取刻度方法
207 |     getCalcRevise (array,length) {
208 |       for (let i = 0; i < length; i += 1) {
209 |         if (i % this.stepLength === 0 && i + this.stepLength <= length) {
210 |           array.push({ id: i })
211 |         }
212 |       }
213 |     }, // 获取矫正刻度方法
214 |     newLine (val) {
215 |       this.isDrag = true
216 |       this.dragFlag = val
217 |     }, // 生成一个参考线
218 |     dottedLineMove ($event) {
219 |       this.setSpacing()
220 |       switch (this.dragFlag) {
221 |         case 'x':
222 |           if (this.isDrag) {
223 |             this.verticalDottedTop = $event.pageY - this.topSpacing
224 |           }
225 |           break
226 |         case 'y':
227 |           if (this.isDrag) {
228 |             this.horizontalDottedLeft = $event.pageX - this.leftSpacing
229 |           }
230 |           break
231 |         case 'h':
232 |           if (this.isDrag) {
233 |             this.verticalDottedTop = $event.pageY - this.topSpacing
234 |           }
235 |           break
236 |         case 'v':
237 |           if (this.isDrag) {
238 |             this.horizontalDottedLeft = $event.pageX - this.leftSpacing
239 |           }
240 |           break
241 |         default:
242 |           break
243 |       }
244 |     }, // 虚线移动
245 |     dottedLineUp ($event) {
246 |       this.setSpacing()
247 |       if (this.isDrag) {
248 |         this.isDrag = false
249 |         const cloneList = JSON.parse(JSON.stringify(this.value))
250 |         switch (this.dragFlag) {
251 |           case 'x':
252 |             cloneList.push({
253 |               type: 'h',
254 |               site: ($event.pageY - this.topSpacing - this.size) * (this.stepLength / 50)
255 |             })
256 |             this.$emit('input', cloneList)
257 |             break
258 |           case 'y':
259 |             cloneList.push({
260 |               type: 'v',
261 |               site: ($event.pageX - this.leftSpacing - this.size) * (this.stepLength / 50)
262 |             })
263 |             this.$emit('input', cloneList)
264 |             break
265 |           case 'h':
266 |             this.dragCalc(cloneList, $event.pageY, this.topSpacing, this.rulerHeight,'h')
267 |             this.$emit('input', cloneList)
268 |             break
269 |           case 'v':
270 |             this.dragCalc(cloneList, $event.pageX, this.leftSpacing, this.rulerWidth,'v')
271 |             this.$emit('input', cloneList)
272 |             break
273 |           default:
274 |             break
275 |         }
276 |         this.verticalDottedTop = this.horizontalDottedLeft = -10
277 |       }
278 |     }, // 虚线松开
279 |     dragCalc (list, page, spacing, ruler, type) {
280 |       if (page - spacing < ruler) {
281 |         let Index, id
282 |         this.lineList.forEach((item, index) => {
283 |           if (item.id === this.dragLineId) {
284 |             Index = index
285 |             id = item.id
286 |           }
287 |         })
288 |         list.splice(Index, 1, {
289 |           type: type,
290 |           site: -600
291 |         })
292 |       } else {
293 |         let Index, id
294 |         this.lineList.forEach((item, index) => {
295 |           if (item.id === this.dragLineId) {
296 |             Index = index
297 |             id = item.id
298 |           }
299 |         })
300 |         list.splice(Index, 1, {
301 |           type: type,
302 |           site: (page - spacing - this.size) * (this.stepLength / 50)
303 |         })
304 |       }
305 |     },
306 |     horizontalDragRuler () {
307 |       this.newLine('x')
308 |     }, // 水平标尺处按下鼠标
309 |     verticalDragRuler () {
310 |       this.newLine('y')
311 |     }, // 垂直标尺处按下鼠标
312 |     dragHorizontalLine (id) {
313 |       this.isDrag = true
314 |       this.dragFlag = 'h'
315 |       this.dragLineId = id
316 |     }, // 水平线处按下鼠标
317 |     dragVerticalLine (id) {
318 |       this.isDrag = true
319 |       this.dragFlag = 'v'
320 |       this.dragLineId = id
321 |     }, // 垂直线处按下鼠标
322 |     keyboard ($event) {
323 |       if (this.isHotKey) {
324 |         switch ($event.keyCode) {
325 |           case this.keyCode.r:
326 |             this.rulerToggle = !this.rulerToggle
327 |             this.$emit('update:visible', this.rulerToggle)
328 |             if (this.rulerToggle) {
329 |               this.left_top = 18;
330 |             } else {
331 |               this.left_top = 0;
332 |             }
333 |             break
334 |         }
335 |       }
336 |     }, // 键盘事件
337 |   }
338 | }
339 | </script>
340 | 
341 | <style lang="scss">
342 | .vue-ruler{
343 |   &-wrapper {
344 |     left: 0;
345 |     top: 0;
346 |     z-index: 999;
347 |     overflow: hidden;
348 |     user-select: none;
349 |   }
350 |   &-h,
351 |   &-v,
352 |   &-ref-line-v,
353 |   &-ref-line-h,
354 |   &-ref-dot-h,
355 |   &-ref-dot-v {
356 |     position: absolute;
357 |     left: 0;
358 |     top: 0;
359 |     overflow: hidden;
360 |     z-index: 999;
361 |   }
362 |   &-h,
363 |   &-v,
364 |   &-ref-line-v,
365 |   &-ref-line-h,
366 |   &-ref-dot-h,
367 |   &-ref-dot-v {
368 |     position: absolute;
369 |     left: 0;
370 |     top: 0;
371 |     overflow: hidden;
372 |     z-index: 999;
373 |   }
374 | 
375 |   &-h {
376 |     width: 100%;
377 |     height: 18px;
378 |     left: 18px;
379 |     opacity: 0.6;
380 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAASCAMAAAAuTX21AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACNJREFUeNpiYCAdMDKRCka1jGoBA2JZZGshiaCXFpIBQIABAAplBkCmQpujAAAAAElFTkSuQmCC)
381 |       repeat-x; /*./image/ruler_h.png*/
382 |   }
383 | 
384 |   &-v {
385 |     width: 18px;
386 |     height: 100%;
387 |     top: 18px;
388 |     opacity: 0.6;
389 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAyCAMAAABmvHtTAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAlQTFRFMzMzAAAA////BqjYlAAAACBJREFUeNpiYGBEBwwMTGiAakI0NX7U9aOuHyGuBwgwAH6bBkAR6jkzAAAAAElFTkSuQmCC)
390 |       repeat-y; /*./image/ruler_v.png*/
391 |   }
392 | 
393 |   &-v .n,
394 |   &-h .n {
395 |     position: absolute;
396 |     font: 10px/1 Arial, sans-serif;
397 |     color: #333;
398 |     cursor: default;
399 |   }
400 | 
401 |   &-v .n {
402 |     width: 8px;
403 |     left: 3px;
404 |     word-wrap: break-word;
405 |   }
406 | 
407 |   &-h .n {
408 |     top: 1px;
409 |   }
410 | 
411 |   &-ref-line-v,
412 |   &-ref-line-h,
413 |   &-ref-dot-h,
414 |   &-ref-dot-v {
415 |     z-index: 998;
416 |   }
417 | 
418 |   &-ref-line-h {
419 |     width: 100%;
420 |     height: 3px;
421 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAABCAMAAADU3h9xAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYIACgAADAAAJAAE0lmO3AAAAAElFTkSuQmCC)
422 |       repeat-x left center; /*./image/line_h.png*/
423 |     cursor: n-resize; /*url(./image/cur_move_h.cur), move*/
424 |   }
425 | 
426 |   &-ref-line-v {
427 |     width: 3px;
428 |     height: 100%;
429 |     _height: 9999px;
430 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAICAMAAAAPxGVzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFSv//AAAAH8VRuAAAAA5JREFUeNpiYEAFAAEGAAAQAAGePof9AAAAAElFTkSuQmCC)
431 |       repeat-y center top; /*./image/line_v.png*/
432 |     cursor: w-resize; /*url(./image/cur_move_v.cur), move*/
433 |   }
434 | 
435 |   &-ref-dot-h {
436 |     width: 100%;
437 |     height: 3px;
438 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
439 |       repeat-x left 1px; /*./image/line_dot.png*/
440 |     cursor: n-resize; /*url(./image/cur_move_h.cur), move*/
441 |     top: -10px;
442 |   }
443 | 
444 |   &-ref-dot-v {
445 |     width: 3px;
446 |     height: 100%;
447 |     _height: 9999px;
448 |     background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAMAAABFaP0WAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFf39/////F3PnHQAAAAJ0Uk5T/wDltzBKAAAAEElEQVR42mJgYGRgZAQIMAAADQAExkizYQAAAABJRU5ErkJggg==)
449 |       repeat-y 1px top; /*./image/line_dot.png*/
450 |     cursor: w-resize; /*url(./image/cur_move_v.cur), move*/
451 |     left: -10px;
452 |   }
453 |   &-content {
454 |     position: absolute;
455 |     z-index: 997;
456 |   }
457 |   &-content-mask{
458 |     position: absolute;
459 |     width: 100%;
460 |     height: 100%;
461 |     background: transparent;
462 |     z-index: 998;
463 |   }
464 | }
465 | 
466 | 
467 | 
468 | 
469 | </style>
470 | 


--------------------------------------------------------------------------------