MattB
3 months ago
315
0
Vue

How to include a color picker in vue

Posted 3 months ago by MattB

I am trying to make a form with 2 inputs for colours. Hoping to use a built in vuetify color picker but when I use the below code, the dialogue just opens a blank grey screen. Not sure what I have done wrong:

<v-dialog v-model="dialog" max-width="700">
            <template v-slot:append>
                <v-menu
                    v-model="menu"
                    top
                    nudge-bottom="105"
                    nudge-left="16"
                    :close-on-content-click="false"
                >
                    <template v-slot:activator="{on}">
                        <div :style="swatchStyle" v-on="on" />
                    </template>
                    <v-card>
                        <v-form v-model="valid">
                            <v-container>
                                <v-row>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="gradname"
                                            label="Name of Gradient"
                                        ></v-text-field>
                                    </v-col>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="color1"
                                            label="First Color"
                                        ></v-text-field>
                                        <v-color-picker v-model="color" flat />
                                    </v-col>
                                    <v-col cols="12" md="4">
                                        <v-text-field
                                            v-model="color2"
                                            label="Second Color"
                                        ></v-text-field>
                                    </v-col>
                                </v-row>
                            </v-container>
                        </v-form>
                    </v-card>
                </v-menu>
            </template>
        </v-dialog>

And here's the script with some dummy data:

<script>
export default {
    data() {
        return {
            dialog: false,
            color: '#1976D2FF',
            mask: '!#XXXXXXXX',
            menu: false,
            cards: [
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#b3b3ff', color2: '#0000e6'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#0d0d0d', color2: '#999999'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: '#ff0000', color2: '#ffff00'},
                {name: 'Name of thing', color1: 'green', color2: 'red'},
            ],
        };
    },
    computed: {
        swatchStyle() {
            const {color, menu} = this;
            return {
                backgroundColor: color,
                cursor: 'pointer',
                height: '30px',
                width: '30px',
                borderRadius: menu ? '50%' : '4px',
                transition: 'border-radius 200ms ease-in-out',
            };
        },
        backgroundImage: () => (color1, color2) => {
            let bgImage =
                'linear-gradient(to top right, ' + color1 + ',' + color2 + ')';
            return bgImage;
        },
    },
};
</script>

Please sign in or create an account to participate in this conversation.