nikitasnv / vue-resizable Goto Github PK
View Code? Open in Web Editor NEWVueResizable component
Home Page: https://nikitasnv.github.io/vue-resizable/
License: MIT License
VueResizable component
Home Page: https://nikitasnv.github.io/vue-resizable/
License: MIT License
Dose it support scale and grid scene?
When I build a project (using Vite), it breaks because of:
[commonjs] Unexpected token (1:7147) in .../node_modules/vue-resizable/dist/vue-resizable.umd.min.js
I notice that on previous versions, there was no such file, and the dist file was just main.js
, and this problem did not occur.
Hi, I'm having trouble getting the initial with right when I start dragging:
Here's a demo with the latest version of the library:
https://codesandbox.io/s/vue-template-forked-88o3g?file=/src/App.vue
When you try to drag the div from the right, the width received by the resize:start handler is the full width of the parent, instead of its own width.
I wanted to let this suggestion use Web API Animation responsible was to make the transformation of the possession of the elements.
https://developer.mozilla.org/en-US/docs/Web/API/Animation
https://developer.mozilla.org/en-US/docs/Web/API/Animation/replaceState#Examples
In a Loop, I'm using multiple VueResizable components. if I drop one component to another component I want to get the both component info. How can I do that?
I am not able to create two windows, when the windows seem to be moving together.
would there be any way to solve this ?
@nikitasnv I am trying to use this component for a dashboard, but my present needs require me to use width in percentages. Is it possible to do this? The following is how I tried creating a component but the issue arises when I try setting a certain width in percentage by selecting the value from the dropdown.
<template>
<vue-resizable
:min-width="320"
:width="containerWidth + '%'"
:active="['r']"
>
<div class="resizable-content">
<pre>{{ containerWidth }}</pre>
<select v-model="containerWidth">
<option :value="75">75%</option>
<option :value="50">50%</option>
</select>
<slot></slot>
</div>
</vue-resizable>
</template>
<script>
import VueResizable from 'vue-resizable'
export default ({
name: 'resizeableContainer',
components: {VueResizable},
props: ['width'],
data () {
return {
containerWidth: this.width
}
}
})
</script>
<style scoped>
.resizable-content {
width: 100%;
height: 100%;
background-color: aqua;
}
</style>
How can I dynamically add to a template? Please help to understand
When i'm only activating 'r'
I would expect that only the width of an html element would change.
But the left, top and height are also set.
I've even tried this:
<vue-resizable class="folders-wrapper d-flex" :width="300" :active="['r']" fit-parent :max-width="500" :min-width="100" :disable-attributes="['l', 't', 'h']">
But then the attributes are changed as wel.
The downside of this is that i can't set an element to have a height: auto
Hi! Would you be open to adding an option to resizing the element to the size of its parent when handlingUp?
Something like:
if (this.resizeToParentSize) this.w = this.$el.parentElement.clientWidth;
In my case I need to calculate the size on the elements parent as a percentage (like the full width is 24h and I want it to be resizable for each hour or half an hour).
On the parent I have a div like this:
<div :style="getStyle(data)"></div>
And this getStyle is calculating the width as a percentage basing on the data.
I am getting height issue resizable div have child with height greater that resizable div but i want same height for resizable div as child.
I tried several similar components and only this fit all my needs.
By it missing one feature which I also need - lock aspect ratio prop.
It would be great to not have default values on width and height to adapt to parent/children.
Hi thank you for sharing your wonderful job.
I'm using it on a component editor, it will not work as expected, because I need to switch beeting editing and viewer mode.
Resize functionality is working as expected: By setting an empty array to the "active" prop and it disabled resizing.
It seems that you are listening for changes on dragSelector and calling setupDragElements properly, although you are not removing previously added "drag-el" class.
It means that, once enabled, drag functionality can not be disabled by reseting the dragSelector to undefined.
//fixed version:
setupDragElements(selector) {
let nodeList = this.$el.getElementsByClassName("drag-el");
while (nodeList.length) nodeList[0].classList.remove("drag-el");
nodeList = this.$el.querySelectorAll(selector);
nodeList.forEach((el) => {
el.classList.add("drag-el");
});
this.dragElements = Array.prototype.slice.call(nodeList);
},
Thank you once again for sharing it
When set as integer it works perfect
but when I want to set in px
or %
it shifts up and left.
I think this is due to this bunch of code in mounted
function
./node_modules/vue-resizable/dist/main.js
"number" != typeof this.left && (this.l = this.$el.offsetLeft - this.$el.parentElement.offsetLeft),
"number" != typeof this.top && (this.t = this.$el.offsetTop - this.$el.parentElement.offsetTop),
Or may be you laid down some logic in this?
When I installed, it throwed below error:
Uncaught TypeError: Cannot read properties of undefined (reading '_c')
Hi, is this package supported in vue 3?
When I tried in vue 3, I got error.
if you relpy me as soon as possible, It will be great
Thank you
If I click the Mouse right button ( Context Menu ) It fires drag:start
and drag:end
events. how to prevent this?
Hi,
your plugin is awesome and i have an idea how to make it even more interesting:
What about adding steps for snapping to a grid like layout.
So if you move, the div will always snap to a next step which you can define.
Like every 10, 20, 30 pixels ... or percent steps ...
Best regards, Yuri
online
right maxWidth is invalid,left is out of control
Suppose I'm resizing a component and when resize:end in some condition I need to restore back where it was previously.
I used this package on my VueJs project.
Today when I want to deploy my app, but now I have a white page and nothing seems to load.
I need to deploy some features, some help would be welcomed ^^
Here is the error I have via the console.
Not sure what the issue is but i get the above error thrown when trying to include the package. It has been setup basically the same way as your demo. Currently using vue2
Hi, It doesn't support mobile touch events
Are all those dependencies non-dev dependencies?
I'm guessing none of those are and vue could be a pear dependency
"dependencies": {
"@babel/core": "^7.9.6",
"@babel/preset-env": "^7.9.6",
"cross-env": "^7.0.2",
"vue": "^2.6.11",
"webpack": "^4.43.0"
},
I would like to use percentage, viewports, etc. as value of the width, height, etc., but only handles values in pixels.
Hello @nikitasnv
I am using two vue-resizable inside each other which means I want to drag parent as well as child.
The only problem I am facing is when I am dragging the child element the parent is also dragging.
I have created the example- https://codesandbox.io/s/vue-template-forked-7kyi9?file=/src/App.vue
Is there any way that If a child is dragging up then the parent can not drag?
I am using Vue 3, and I get an error. Is Vue 3 already supported?
On some Macs, our users are getting
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: <our project>@0.0.1
npm ERR! Found: [email protected]
npm ERR! node_modules/vue
npm ERR! vue@“2.6.12” from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@“3.x” from [email protected]
npm ERR! node_modules/vue-resizable
npm ERR! vue-resizable@“^2.0.5” from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!```
We currently cannot upgrade to Vue 3.0 on our project at this time. We also cannot definitively re-create this on all machines, but we have noticed it only happens on the Mac (w/XCode) systems. Does anyone have any insights?
Is possible disable dragging?
I was wondering if there is plans on maybe adding the ability to set the max-width relative to the view-port.
Use case is as follows (example):
calc(100vw * 2 / 3)
or simplified 66vw
)resizable-component
element or the parent, but no luck.What are your opinions on the above?
Thank you so much in advance
Thanks for such a useful component.
It seems it has an issue with right to left containers. Just add 'direction:rtl' to container styles to check it out.
I think it is not a big deal it probably can be fixed by switching some right with left or something like that if the container is rtl.
(0 , t.withScopeId) is not a function
Hi,
I've added a textarea/ckeditor to a moving div, how do I block events from the drag so I can write text?
Is there any prop for aspect ratio? I want to resize the element but keep the aspect ratio.
The latest update, which was the "version": "2.0.5", makes the dragging not work. I had to use an older version "vue-resizable": "^1.2.5" to make it to work.
I am using Vue 2 and Nuxt by the way.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.