71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
<template>
|
|
<div>
|
|
<h2>Palettes</h2>
|
|
|
|
<SelectO
|
|
name="Scale"
|
|
:list="palettesList"
|
|
:selectedItem="paletteSelected"
|
|
v-model="paletteSelected"
|
|
@change="onChange(paletteSelected)"
|
|
|
|
></SelectO>
|
|
<div>
|
|
<input type="text" v-model="count" size="1"/>
|
|
{{paletteSelected}}
|
|
</div>
|
|
|
|
<div v-for="color in palettes" :key="color">
|
|
<div :style="{backgroundColor: color}">
|
|
{{color}}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import SelectO from './SelectO'
|
|
|
|
import {getPalette, palettesList} from '../../libs/thpalette'
|
|
|
|
export default {
|
|
name: "Palette",
|
|
components: {
|
|
SelectO,
|
|
},
|
|
data() {
|
|
return {
|
|
count: 10,
|
|
palettesList: palettesList,
|
|
paletteSelected: palettesList[0]
|
|
}
|
|
},
|
|
watch:{
|
|
paletteSelected: function (neww){
|
|
console.log(' nn',neww)
|
|
// this.$emit('input', neww)
|
|
|
|
this.onChange(neww)
|
|
}
|
|
},
|
|
computed: {
|
|
palettes() {
|
|
return getPalette(this.paletteSelected, this.count)
|
|
}
|
|
},
|
|
methods: {
|
|
onChange(selectedItem) {
|
|
//if (selectedItem === this.paletteSelected) return
|
|
console.log('select onChange', selectedItem)
|
|
this.$emit('input', selectedItem)
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |