调色板
组件开发App.vue
<template>
<div>
<div class="box" :style="{'background-color': `rgb(${r},${g},${b})`}"></div>
<p>
<input type="range" v-model="r" min="0" max="255">
<input type="text" v-model="r" min="0" max="255">
</p>
<p>
<input type="range" v-model="g" min="0" max="255">
<input type="text" v-model="g" min="0" max="255">
</p>
<p>
<input type="range" v-model="b" min="0" max="255">
<input type="text" v-model="b" min="0" max="255">
</p>
</div>
</template>
<script>
export default {
data(){
return{
r: 100,
g: 200,
b: 123
}
}
}
</script>
<style>
.box{
width: 200px;
height: 200px;
}
</style>
