├── README.md
└── index.vue


/README.md:
--------------------------------------------------------------------------------
 1 | # vue-resize-box
 2 | 
 3 | ## 局部注册
 4 | ### 导入组件： import ResizeBox from 'vue-resize-box'
 5 | ### 注册组件：components: {[ResizeBox.name]: ResizeBox}
 6 | ### 使用组件：\<ResizeBox/\>xxx\</ResizeBox\>
 7 | 
 8 | ## 全局注册
 9 | ### 下载组件：npm install vue-resize-box
10 | ### 导入组件：import ResizeBox from 'vue-resize-box'
11 | ### 注册组件：Vue.use(ResizeBox)
12 | ### 使用组件：\<ResizeBox/\>xxx\</ResizeBox\>
13 | 
14 | ## Attributes
15 | ### | 参数 | 说明 | 类型 | 可选值 | 默认值 |
16 | ### | min | 最小宽高，单位px | object | width、height | 0，即不限制 |
17 | ### | max | 最大宽高，单位px | object | width、height | 0，即不限制 |
18 | ### | move | 移动手柄配置 | object | t、l、r、b、tl、tr、bl、br | true，即全可用 |
19 | ### | speed | 移动速度倍数配置 | number | >=1 | 2 |
20 | ### | disabled | 是否禁用 | object | true、false | false |
21 | 


--------------------------------------------------------------------------------
/index.vue:
--------------------------------------------------------------------------------
  1 | <style scoped>
  2 |   .resize-box {
  3 |     position: relative;
  4 |     display: table;
  5 |     border: 1px solid #ccc;
  6 |   }
  7 |   .disabled .line,
  8 |   .disabled .block {
  9 |     cursor: not-allowed;
 10 |   }
 11 |   .line,
 12 |   .block {
 13 |     position: absolute;
 14 |     margin: auto;
 15 |   }
 16 |   .line-t {
 17 |     top: -5px;
 18 |     left: 0;
 19 |     right: 0;
 20 |     width: 100%;
 21 |     height: 10px;
 22 |     cursor: s-resize;
 23 |   }
 24 |   .line-l {
 25 |     top: 0;
 26 |     left: -5px;
 27 |     bottom: 0;
 28 |     width: 10px;
 29 |     height: 100%;
 30 |     cursor: w-resize;
 31 |   }
 32 |   .line-r {
 33 |     top: 0;
 34 |     right: -5px;
 35 |     bottom: 0;
 36 |     width: 10px;
 37 |     height: 100%;
 38 |     cursor: w-resize;
 39 |   }
 40 |   .line-b {
 41 |     left: 0;
 42 |     right: 0;
 43 |     bottom: -5px;
 44 |     width: 100%;
 45 |     height: 10px;
 46 |     cursor: s-resize;
 47 |   }
 48 |   .block {
 49 |     width: 10px;
 50 |     height: 10px;
 51 |   }
 52 |   .block-tl {
 53 |     top: -5px;
 54 |     left: -5px;
 55 |     cursor: se-resize;
 56 |   }
 57 |   .block-tr {
 58 |     top: -5px;
 59 |     right: -5px;
 60 |     cursor: ne-resize;
 61 |   }
 62 |   .block-bl {
 63 |     bottom: -5px;
 64 |     left: -5px;
 65 |     cursor: ne-resize;
 66 |   }
 67 |   .block-br {
 68 |     bottom: -5px;
 69 |     right: -5px;
 70 |     cursor: se-resize;
 71 |   }
 72 | </style>
 73 | 
 74 | <template>
 75 |   <div :class="['resize-box', {disabled: disabled}]">
 76 |     <div
 77 |       v-if="move.t"
 78 |       class="line line-t"
 79 |       data-type="t"
 80 |       @mousedown.prevent="mousedownHanlder"
 81 |     />
 82 |     <div
 83 |       v-if="move.l"
 84 |       class="line line-l"
 85 |       data-type="l"
 86 |       @mousedown.prevent="mousedownHanlder"
 87 |     />
 88 |     <div
 89 |       v-if="move.r"
 90 |       class="line line-r"
 91 |       data-type="r"
 92 |       @mousedown.prevent="mousedownHanlder"
 93 |     />
 94 |     <div
 95 |       v-if="move.b"
 96 |       class="line line-b"
 97 |       data-type="b"
 98 |       @mousedown.prevent="mousedownHanlder"
 99 |     />
