Vue color picker
Take a look at this example in CodeSandbox: working example
Color picker component
<template> <input ref="color" /> </template> <script> import jSuites from "jsuites"; import "jsuites/dist/jsuites.css"; export default { name: "Color", props: { properties: Object, }, mounted: function () { jSuites.color(this.$refs.color, this.$props.properties); }, }; </script>
Component usage
<template> <div id="app"> <h3>Vue color picker example</h3> <Color v-bind:properties="{ value: value, closeOnChange: true, onchange: handleColorChange, }" /> <h3>New value is: {{ value }}</h3> </div> </template> <script> import Color from "./components/Color"; export default { name: "App", components: { Color, }, data: function () { return { value: "", }; }, methods: { setValue: function (newValue) { this.value = newValue; }, handleColorChange: function (el, newValue) { this.setValue(newValue); }, }, }; </script>