@seemusic/ui-components
Version:
A Vue 3 UI Library. Uses Composable.
105 lines (104 loc) • 2.9 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onBeforeUnmount, createVNode } from "vue";
const SopCover = /* @__PURE__ */ defineComponent({
name: "SopCover",
props: {
type: {
type: String,
default: "album"
},
src: {
type: String,
default: ""
},
width: {
type: Number,
default: 72
},
height: {
type: Number,
default: 72
},
placeholder: {
type: String,
default: ""
},
isCoverEdit: {
type: Boolean,
default: false
}
},
emits: ["cover-edit"],
setup(props, ctx) {
const {
emit
} = ctx;
const coverRef = ref(null);
const coverSize = ref({
width: `${props.width}px`,
height: `${props.height}px`
});
const CoverTypeList = ["album", "track", "cp", "customer", "contract", "dsp", "playlist-project", "playlist"];
const backgroundStyle = computed(() => {
return {
backgroundPosition: `0 -${props.width * CoverTypeList.indexOf(props.type)}px`,
backgroundSize: `${props.width}px auto`
};
});
onMounted(() => {
if (coverRef.value && props.isCoverEdit) {
coverRef.value.addEventListener("mouseenter", mouseenterHandler);
coverRef.value.addEventListener("mouseleave", mouseleaveHandler);
}
});
onBeforeUnmount(() => {
if (coverRef.value && props.isCoverEdit) {
coverRef.value.removeEventListener("mouseenter", mouseenterHandler);
coverRef.value.removeEventListener("mouseleave", mouseleaveHandler);
}
});
function mouseenterHandler(event) {
const target = event.target.children.item(0);
target.style.opacity = "1";
}
function mouseleaveHandler(event) {
const target = event.target.children.item(0);
target.style.opacity = "0";
}
function isCoverShow() {
if (props.src !== "") {
return createVNode("div", {
"style": {
...coverSize.value,
background: `url(${props.src}) no-repeat center center`,
backgroundSize: "cover"
}
}, null);
} else if (props.placeholder !== "") {
return createVNode("span", null, [props.placeholder]);
} else {
return createVNode("span", {
"class": "default-cover",
"style": backgroundStyle.value
}, null);
}
}
return () => createVNode("div", {
"ref": coverRef,
"class": "sop-cover",
"style": coverSize.value
}, [createVNode("div", {
"class": "edit",
"style": {
...coverSize.value,
lineHeight: `${props.height}px`
}
}, [props.isCoverEdit && createVNode("i", {
"class": "sop-icon sop-icon--input",
"onClick": () => emit("cover-edit")
}, null)]), isCoverShow()]);
}
});
export {
SopCover as default
};
//# sourceMappingURL=SopCover.mjs.map