Vue Resizable Props
area
You can use a selector string, jQuery object, or DOM element to specify this property:
String
JavaScript- area: '.test-div'
jQuery object
JavaScript- area: $('.test-div')
DOM element
JavaScript- area: $('.test-div')[0]
height
This property accepts a value of one of the following types:
Number
The height in pixels.String
A CSS-accepted measurement of height. For example,"55px"
,"20vh"
,"80%"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
keepAspectRatio
When this property value is true, you can use a corner handle to resize the UI component proportionally.
Set this property to false to enable free-form resize:
- <template>
- <DxResizable ...
- :keep-aspect-ratio="false"
- />
- </template>
- <script>
- // ...
- </script>
onDisposing
A function that is executed before the UI component is disposed of.
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
onInitialized
Name | Type | Description |
---|---|---|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
- <template>
- <div>
- <DxResizable ...
- @initialized="saveInstance">
- </DxResizable>
- </div>
- </template>
- <script>
- import DxResizable from 'devextreme-vue/resizable';
- export default {
- components: {
- DxResizable
- },
- data: function() {
- return {
- resizableInstance: null
- };
- },
- methods: {
- saveInstance: function(e) {
- this.resizableInstance = e.component;
- }
- }
- };
- </script>
- <template>
- <div>
- <DxResizable ...
- @initialized="saveInstance">
- </DxResizable>
- </div>
- </template>
- <script setup>
- import DxResizable from 'devextreme-vue/resizable';
- let resizableInstance = null;
- const saveInstance = (e) => {
- resizableInstance = e.component;
- }
- </script>
See Also
- Get a UI component Instance in Vue
onOptionChanged
Name | Type | Description |
---|---|---|
value | any |
The modified property's new value. |
previousValue | any |
The UI component's previous value. |
name |
The modified property if it belongs to the first level. Otherwise, the first-level property it is nested into. |
|
fullName |
The path to the modified property that includes all parent properties. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
component |
The UI component's instance. |
The following example shows how to subscribe to component property changes:
- <template>
- <DxResizable ...
- @option-changed="handlePropertyChange"
- />
- </template>
- <script>
- import 'devextreme/dist/css/dx.light.css';
- import DxResizable from 'devextreme-vue/resizable';
- export default {
- components: {
- DxResizable
- },
- // ...
- methods: {
- handlePropertyChange: function(e) {
- if(e.name === "changedProperty") {
- // handle the property change here
- }
- }
- }
- }
- </script>
onResize
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
height |
The UI component's current height. |
|
width |
The UI component's current width. |
onResizeEnd
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
height |
The current UI component height. |
|
width |
The current UI component width. |
onResizeStart
Name | Type | Description |
---|---|---|
component |
The UI component's instance. |
|
element |
The UI component's container. It is an HTML Element or a jQuery Element when you use jQuery. |
|
event | Event (jQuery or EventObject) |
The event that caused the function to execute. It is an EventObject or a jQuery.Event when you use jQuery. |
height |
The UI component's current height. |
|
width |
The UI component's current width. |
rtlEnabled
When this property is set to true, the UI component text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.
- DevExpress.config({
- rtlEnabled: true
- });
width
This property accepts a value of one of the following types:
Number
The width in pixels.String
A CSS-accepted measurement of width. For example,"55px"
,"20vw"
,"80%"
,"auto"
,"inherit"
.Function (deprecated since v21.2)
Refer to the W0017 warning description for information on how you can migrate to viewport units.
If you have technical questions, please create a support ticket in the DevExpress Support Center.