Comments (7)
Looks like I found a solution!
Color picker will not respond if you change any color model other than hex and opacity. If I change color like this in my methods it will update the color picker properly:
<input
type="text"
v-model="colorValue"
v-on:keyup="updateColor" >
methods: {
updateColor() {
let newAlpha = 1
let newColor = {
hex: this.colorValue,
a: newAlpha
}
this.colors = newColor
}
}
Again colorValue (from the input field) should be in HEX format #aabbcc. In my app I use RGBA, so it requires an extra conversion from RGBA to HEX to make it work (I don't show it here for simplicity).
Good luck with your projects!
from vue-color.
Looking forward to have this feature as well.
from vue-color.
Is there any way to do this? I am making some forms with color input from the user, and it seems there is no way to set the color from the outside. Very good plugin, but this is just strange.
from vue-color.
Same problem here...
from vue-color.
@xiaokaike can you please introduce publicly accessible colorChange method or any other way for us to hard refresh the current color values? Something similar to what you have in EditableInput.vue. Any help or hack in this direction will greatly help us.
Thank you!
from vue-color.
If it's not possible or hard to do, can we at least have component re-fresh method? This way we can at least re-render component with updated color form outside.
from vue-color.
Actually, when initialize colors
, can just pass hex
or rgba
or hsl
or hsv
:
new Vue({
el: '#app',
components: {
'photoshop-picker': photoshop
},
data () {
return {
colors: {
h: 50,
s: 0.5,
l: 0.2
}
}
},
})
or
new Vue({
el: '#app',
components: {
'photoshop-picker': photoshop
},
data () {
return {
colors: '#ff0000'
}
},
})
etc.
Then you can also update hsl
and it will re-render component(s).
updateColor() {
this.colors = {
h: 100,
s: 0.5,
l: 0.2
}
}
Please be aware that you must change the whole colors
. It would not take any effect by this.colors.h = 100
.
I will update the README in the next release.
Thanks.
from vue-color.
Related Issues (20)
- Issue in Saturation component : Cannot read property 'clientWidth' of undefined HOT 2
- Auto detect fieldsIndex based on input color format
- append to body feature
- Usage Docs not clear HOT 2
- Set color "programmatically"? HOT 1
- How can I use this in Vue3? HOT 3
- Running inside a Web Component / Shadow DOM HOT 1
- How change default saturation to maximal value to correct working of "hue" slider HOT 5
- ETA on v3 release? HOT 4
- Selection doesn't update with custom color palette
- Transparency as percentage
- A dark theme prop would be great
- Added title when hovering with preset color
- Set a color with v-if
- This library is incompatible with Vite
- Can you add a color absorption function?
- Add the ability to select the "Lab" color value?
- 报错Cannot read properties of undefined (reading 'h')" HOT 6
- When the plugin is introduced, the coordinates of the mouse and the color block are shifted by n pixels HOT 1
- hsl 模式下的一个小问题 HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vue-color.