Comments (5)
I have made this component which do quite what I want!
<template>
<div class="parent">
<div class="input-group">
<input v-model="color" class="form-control">
<a href="#" @click.prevent="showPicker = !showPicker" class="input-group-addon">
<i class="fa fa-square" :style="`color: ${color}`"></i>
</a>
</div>
<div class="picker" v-show="showPicker">
<picker v-model="color" @change-color="onChange"></picker>
</div>
</div>
</template>
<style scoped>
.parent {
position: relative;
}
.picker {
position: absolute;
top: 34px;
left: 1px;
z-index: 9999;
}
</style>
<script>
import { Chrome } from 'vue-color'
export default {
props: [ 'value' ],
data () {
return {
showPicker: false,
color: ''
}
},
components: { 'picker': Chrome },
watch: {
value (value) {
if (this.color !== value)
this.color = value
},
color () {
this.$emit('input', this.color)
}
},
methods: {
onChange (val) {
this.color = val.hex
}
}
}
</script>
The problem is I couldn't show the picker the focusin/focusout input event because when I try to chose the color the focusout event triggers and close the picker! So I put a click event on the icon which toggles it!
Any ideas?
from vue-color.
Hi there, do you want to show the picker on focus instead of click ? When you said "I put a click event" are you referring to this @click.prevent="showPicker = !showPicker"
?
have you tried @focusin="openPicker"
? Vue accepts any events with @
(v-on), I tried here on a fiddle and focusin
is only called once(in the the focusin event). You could close the picker after a color change for example
from vue-color.
Hey Cassio!
About the click event it is related to the code highlighted by you!
I have tried to you it with @focusin on the input field... but my problem is to close the picker... The only way found by me was clicking on the button beside the input!
I can't do it on the watch:color
because when I change the color the picker will close at the same time and I would want keep searching for a color!
The best approach is to close when the user clicks outside picker or when the main click lost focus! I tried also listen the focusout event on the root element but when I click to choose my color it also triggers the focusout event even when my picker is inside the root element!
So the closest to the best approach that I got is this:
<template>
<div class="input-group picker-input">
<input v-model="color" class="form-control">
<a href="#" class="input-group-addon" @click.prevent="showPicker = !showPicker">
<i class="fa fa-square" :style="`color: ${color}`"></i>
</a>
<div class="picker-fade" v-show="showPicker" @click="closePicker"></div>
<div class="picker-box" v-show="showPicker">
<picker v-model="color" @change-color="onChange"></picker>
</div>
</div>
</template>
<style scoped>
.picker-input {
position: relative;
z-index: 98;
}
.picker-box {
position: absolute;
top: 34px;
left: 1px;
z-index: 99;
}
.picker-fade {
position: fixed;
width: 100%;
height: 100%;
z-index: 97;
left: 0;
top: 0;
}
</style>
<script>
import { Swatches } from 'vue-color'
export default {
props: [ 'value' ],
data () {
return {
showPicker: false,
color: ''
}
},
components: { 'picker': Swatches },
watch: {
value (value) {
if (this.color !== value)
this.color = value
},
color () {
let vm = this
vm.$emit('input', vm.color)
}
},
methods: {
onChange (val) {
this.color = val.hex
},
openPicker () {
this.showPicker = true
},
closePicker () {
this.showPicker = false
}
}
}
</script>
from vue-color.
The way you want to close/show the picker is pretty much up to you since the pickers don't have a close button or event.
With a button to open, it's an option to use the same button to close.
Clicking outside the picker is trickier to know that, the parent or a Vuex state could know about the the children states, or even control(parent knows which child is open at the moment). Googling for the picker you mentioned, it closes one picker when other is opened, actually when other input is focused. To achieve that I would recommend this parent-child communication, parent knowing who is open and the child asks to close any other picker open on focus.
vue-color uses a lot of mousemove
or mouseup
, not focus, you could also intercept this event on pickers. Like @mouseup="doSomething"
You can check here more about the events: https://github.com/xiaokaike/vue-color/blob/master/src/components/common/Hue.vue#L105
Other possible solution is to build your own picker with separate components, if you need more customization. Here it is some of the components you can use: https://github.com/xiaokaike/vue-color/blob/master/src/index.js (you need to import them individually)
from vue-color.
@gustavobissolli maybe this will help you: https://github.com/simplesmiler/vue-clickaway
If that helps, please close the issue.
Thank you
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 8
- 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.