@ccos/webos-vue
Version:
A Web-Ui Framework for Skyworth/Coocaa TV
283 lines (282 loc) • 9.37 kB
JavaScript
"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const useCard = require("./index49.js");
const common = require("./index45.js");
require("./index52.js");
const _pluginVue_exportHelper = require("./index34.js");
const _withScopeId = (n) => (vue.pushScopeId("data-v-928e0a39"), n = n(), vue.popScopeId(), n);
const _hoisted_1 = ["src"];
const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ vue.createElementVNode("div", { class: "card-with-title-gap" }, null, -1));
const _sfc_main = {
__name: "card-with-title",
props: {
...useCard.cardProps,
//
imageWidth: {
type: Number,
required: false,
default: 0
},
imageHeight: {
type: Number,
required: false,
default: 0
},
imgUrl: {
// 图片地址
type: String,
required: false,
default: ""
},
align: {
// 对齐方式： 接受两个值：left 和 center (默认)
type: String,
required: false,
default: ""
},
line: {
// 行数，只接受数字 1 和 2
type: Number,
required: false,
default: 0
},
titleCustomStyle: {
// 自定义 title 的其他样式
type: Object,
required: false,
default: null
},
subTitleCustomStyle: {
// 自定义 sub-title 的其他样式
type: Object,
required: false,
default: null
}
},
setup(__props) {
const props = __props;
const width = vue.toRef(props, "width");
const height = vue.toRef(props, "height");
const title = vue.toRef(props, "title");
const subTitle = vue.toRef(props, "subTitle");
const imgUrl = vue.toRef(props, "imgUrl");
const align = vue.toRef(props, "align");
const imageWidth = vue.toRef(props, "imageWidth");
const imageHeight = vue.toRef(props, "imageHeight");
const line = vue.toRef(props, "line");
const titleCustomStyle = vue.toRef(props, "titleCustomStyle");
const subTitleCustomStyle = vue.toRef(props, "subTitleCustomStyle");
const {
cardRef,
cardStyle,
cardDesignWidth,
cardDesignHeight,
updateLayout
} = useCard.useCard();
const onlyOneTitle = vue.ref(true);
const titleStyle = vue.reactive({});
const subTitleStyle = vue.reactive({});
const showImage = vue.ref(false);
const imgWrapStyle = vue.reactive({});
const imageStyle = vue.reactive({});
const imageRealUrl = vue.ref("");
let gapOfImageAndText = 12;
let mainTitleHeightPx = 52;
let subTitleHeightPx = 52;
const updateLayoutCallBack = () => {
let imgW;
let imgH;
if (onlyOneTitle.value) {
imgW = cardDesignWidth.value;
imgH = cardDesignHeight.value - gapOfImageAndText - mainTitleHeightPx;
} else {
imgW = cardDesignWidth.value;
imgH = cardDesignHeight.value - gapOfImageAndText - mainTitleHeightPx - subTitleHeightPx;
}
imgWrapStyle["width"] = String(common.px2vw(imgW)) + "vw";
imgWrapStyle["height"] = String(common.px2vw(imgH)) + "vw";
imageStyle["width"] = String(common.px2vw(imgW)) + "vw";
imageStyle["height"] = String(common.px2vw(imgH)) + "vw";
};
const updateCardLayout = (newProps, callback) => {
if (Number(newProps.line) == 2) {
onlyOneTitle.value = false;
} else if (Number(newProps.line) == 1) {
onlyOneTitle.value = true;
} else {
if (newProps.title && newProps.subTitle) {
onlyOneTitle.value = false;
} else {
onlyOneTitle.value = true;
}
}
Object.assign(titleStyle, {});
Object.assign(subTitleStyle, {});
if (newProps.align == "center") {
titleStyle["text-align"] = "center";
subTitleStyle["text-align"] = "center";
} else {
titleStyle["text-align"] = "left";
subTitleStyle["text-align"] = "left";
}
if (newProps.imgUrl) {
showImage.value = true;
} else {
showImage.value = false;
}
if (newProps.titleCustomStyle) {
assignCustomMainTitleSytle(newProps.titleCustomStyle);
} else {
if (onlyOneTitle.value) {
mainTitleHeightPx = 52;
} else {
mainTitleHeightPx = 62;
}
}
if (newProps.subTitleCustomStyle) {
assignCustomSubTitleSytle(newProps.subTitleCustomStyle);
} else {
subTitleHeightPx = 52;
}
if (newProps.imageWidth && newProps.imageHeight) {
let W = newProps.imageWidth;
let H = newProps.imageHeight;
if (onlyOneTitle.value) {
H += gapOfImageAndText + mainTitleHeightPx;
} else {
H += gapOfImageAndText + mainTitleHeightPx + subTitleHeightPx;
}
updateLayout(W, H, callback);
} else if (newProps.width && newProps.height) {
updateLayout(newProps.width, newProps.height, callback);
} else {
updateLayout(0, 0, callback);
}
imageRealUrl.value = newProps.imgUrl;
};
const assignCustomMainTitleSytle = (styleObj) => {
let customHeight = null;
for (let key in styleObj) {
if (styleObj.hasOwnProperty(key)) {
const value = styleObj[key];
if (key == "height") {
customHeight = value;
}
const number = common.getNumber(value);
if ((value.endsWith("px") || value.endsWith("px;")) && number > 1) {
titleStyle[key] = String(common.px2vw(common.css2px(value))) + "vw";
} else {
titleStyle[key] = value;
}
}
}
if (customHeight) {
mainTitleHeightPx = common.css2px(customHeight);
}
};
const assignCustomSubTitleSytle = (styleObj) => {
let customHeight = null;
for (let key in styleObj) {
if (styleObj.hasOwnProperty(key)) {
const value = styleObj[key];
if (key == "height") {
customHeight = value;
}
const number = common.getNumber(value);
if ((value.endsWith("px") || value.endsWith("px;")) && number > 1) {
subTitleStyle[key] = String(common.px2vw(common.css2px(value))) + "vw";
} else {
subTitleStyle[key] = value;
}
}
}
if (customHeight) {
subTitleHeightPx = common.css2px(customHeight);
}
};
vue.onMounted(() => {
});
vue.onBeforeUnmount(() => {
});
vue.watch(
() => [
props.width,
props.height,
props.title,
props.subTitle,
props.imageWidth,
props.imageHeight,
props.imgUrl,
props.align,
props.line,
props.titleCustomStyle,
props.subTitleCustomStyle
],
(newVal) => {
updateCardLayout({
width: newVal[0] ?? 0,
height: newVal[1] ?? 0,
title: newVal[2] ?? "",
subTitle: newVal[3] ?? "",
imageWidth: newVal[4] ?? 0,
imageHeight: newVal[5] ?? 0,
imgUrl: newVal[6] ?? "",
align: newVal[7] ?? "",
line: newVal[8] ?? 0,
titleCustomStyle: newVal[9] ?? null,
subTitleCustomStyle: newVal[10] ?? null
}, updateLayoutCallBack);
}
);
updateCardLayout({
width: width.value ?? 0,
height: height.value ?? 0,
title: title.value ?? "",
subTitle: subTitle.value ?? "",
imageWidth: imageWidth.value ?? 0,
imageHeight: imageHeight.value ?? 0,
imgUrl: imgUrl.value ?? "",
align: align.value ?? "",
line: line.value ?? 0,
titleCustomStyle: titleCustomStyle.value ?? null,
subTitleCustomStyle: subTitleCustomStyle.value ?? null
}, updateLayoutCallBack);
return (_ctx, _cache) => {
return vue.openBlock(), vue.createElementBlock("div", {
ref_key: "cardRef",
ref: cardRef,
style: vue.normalizeStyle(vue.unref(cardStyle)),
class: "card-with-title"
}, [
vue.createElementVNode("div", {
style: vue.normalizeStyle(imgWrapStyle)
}, [
vue.withDirectives(vue.createElementVNode("img", {
style: vue.normalizeStyle(imageStyle),
src: imageRealUrl.value
}, null, 12, _hoisted_1), [
[vue.vShow, showImage.value]
])
], 4),
_hoisted_2,
onlyOneTitle.value ? (vue.openBlock(), vue.createElementBlock("div", {
key: 0,
class: "card-with-one-title-title1",
style: vue.normalizeStyle(titleStyle)
}, vue.toDisplayString(title.value), 5)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
vue.createElementVNode("div", {
class: "card-with-two-title-title1",
style: vue.normalizeStyle(titleStyle)
}, vue.toDisplayString(title.value), 5),
vue.createElementVNode("div", {
class: "card-with-two-title-title2",
style: vue.normalizeStyle(subTitleStyle)
}, vue.toDisplayString(subTitle.value), 5)
], 64))
], 4);
};
}
};
const TvCardWithTitle = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-928e0a39"]]);
exports.default = TvCardWithTitle;