Skip to content

Instantly share code, notes, and snippets.

@BoDonkey
Created December 5, 2022 10:32
Show Gist options
  • Save BoDonkey/6fec2310594570878ccda3350ef863b3 to your computer and use it in GitHub Desktop.
Save BoDonkey/6fec2310594570878ccda3350ef863b3 to your computer and use it in GitHub Desktop.
Vue color picker code written by chatGPT
// Define the component
Vue.component('gradient-picker', {
// The component's options go here
data() {
return {
angle: 0, // The angle of the gradient
colors: [ // An array of objects representing the gradient's colors
{
color: '#000000', // The color's hex code
start: 0, // The color's start position in the gradient (as a percentage)
end: 100 // The color's end position in the gradient (as a percentage)
}
]
}
},
template: `
<div>
<label>Angle:</label>
<input type="number" v-model="angle" />
<ul>
<li v-for="(color, index) in colors" :key="index"
@dragstart="dragStart(index)"
@dragover="dragOver"
@drop="drop(index)"
draggable="true">
<label>Color {{ index + 1 }}:</label>
<input type="color" v-model="color.color" />
<label>Start:</label>
<input type="range" min="0" max="100" v-model="color.start" />
<label>End:</label>
<input type="range" min="0" max="100" v-model="color.end" />
<button @click="removeColor(index)">Remove</button>
</li>
</ul>
<button @click="addColor">Add Color</button>
</div>
`,
methods: {
addColor() {
// Add a new color to the gradient
this.colors.push({
color: '#000000',
start: 0,
end: 100
});
},
removeColor(index) {
// Remove the color at the specified index from the gradient
this.colors.splice(index, 1);
},
dragStart(index) {
// Store the dragged color's index in the data object
this.draggedColorIndex = index;
},
dragOver(index) {
// Prevent default behavior (to allow dropping)
event.preventDefault();
},
drop(index) {
// Insert the dragged color at the new index
this.colors.splice(index, 0, this.colors.splice(this.draggedColorIndex, 1)[0]);
}
}
});
// Create a new Vue instance, and mount it to the page
new Vue({
el: '#app'
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment