aidlab/aida_front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
X1627315083
2024-04-23 14:32:20 +08:00
parent 230d8f5ed9
commit 547fd91d9f
1 changed files with 31 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/component/HomePage/ColorboardUpload.vue
View File

@@ -67,7 +67,7 @@
<div class="color_setting_operate_item color_setting_operate_input">
<div class="color_setting_operate_bg" :style="{'background-image':`linear-gradient(90deg,${setGradient(gradient)})`}">
</div>
<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == gradient.selectIndex}" :style="{'left':item.left,'background-color':item.color}" @click="clickGradient(index)" @mousedown="mousedownGradient($event,item)" @touchstart="mousedownGradient($event,item)"></div>
<div v-for="item,index in gradient.gradientList" :key="item" class="color_setting_operate_btn" :class="{'active':index == gradient.selectIndex}" :style="{'left':item.left,'background-color':`rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a})`}" @click="clickGradient(index)" @mousedown="mousedownGradient($event,item)" @touchstart="mousedownGradient($event,item)"></div>
</div>
</div>
</div>
@@ -170,10 +170,20 @@ export default defineComponent({
let gradient = ref({
gradientList:[
{
color:'rgb(244, 187, 51)',
rgba:{
r:117,
g:119,
b:255,
a:1,
},
left:'0%'
},{
color:'rgb(39, 193, 191)',
rgba:{
r:0,
g:222,
b:152,
a:1,
},
left:'100%'
},
],
@@ -200,8 +210,20 @@ export default defineComponent({
// },
selectColor:{
handler(newVal,oldVal){
console.log(newVal);
this.colorList[this.selectIndex] = newVal.rgba
let colorList =this.colorList.filter((v) => v && Object.keys(v).length)
console.log(newVal);
if(this.gradient.selectIndex>-1){
this.gradient.gradientList[this.gradient.selectIndex].color = `rgb(${newVal.rgba.r},${newVal.rgba.g},${newVal.rgba.b})`
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
r:newVal.rgba.r,
g:newVal.rgba.g,
b:newVal.rgba.b,
a:1,
}
console.log(this.gradient);
}
this.setColorboardList(colorList)
// this.clearSelectColor()
},
@@ -240,7 +262,7 @@ export default defineComponent({
gradient.gradientList.forEach((item,index)=>{
let str = ','
if(gradient.gradientList.length == index+1)str = ''
gradientStr += `${item.color} ${item.left}${str}`
gradientStr += `rgba(${item.rgba.r},${item.rgba.g},${item.rgba.b},${item.rgba.a}) ${item.left}${str}`
})
console.log(`linear-gradient(${gradient.angle}deg, ${gradientStr})`);
@@ -568,7 +590,11 @@ export default defineComponent({
this.store.commit('setColorboardList',colorList)
},
clickGradient(index){
this.gradient.selectIndex = index
let gradientRgba = this.gradient.gradientList[index].rgba
let rgba = [gradientRgba.r,gradientRgba.g,gradientRgba.b,gradientRgba.a?gradientRgba.a:1]
let hex = this.rgbaToHex(rgba)
this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
},
mousedownGradient(event,item){
event.stopPropagation();