Hello, I’m using Vue F7
In my page a have a custom component that I want to create based on colorpicker.
Its a list of persons, and I want a Circular field to contain the selected color.
The color should be changed by clicking in that circular “.dot” class element because i want to hide de text input field.
The thing is when I click the “.dot” element, it will open multiple colorpickers! I undestand, because the targetEl = “.dot” and because I have a list of colorpickers, it will open all of them
My question is how can i make targetEl Target this component only instance. I tried using $refs but with no luck!
How can we do this? Also, in the methods, how can I target the colorpicker instance.
Thanks,.
Why refs don’t work, this should work: targetEl: $refs.dot
If you do not need the show input element, then you don’t need to use that component, you can just use create color picker using API in component’s mounted method using f7.colorPicker.create Color Picker | Framework7 Documentation
Right they don’t … that’s the issue, because I don’t want to manipulate the DOM with selectors.
You can test this easy.
color-picker2.vue:
<script>
import { f7, ref } from 'framework7-vue';
export default {
data(){
return {}
},
props: {
color: {
default:{hex: "#60FC30"}
},
},
mounted() {},
methods: {},
};
</script>
<template>
<div ref="dot" class="dot" :style="{'background-color':color.hex}" ></div>
<f7-list-input
v-bind="$attrs"
input="false"
type="colorpicker"
v-model:value="color"
:color-picker-params="{
modules: [
'palette'
],
openIn: 'auto',
targetEl:$refs.dot,
palette: [
[
'#FFEBEE',
'#FFCDD2',
'#EF9A9A',
'#E57373',
'#EF5350',
'#F44336',
'#E53935',
'#D32F2F',
'#C62828',
'#B71C1C',
],
]
}"
>
</f7-list-input>
</template>
<style lang="css" scoped>
.dot {
height: 25px;
width: 25px;
background-color: #bbb;
border-radius: 50%;
display:inline-block;
}
</style>
Then in any page:
export default {
components: { ColorPicker2 },
data() {
...
<ColorPicker2 ></ColorPicker2>
