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

画布增加的新功能

Browse Source
This commit is contained in:
李志鹏
2026-01-02 11:24:11 +08:00
parent 1ae365b1f3
commit f8e4ab8cdb
59 changed files with 4401 additions and 1213 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/component/Detail/detailLeft/colorBox/pallet.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="pallet">
<div class="pallet" ref="palletRef">
<div class="palletColo" @click="openPallet">
<div v-show="!selectColor.gradient" class="palletBackColor" :title="selectColor.name" :style="{'background-color':selectColor.hex}">
{{ selectColor.hex }}
@@ -117,6 +117,7 @@ export default defineComponent({
})
const getpalletListDom = reactive({
})
const palletRef = ref(null)
watch(()=>palletData.color_,(newVal:any)=>{
if(!newVal?.rgba?.r)return
if(palletData.color?.gradient?.gradientShow){
@@ -221,7 +222,7 @@ export default defineComponent({
// this.selectColor = {rgba:gradientRgba,hex:hex} //顔色选择器默认颜色
let gradientWidth = (document.querySelector('.pallet .color_setting_operate_bg') as any).clientWidth
let gradientWidth = (palletRef.value.querySelector('.color_setting_operate_bg') as any).clientWidth
let position = {
x:event.clientX,
left:event.target.style.left?event.target.style.left.split('%')[0]:0
@@ -276,8 +277,8 @@ export default defineComponent({
// 点击外部区域关闭颜色选择器
const handleClickOutside = (event: Event) => {
const target = event.target as HTMLElement;
const colorSettingBlock = document.querySelector('.color_setting_block');
const palletColo = document.querySelector('.palletColo');
const colorSettingBlock = palletRef.value.querySelector('.color_setting_block');
const palletColo = palletRef.value.querySelector('.palletColo');
// 如果点击的是 .palletColo 或 .color_setting_block 内部，则不关闭
if (palletData.palletShow && colorSettingBlock &&
@@ -294,7 +295,7 @@ export default defineComponent({
nextTick().then(()=>{
const backIcon = document.createElement('div');
backIcon.classList.add('vc-sketch-color-wrap')
let dropperDom = document.getElementsByClassName("pallet")?.[0]?.getElementsByClassName('vc-chrome-fields-wrap')[0]
let dropperDom = palletRef.value.getElementsByClassName('vc-chrome-fields-wrap')[0]
dropperDom.appendChild(backIcon);
backIcon.addEventListener('click',async ()=>{
try {
@@ -322,7 +323,7 @@ export default defineComponent({
return{
...toRefs(palletData),
...toRefs(getpalletListDom),
palletRef,
openPallet,
selectImgItem,
setOperate,
@@ -614,6 +615,7 @@ export default defineComponent({
position: absolute;
content: "";
top: 0.2rem;
left: 0;
width: 1rem;
height: 1rem;
border-radius: 50%;