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-24 14:37:51 +08:00
parent 3825527fa6
commit 2c5775e77c
1 changed files with 39 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -6,7 +6,7 @@
</div>
<div class="modal_img">
<div class="modal_img_item" v-for="color,index in colorList" :class="[ index == 1?'Guide_1_11_1':'',driver__.driver?'showEvents':'']" :key="color" >
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':`linear-gradient(${gradient.angle}deg,${setGradient(gradient)})`}">
<div @click="selectColorItem(index,color)" :class="['upload_color',selectIndex === index ? 'select_upload_color' : '',]" :style="{background:`rgba(${color?.r},${color?.g},${color?.b},${color?.a})`,'background-image':color?.gradient?`linear-gradient(${color?.gradient?.angle}deg,${setGradient(color.gradient)})`:'none'}">
</div>
</div>
<div>
@@ -49,7 +49,7 @@
</div>
</div>
</div> -->
<div class="color_setting_operate">
<div class="color_setting_operate" v-show="gradientShow">
<div class="color_setting_operate_item color_setting_operate_control">
<div class="operate_item_box">
<div>线性</div>
@@ -190,6 +190,7 @@ export default defineComponent({
angle:45,
selectIndex:-1,
})
let gradientShow = ref(false)
return {
fileList,
colorList,
@@ -198,6 +199,7 @@ export default defineComponent({
driver__,
t,
gradient,
gradientShow,
}
},
watch:{
@@ -210,11 +212,9 @@ 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){
if(this.gradient.selectIndex>-1 && this.gradientShow){
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,
@@ -222,7 +222,12 @@ export default defineComponent({
b:newVal.rgba.b,
a:1,
}
console.log(this.gradient);
}
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
if(this.gradientShow){
// this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
this.setColorboardList(colorList)
// this.clearSelectColor()
@@ -251,8 +256,10 @@ export default defineComponent({
return data
}
},
setGradient(gradient){
setGradient(){
// return this.setGradientAngle(gradient)
return (gradient)=>{
console.log(gradient,'222');
let gradientStr = ''
gradient.gradientList.sort((a, b) => {
let aArr = a.left.split('%')[0]
@@ -305,8 +312,30 @@ export default defineComponent({
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("colorboard_upload_modal")[0].getElementsByClassName('vc-chrome-fields-wrap')[0]
let colorDom = document.querySelector('.colorboard_upload_modal .vc-chrome-controls .vc-chrome-active-color')
// console.log(colorDom);
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
colorDom.addEventListener('click',()=>{
// this.colorList[this.selectIndex]
console.log(123123123123);
this.gradient.selectIndex = 0
this.gradientShow = !this.gradientShow
if(this.gradientShow){
if(this.selectColor.rgba.r){
this.gradient.gradientList[this.gradient.selectIndex].rgba = {
r:this.selectColor.rgba.r,
g:this.selectColor.rgba.g,
b:this.selectColor.rgba.b,
a:1,
}
}
this.colorList[this.selectIndex].gradient = JSON.parse(JSON.stringify(this.gradient))
}else{
this.colorList[this.selectIndex].gradient = ''
}
})
backIcon.addEventListener('click', async ()=>{
try {
const dropper = new EyeDropper();
const result = await dropper.open();
@@ -322,7 +351,7 @@ export default defineComponent({
} catch (e) {
message.info(this.t('ColorboardUpload.jsContent1'))
}
},false)
})
// this.clearSelectColor()
// if ("EyeDropper" in window) {
// console.log(true);
@@ -345,6 +374,7 @@ export default defineComponent({
},
//选择不同的色块
selectColorItem(index,color){
this.gradientShow = false
let hex
if(color?.r){
hex = this.rgbaToHex([color.r,color.g,color.b,color.a?color.a:1])