调整selectStyle图片和参数交互
This commit is contained in:
@@ -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{
|
||||
|
||||
Reference in New Issue
Block a user