100 |     <div
101 |       v-if="move.tl"
102 |       class="block block-tl"
103 |       data-type="tl"
104 |       @mousedown.prevent="mousedownHanlder"
105 |     />
106 |     <div
107 |       v-if="move.tr"
108 |       class="block block-tr"
109 |       data-type="tr"
110 |       @mousedown.prevent="mousedownHanlder"
111 |     />
112 |     <div
113 |       v-if="move.bl"
114 |       class="block block-bl"
115 |       data-type="bl"
116 |       @mousedown.prevent="mousedownHanlder"
117 |     />
118 |     <div
119 |       v-if="move.br"
120 |       class="block block-br"
121 |       data-type="br"
122 |       @mousedown.prevent="mousedownHanlder"
123 |     />
124 |     <slot />
125 |   </div>
126 | </template>
127 | 
128 | <script>
129 |   export default {
130 |     name: 'ResizeBox',
131 |     props: {
132 |       max: {
133 |         type: Object,
134 |         default: function () {
135 |           return {
136 |             width: 0,
137 |             height: 0
138 |           }
139 |         },
140 |         validator: function (obj) {
141 |           if (typeof obj.width === 'number' || typeof obj.height === 'number') {
142 |             if (obj.width >= 0 && obj.height >= 0) {
143 |               return true
144 |             } else {
145 |               return false
146 |             }
147 |           } else {
148 |             return false
149 |           }
150 |         }
151 |       },
152 |       min: {
153 |         type: Object,
154 |         default: () => {
155 |           return {
156 |             width: 0,
157 |             height: 0
158 |           }
159 |         },
160 |         validator: function (obj) {
161 |           if (typeof obj.width === 'number' || typeof obj.height === 'number') {
162 |             if (obj.width >= 0 && obj.height >= 0) {
163 |               return true
164 |             } else {
165 |               return false
166 |             }
167 |           } else {
168 |             return false
169 |           }
170 |         }
171 |       },
172 |       move: {
173 |         type: Object,
174 |         default: () => {
175 |           return {
176 |             t: true,
177 |             l: true,
178 |             r: true,
179 |             b: true,
180 |             tl: true,
181 |             tr: true,
182 |             bl: true,
183 |             br: true
184 |           }
185 |         },
186 |         validator: function (obj) {
187 |           if (
188 |             typeof obj.t === 'boolean'
189 |             || typeof obj.l === 'boolean'
190 |             || typeof obj.r === 'boolean'
191 |             || typeof obj.b === 'boolean'
192 |             || typeof obj.tl === 'boolean'
193 |             || typeof obj.tr === 'boolean'
194 |             || typeof obj.bl === 'boolean'
195 |             || typeof obj.br === 'boolean'
196 |           ) {
197 |             return true
198 |           } else {
199 |             return false
200 |           }
201 |         }
202 |       },
203 |       speed: {
204 |         type: Number,
205 |         default: 2,
206 |         validator: function (num) {
207 |           return num >= 1
208 |         }
209 |       },
210 |       disabled: {
211 |         type: Boolean,
212 |         default: false
213 |       }
214 |     },
215 |     created () {
216 |       document.body.addEventListener('mouseup', this.mouseupHanlder)
217 |     },
218 |     destroyed () {
219 |       document.body.removeEventListener('mouseup', this.mouseupHanlder)
220 |     },
221 |     methods: {
222 |       getStyle (element) {
223 |         if (element.currentStyle) {
224 |           return element.currentStyle
225 |         } else {
226 |           return getComputedStyle(element, false)
227 |         }
228 |       },
229 |       mousedownHanlder (event) {
230 |         let { cursor } = this.getStyle(event.target)
231 |         this.dataType = event.target.getAttribute('data-type')
232 |         this.event = event
233 |         document.body.addEventListener('mousemove', this.mousemoveHandler)
234 |         document.body.style.cursor = cursor
235 |       },
236 |       mouseupHanlder () {
237 |         document.body.removeEventListener('mousemove', this.mousemoveHandler)
238 |         document.body.style.cursor = 'default'
239 |       },
240 |       mousemoveHandler (event) {
241 |         if (this.disabled) {
242 |           return
243 |         }
244 |         let { width, height } = this.getStyle(this.$el)
245 |         width = parseInt(width)
246 |         height = parseInt(height)
247 |         this[this.dataType]({ event, width, height })
248 |         this.event = event
249 |       },
250 |       t ({ event, height }) {
251 |         if (event.y > this.event.y) {
252 |           this.$el.style.height = this.min.height
253 |             ? `${ Math.max(this.min.height, height - (event.y - this.event.y) * this.speed) }px`
254 |             : `${ height - (event.y - this.event.y) * this.speed }px`
255 |         } else {
256 |           this.$el.style.height = this.max.height
257 |             ? `${ Math.min(this.max.height, height + (this.event.y - event.y) * this.speed) }px`
258 |             : `${ height + (this.event.y - event.y) * this.speed }px`
259 |         }
260 |       },
261 |       l ({ event, width }) {
262 |         if (event.x > this.event.x) {
263 |           this.$el.style.width = this.min.width
264 |             ? `${ Math.max(this.min.width, width - (event.x - this.event.x) * this.speed)}px`
265 |             : `${ width - (event.x - this.event.x) * this.speed }px`
266 |         } else {
267 |           this.$el.style.width = this.max.width
268 |             ? `${ Math.min(this.max.width, width + (this.event.x - event.x) * this.speed) }px`
269 |             : `${ width + (this.event.x - event.x) * this.speed }px`
270 |         }
271 |       },
272 |       r ({ event, width }) {
273 |         if (event.x > this.event.x) {
274 |           this.$el.style.width = this.max.width
275 |             ? `${ Math.min(this.max.width, width + (event.x - this.event.x) * this.speed) }px`
276 |             : `${ width + (event.x - this.event.x) * this.speed }px`
277 |         } else {
278 |           this.$el.style.width = this.min.width
279 |             ? `${ Math.max(this.min.width, width - (this.event.x - event.x) * this.speed) }px`
280 |             : `${ width - (this.event.x - event.x) * this.speed }px`
281 |         }
282 |       },
283 |       b ({ event, height }) {
284 |         if (event.y > this.event.y) {
285 |           this.$el.style.height = this.max.height
286 |             ? `${ Math.min(this.max.height, height + (event.y - this.event.y) * this.speed) }px`
287 |             : `${ height + (event.y - this.event.y) * this.speed }px`
288 |         } else {
289 |           this.$el.style.height = this.min.height
290 |             ? `${ Math.max(this.min.height, height - (this.event.y - event.y) * this.speed) }px`
291 |             : `${ height - (this.event.y - event.y) * this.speed }px`
292 |         }
293 |       },
294 |       tl ({ event, width, height }) {
295 |         this.t({ event, height })
296 |         this.l({ event, width})
297 |       },
298 |       tr ({ event, width, height }) {
299 |         this.t({ event, height })
300 |         this.r({ event, width })
301 |       },
302 |       bl ({ event, width, height }) {
303 |         this.b({ event, height })
304 |         this.l({ event, width })
305 |       },
306 |       br ({ event, width, height }) {
307 |         this.b({ event, height })
308 |         this.r({ event, width })
309 |       }
310 |     }
311 |   }
312 | </script>
313 | 


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