You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
ymww_backend/public/assets/addons/shopro/components/sa-image.js

60 lines
1.5 KiB

const SaImage = {
template: `
<div class="sa-image" :style="itemStyle">
<el-image v-for="item in urlList" :src="Fast.api.cdnurl(item)" :fit="fit"
:preview-src-list="ispreview?[Fast.api.cdnurl(item)]:[]" :preview-teleported="true">
<template #error>
<el-icon>
<Picture />
</el-icon>
</template>
</el-image>
</div>`,
props: {
url: {
type: String,
default: ''
},
size: {
type: [String, Number],
default: ''
},
fit: {
type: String,
default: 'contain'
},
radius: {
type: [String, Number],
default: 4
},
ispreview: {
type: Boolean,
default: true
},
},
setup(props) {
const { ref, watch, computed } = Vue
const urlList = ref(props.url ? props.url.split(',') : [''])
watch(() => props.url, () => {
urlList.value = props.url ? props.url.split(',') : ['']
})
const itemStyle = computed(() => {
let style = {}
if (props.size) {
style = {
width: `${props.size}px`,
height: `${props.size}px`,
'border-radius': `${props.radius}px`
}
}
return style
})
return {
Fast,
urlList,
itemStyle,
}
}
}