22
22
23
23
### Features
24
24
25
- * A lightweight, no-dependency
25
+ * A lightweight, no-dependency
26
26
* All props are reactive
27
27
* Support touch events
28
28
* Use draggable, resizable or both
@@ -98,7 +98,8 @@ Type: `Boolean`<br>
98
98
Required: ` false ` <br >
99
99
Default: ` false `
100
100
101
- Determines whether the component should be active.
101
+ Determines whether the component should be active.
102
+ 确定组件是否应处于活动状态。
102
103
103
104
``` html
104
105
<vue-drag-resize :isActive =" true" >
@@ -112,6 +113,9 @@ Default: `false`
112
113
Disable behavior of the component by clicking on it and clicking outside the component's area (isActive: true / false).
113
114
If the prop is enabled, the component is oriented only to the specified.
114
115
116
+ 通过单击组件并单击组件区域外部来禁用组件的行为(isActive:true / false)。
117
+ 如果启用了prop,则组件仅面向指定的。
118
+
115
119
``` html
116
120
<vue-drag-resize :preventActiveBehavior =" true" >
117
121
```
@@ -123,7 +127,8 @@ Default: `0`
123
127
124
128
Define the initial width of the parent element. If not specified it calculated automatically.
125
129
With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
126
-
130
+ 定义父元素的初始宽度。 如果未指定,则自动计算。
131
+ 使用此参数,您可以设置组件的边界区域,并在实时调整大小时使用它。
127
132
``` html
128
133
<vue-drag-resize :parentW =" 2000" >
129
134
```
@@ -135,6 +140,8 @@ Default: `0`
135
140
136
141
Define the initial height of the parent element. If not specified it calculated automatically.
137
142
With this parameter, you can set the bounding area for the component, and also it is used when resizing in real time.
143
+ 定义父元素的初始高度。 如果未指定,则自动计算。
144
+ 使用此参数,您可以设置组件的边界区域,并在实时调整大小时使用它。
138
145
139
146
``` html
140
147
<vue-drag-resize :parentH =" 2000" >
@@ -147,7 +154,8 @@ Default: `1`
147
154
148
155
Define the initial horizontal scale or the parent element. Same value in parent's transform: scale() css definition.
149
156
The drag/resize and the sticks' sizes will computed with this value.
150
-
157
+ 定义初始水平比例或父元素。父级的transform: scale ()css定义中的值相同。
158
+ 拖动/调整大小和杆的大小将使用该值计算。
151
159
``` html
152
160
<vue-drag-resize :parentScaleX =" 0.5" >
153
161
```
@@ -159,6 +167,9 @@ Default: `1`
159
167
160
168
Define the initial vertical scale or the parent element. Same value in parent's transform: scale() css definition.
161
169
The drag/resize and the sticks' sizes will computed with this value.
170
+ 定义初始垂直比例或父元素。父级的transform: scale ()css定义中的值相同。
171
+
172
+ 拖动/调整大小和杆的大小将使用该值计算。
162
173
163
174
``` html
164
175
<vue-drag-resize :parentScaleY =" 0.5" >
@@ -170,6 +181,8 @@ Required: `false`<br>
170
181
Default: ` true `
171
182
172
183
Determines whether the component should draggable.
184
+ 确定组件是否应可拖动。
185
+
173
186
174
187
``` html
175
188
<vue-drag-resize :isDraggable =" false" >
@@ -181,53 +194,23 @@ Required: `false`<br>
181
194
Default: ` true `
182
195
183
196
Determines whether the component should resize.
197
+ 确定组件是否应调整大小。
198
+
184
199
185
200
``` html
186
201
<vue-drag-resize :isResizable =" false" >
187
202
```
188
-
189
203
#### parentLimitation
190
204
Type: ` Boolean ` <br >
191
205
Required: ` false ` <br >
192
206
Default: ` false `
193
207
194
208
Limits the scope of the component's change to its parent size.
209
+ 将组件更改的范围限制为其父大小。
195
210
196
- ``` html
197
- <vue-drag-resize :parentLimitation =" true" >
198
- ```
199
-
200
- #### snapToGrid
201
- Type: ` Boolean ` <br >
202
- Required: ` false ` <br >
203
- Default: ` false `
204
-
205
- Determines whether the component should move and resize in predefined steps.
206
-
207
- ``` html
208
- <vue-drag-resize :snapToGrid =" true" >
209
- ```
210
-
211
- #### gridX
212
- Type: ` Number ` <br >
213
- Required: ` false ` <br >
214
- Default: ` 50 `
215
-
216
- Define the grid step size for the horizontal axis. Both sides of the component (left and right) will snap to this step.
217
-
218
- ``` html
219
- <vue-drag-resize :snapToGrid =" true" :gridX =" 20" >
220
- ```
221
-
222
- #### gridY
223
- Type: ` Number ` <br >
224
- Required: ` false ` <br >
225
- Default: ` 50 `
226
-
227
- Define the grid step size for the vertical axis. Both sides of the component (top and bottom) will snap to this step.
228
211
229
212
``` html
230
- <vue-drag-resize :snapToGrid =" true" :gridY = " 20 " >
213
+ <vue-drag-resize :parentLimitation =" true" >
231
214
```
232
215
233
216
#### aspectRatio
@@ -236,6 +219,8 @@ Required: `false`<br>
236
219
Default: ` false `
237
220
238
221
Determines whether the component should retain its proportions.
222
+ 确定组件是否应保持其比例。
223
+
239
224
240
225
``` html
241
226
<vue-drag-resize :aspectRatio =" false" >
@@ -247,6 +232,8 @@ Required: `false`<br>
247
232
Default: ` 200 `
248
233
249
234
Define the initial width of the component.
235
+ 定义组件的初始宽度。
236
+
250
237
251
238
``` html
252
239
<vue-drag-resize :w =" 200" >
@@ -258,6 +245,9 @@ Required: `false`<br>
258
245
Default: ` 200 `
259
246
260
247
Define the initial height of the component.
248
+ 定义组件的初始高度。
249
+
250
+
261
251
262
252
``` html
263
253
<vue-drag-resize :h =" 200" >
@@ -269,6 +259,9 @@ Required: `false`<br>
269
259
Default: ` 50 `
270
260
271
261
Define the minimal width of the component.
262
+ 定义组件的初始宽度。
263
+
264
+
272
265
273
266
``` html
274
267
<vue-drag-resize :minw =" 50" >
@@ -280,6 +273,8 @@ Required: `false`<br>
280
273
Default: ` 50 `
281
274
282
275
Define the minimal height of the component.
276
+ 定义组件的最小高度。
277
+
283
278
284
279
``` html
285
280
<vue-drag-resize :minh =" 50" >
@@ -291,6 +286,8 @@ Required: `false`<br>
291
286
Default: ` 0 `
292
287
293
288
Define the initial x position of the component.
289
+ 定义组件的初始X位置。
290
+
294
291
295
292
``` html
296
293
<vue-drag-resize :x =" 0" >
@@ -302,6 +299,8 @@ Required: `false`<br>
302
299
Default: ` 0 `
303
300
304
301
Define the initial y position of the component.
302
+ 定义组件的初始Y位置。
303
+
305
304
306
305
``` html
307
306
<vue-drag-resize :y =" 0" >
@@ -313,6 +312,7 @@ Required: `false`<br>
313
312
Default: ` auto `
314
313
315
314
Define the zIndex of the component.
315
+ 定义组件的zindex(层级)。
316
316
317
317
``` html
318
318
<vue-drag-resize :z =" 999" >
@@ -335,6 +335,8 @@ Required: `false`<br>
335
335
Default: ` ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'] `
336
336
337
337
Define the array of handles to restrict the element resizing:
338
+ 定义句柄数组以限制元素大小调整:
339
+
338
340
* ` tl ` - Top left
339
341
* ` tm ` - Top middle
340
342
* ` tr ` - Top right
@@ -354,6 +356,7 @@ Required: `false`<br>
354
356
Default: ` both `
355
357
356
358
Define the axis on which the element is draggable. Available values are ` x ` , ` y ` , ` both ` or ` none ` .
359
+ 定义元素可拖动的轴。 可用值为` x ` ,` y ` ,` both ` 或` none ` 。
357
360
358
361
``` html
359
362
<vue-drag-resize axis =" x" >
@@ -364,6 +367,7 @@ Type: `String`<br>
364
367
Required: ` false `
365
368
366
369
Defines the selector that should be used to drag the component.
370
+ 定义应该用于拖动组件的选择器。
367
371
368
372
``` html
369
373
<vue-drag-resize dragHandle =" .drag" >
@@ -374,6 +378,7 @@ Type: `String`<br>
374
378
Required: ` false `
375
379
376
380
Defines a selector that should be used to prevent drag initialization.
381
+ 定义应该用于防止拖动初始化的选择器。
377
382
378
383
``` html
379
384
<vue-drag-resize dragCancel =" .drag" >
@@ -402,6 +407,7 @@ Required: `false`<br>
402
407
Parameters: ` Original event handler `
403
408
404
409
Called whenever the component gets clicked.
410
+ 单击组件时调用。
405
411
406
412
``` html
407
413
<vue-drag-resize @clicked =" onActivated" >
@@ -413,6 +419,7 @@ Required: `false`<br>
413
419
Parameters: ` - `
414
420
415
421
Called whenever the component gets clicked, in order to show handles.
422
+ 单击组件时调用,以显示句柄。
416
423
417
424
``` html
418
425
<vue-drag-resize @activated =" onActivated" >
@@ -424,6 +431,8 @@ Required: `false`<br>
424
431
Parameters: ` - `
425
432
426
433
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
434
+ 每当用户单击组件外部的任何位置时调用,以便将其停用。
435
+
427
436
428
437
``` html
429
438
<vue-drag-resize @deactivated =" onDeactivated" >
@@ -433,6 +442,7 @@ Called whenever the user clicks anywhere outside the component, in order to deac
433
442
434
443
Required: ` false ` <br >
435
444
Parameters: ` object `
445
+
436
446
``` javascript
437
447
{
438
448
left: Number , // the X position of the component
@@ -443,6 +453,8 @@ Parameters: `object`
443
453
```
444
454
445
455
Called whenever the component gets resized.
456
+ 每当组件调整大小时调用。
457
+
446
458
447
459
``` html
448
460
<vue-drag-resize @resizing =" onResizing" >
@@ -462,6 +474,8 @@ Parameters: `object`
462
474
```
463
475
464
476
Called whenever the component stops getting resized.
477
+ 每当组件停止调整大小时调用。
478
+
465
479
466
480
``` html
467
481
<vue-drag-resize @resizestop =" onResizstop" >
@@ -481,6 +495,8 @@ Parameters: `object`
481
495
```
482
496
483
497
Called whenever the component gets dragged.
498
+ 每当拖动组件时调用。
499
+
484
500
485
501
``` html
486
502
<vue-drag-resize @dragging =" onDragging" >
@@ -501,6 +517,8 @@ Parameters: `object`
501
517
502
518
503
519
Called whenever the component stops getting dragged.
520
+ 每当组件停止拖动时调用。
521
+
504
522
505
523
``` html
506
524
<vue-drag-resize @dragstop =" onDragstop" >
0 commit comments