mirror of https://github.com/nocodb/nocodb
5 changed files with 99 additions and 7 deletions
@ -0,0 +1,72 @@
|
||||
<template> |
||||
<div class="d-100 mb-5"> |
||||
<div |
||||
class="rounded pa-5 mb-2 d-100 text-center caption" |
||||
:style="{background:value}" |
||||
@click="generateGradient" |
||||
> |
||||
Click to change gradient |
||||
</div> |
||||
<input v-model="color1" :style="{background:color1} " type="color"> |
||||
<input v-model="color2" :style="{background:color2} " type="color"> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'GradientGenerator', |
||||
props: { |
||||
value: [String] |
||||
}, |
||||
data: () => ({ |
||||
angle: 0 |
||||
}), |
||||
computed: { |
||||
color1: { |
||||
get() { |
||||
return this.value && this.value.split(',')[1] |
||||
}, |
||||
set(v) { |
||||
const gradient = 'linear-gradient(' + this.angle + 'deg, ' + v + ', ' + this.color2 + ')' |
||||
this.$emit('input', gradient) |
||||
} |
||||
}, |
||||
color2: { |
||||
get() { |
||||
return this.value && this.value.split(',')[2].slice(0, -1) |
||||
}, |
||||
set(v) { |
||||
const gradient = 'linear-gradient(' + this.angle + 'deg, ' + this.color1 + ', ' + v + ')' |
||||
this.$emit('input', gradient) |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
|
||||
generateGradient() { |
||||
const hexValues = '0123456789abcde' |
||||
|
||||
function populate(a) { |
||||
for (let i = 0; i < 6; i++) { |
||||
const x = Math.round(Math.random() * 14) |
||||
const y = hexValues[x] |
||||
a += y |
||||
} |
||||
return a |
||||
} |
||||
|
||||
const newColor1 = populate('#') |
||||
const newColor2 = populate('#') |
||||
this.angle = Math.round(Math.random() * 360) |
||||
this.color1 = newColor1 |
||||
this.color2 = newColor2 |
||||
// const gradient = 'linear-gradient(' + this.angle + 'deg, ' + newColor1 + ', ' + newColor2 + ')' |
||||
// this.$emit('input', gradient) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
Loading…
Reference in new issue