调整selectStyle图片和参数交互

This commit is contained in:
X1627315083
2025-10-21 13:46:27 +08:00
parent 7cdf8cccdb
commit 5f98b1b58b
14 changed files with 78 additions and 81 deletions

View File

@@ -6,12 +6,12 @@ const props = defineProps({
default: () => [],
} as any,
select: {
type: Array,
type: Object,
default: () => {},
} as any,
})
const emit = defineEmits([
'update:select'
'selectItem','updateStyle'
])
let data = reactive({
})
@@ -25,7 +25,10 @@ const setLike = (item,str)=>{
}
const setSelectList = (item)=>{
emit('update:select', {...item})
if(item.id == props.select?.oldId){
return
}
emit('selectItem', item)
}
const deleteStyle = (index)=>{
@@ -33,17 +36,7 @@ const deleteStyle = (index)=>{
}
const updateStyle = (item,index)=>{
props.selectList[index] = {
id:item.id,
imgList:[
'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
'https://www.minio-api.aida.com.hk/aida-collection-element/83/Printboard/2cbd8c93-c759-4565-92ab-d066bc5f70a4.png?response-content-type=image%2Fpng&response-content-disposition=inline&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Credential=admin%2F20251009%2Fus-east-1%2Fs3%2Faws4_request&X-Amz-Date=20251009T025033Z&X-Amz-Expires=86400&X-Amz-SignedHeaders=host&X-Amz-Signature=806fef8c43183a528cd2033226523abc4f7b4f69040cd8952294534a98f67c6a',
],
isLike: false,
isAdd: false,
}
emit('updateStyle', {item,index})
}
onMounted(()=>{
@@ -58,10 +51,12 @@ const {} = toRefs(data);
<div class="item" v-for="(item,index) in selectList" :key="item.id">
<div class="title">look {{ index + 1 }}</div>
<div class="imgBox" @click="setSelectList(item)">
<img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt="">
<img :src="item.imgUrl" alt="">
<!-- <img v-for="(img,index) in item?.imgList" :key="index" :src="img" alt=""> -->
<div class="icon" v-if="item.id == select?.id">
<SvgIcon name="modelSelected" size="60" />
</div>
<div class="mask" v-if="item.id == select?.oldId"></div>
</div>
<div class="btn">
<!-- <div>
@@ -113,6 +108,14 @@ const {} = toRefs(data);
border: .6px solid #acacac;
border-radius: 1.3px;
position: relative;
> .mask{
position: absolute;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
top: 0;
left: 0;
}
> .icon{
position: absolute;
width: 6rem;
@@ -121,11 +124,13 @@ const {} = toRefs(data);
right: -2.1rem;
}
> img{
height: 26rem;
object-fit: cover;
// object-fit: contain;
max-width: 50%;
max-height: 50%;
// height: 26rem;
width: 100%;
height: 100%;
// object-fit: cover;
object-fit: contain;
// max-width: 50%;
// max-height: 50%;
}
}
> .btn{