You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
<template lang="pug">
|
|
|
|
|
.colorpicker
|
|
|
|
|
.colorpicker-choice(v-for='color in colors', :class='["is-" + color, color === currentColor ? "is-active" : ""]', @click='setColor(color)')
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
name: 'color-picker',
|
|
|
|
|
props: ['currentColor'],
|
|
|
|
|
data () {
|
|
|
|
|
return {
|
|
|
|
|
colors: [
|
|
|
|
|
'red',
|
|
|
|
|
'pink',
|
|
|
|
|
'purple',
|
|
|
|
|
'deep-purple',
|
|
|
|
|
'indigo',
|
|
|
|
|
'blue',
|
|
|
|
|
'light-blue',
|
|
|
|
|
'cyan',
|
|
|
|
|
'teal',
|
|
|
|
|
'green',
|
|
|
|
|
'light-green',
|
|
|
|
|
'lime',
|
|
|
|
|
'yellow',
|
|
|
|
|
'amber',
|
|
|
|
|
'orange',
|
|
|
|
|
'deep-orange',
|
|
|
|
|
'brown',
|
|
|
|
|
'grey',
|
|
|
|
|
'blue-grey'
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
setColor(color) {
|
|
|
|
|
this.currentColor = color
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
