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" >
@@ -324,6 +324,8 @@ Required: `false`<br>
324
324
Default: ` ['tl', 'tm', 'tr', 'mr', 'br', 'bm', 'bl', 'ml'] `
325
325
326
326
Define the array of handles to restrict the element resizing:
327
+ 定义句柄数组以限制元素大小调整:
328
+
327
329
* ` tl ` - Top left
328
330
* ` tm ` - Top middle
329
331
* ` tr ` - Top right
@@ -343,6 +345,7 @@ Required: `false`<br>
343
345
Default: ` both `
344
346
345
347
Define the axis on which the element is draggable. Available values are ` x ` , ` y ` , ` both ` or ` none ` .
348
+ 定义元素可拖动的轴。 可用值为` x ` ,` y ` ,` both ` 或` none ` 。
346
349
347
350
``` html
348
351
<vue-drag-resize axis =" x" >
@@ -353,6 +356,7 @@ Type: `String`<br>
353
356
Required: ` false `
354
357
355
358
Defines the selector that should be used to drag the component.
359
+ 定义应该用于拖动组件的选择器。
356
360
357
361
``` html
358
362
<vue-drag-resize dragHandle =" .drag" >
@@ -363,6 +367,7 @@ Type: `String`<br>
363
367
Required: ` false `
364
368
365
369
Defines a selector that should be used to prevent drag initialization.
370
+ 定义应该用于防止拖动初始化的选择器。
366
371
367
372
``` html
368
373
<vue-drag-resize dragCancel =" .drag" >
@@ -382,6 +387,7 @@ Required: `false`<br>
382
387
Parameters: ` Original event handler `
383
388
384
389
Called whenever the component gets clicked.
390
+ 单击组件时调用。
385
391
386
392
``` html
387
393
<vue-drag-resize @clicked =" onActivated" >
@@ -393,6 +399,7 @@ Required: `false`<br>
393
399
Parameters: ` - `
394
400
395
401
Called whenever the component gets clicked, in order to show handles.
402
+ 单击组件时调用,以显示句柄。
396
403
397
404
``` html
398
405
<vue-drag-resize @activated =" onActivated" >
@@ -404,6 +411,8 @@ Required: `false`<br>
404
411
Parameters: ` - `
405
412
406
413
Called whenever the user clicks anywhere outside the component, in order to deactivate it.
414
+ 每当用户单击组件外部的任何位置时调用,以便将其停用。
415
+
407
416
408
417
``` html
409
418
<vue-drag-resize @deactivated =" onDeactivated" >
@@ -413,6 +422,7 @@ Called whenever the user clicks anywhere outside the component, in order to deac
413
422
414
423
Required: ` false ` <br >
415
424
Parameters: ` object `
425
+
416
426
``` javascript
417
427
{
418
428
left: Number , // the X position of the component
@@ -423,6 +433,8 @@ Parameters: `object`
423
433
```
424
434
425
435
Called whenever the component gets resized.
436
+ 每当组件调整大小时调用。
437
+
426
438
427
439
``` html
428
440
<vue-drag-resize @resizing =" onResizing" >
@@ -442,6 +454,8 @@ Parameters: `object`
442
454
```
443
455
444
456
Called whenever the component stops getting resized.
457
+ 每当组件停止调整大小时调用。
458
+
445
459
446
460
``` html
447
461
<vue-drag-resize @resizestop =" onResizstop" >
@@ -461,6 +475,8 @@ Parameters: `object`
461
475
```
462
476
463
477
Called whenever the component gets dragged.
478
+ 每当拖动组件时调用。
479
+
464
480
465
481
``` html
466
482
<vue-drag-resize @dragging =" onDragging" >
@@ -481,6 +497,8 @@ Parameters: `object`
481
497
482
498
483
499
Called whenever the component stops getting dragged.
500
+ 每当组件停止拖动时调用。
501
+
484
502
485
503
``` html
486
504
<vue-drag-resize @dragstop =" onDragstop" >
0 commit comments