@ccos/webos-vue
Version:
A Web-Ui Framework for Skyworth/Coocaa TV
219 lines (218 loc) • 7.16 kB
JavaScript
import { defineComponent, ref, reactive, toRef, provide, watch, onMounted, onBeforeUnmount, nextTick, withDirectives, openBlock, createElementBlock, normalizeStyle, renderSlot, vShow } from "vue";
import { px2vw, gapValue, getVirtualWidth } from "./index45.mjs";
import "./index47.mjs";
import _export_sfc from "./index34.mjs";
const _sfc_main = defineComponent({
name: "TvEqu",
props: {
segment: {
// segment 属性表示横向等分多少份
type: Number,
required: false,
default: 1
},
width: {
// 宽度：以1920为屏幕的设计宽度，本组件的宽度
type: Number,
required: false,
default: 0
},
ratio: {
// 等分组件里面的单元的宽高比，可以写成 '400x300' 或者 '400:300' 或者 '4:3' 都可以
type: String,
required: false,
default: ""
},
lineHeight: {
// 等分组件里面的单元的行高，以1920为屏幕的设计宽度的高度值 (注：lineHeight 与 ratio 必须有一个)
type: Number,
required: false,
default: 0
}
},
setup(props) {
const equPanelRef = ref(null);
const equPanelShow = ref(false);
const equPanelStyle = reactive({ position: "relative", width: "0px", height: "0px" });
const segment = toRef(props, "segment");
const width = toRef(props, "width");
const ratio = toRef(props, "ratio");
const lineHeight = toRef(props, "lineHeight");
const panelHeight = ref(0);
const unitWidth = ref(0);
const unitHeight = ref(0);
const unitKeyList = ref([]);
let unitTotalCount = 0;
provide("equal-divide-part-segment", segment);
provide("equal-divide-part-unit-width", unitWidth);
provide("equal-divide-part-unit-height", unitHeight);
provide("equal-divide-part-unit-keys", unitKeyList);
const onUnitChanged = () => {
nextTick().then(() => {
if (unitTotalCount != unitKeyList.value.length) {
processUnitChanged(segment.value);
console.log("unitKeyList", unitKeyList.value);
}
});
};
provide("equal-divide-part-unit-changed", onUnitChanged);
function getElemDesignWidth(element) {
const virWidth = getVirtualWidth();
const screenWidth = window.innerWidth;
const elemWidth = element.clientWidth;
let designWidth;
{
designWidth = elemWidth * virWidth / screenWidth;
}
return designWidth;
}
const updateLayoutByParentNode = (segment1, ratio1, lineHeight1) => {
if (equPanelRef.value) {
const parent = equPanelRef.value.parentNode;
if (parent) {
let designWidth = getElemDesignWidth(parent);
if (designWidth) {
updateLayout(segment1, designWidth, ratio1, lineHeight1);
}
}
}
};
const updateLayout = (segment1, width1, ratio1, lineHeight1) => {
console.log(`updateLayout() - ${segment1},${width1},${ratio1},${lineHeight1}`);
if (!width1) {
if (equPanelRef.value) {
updateLayoutByParentNode(segment1, ratio1, lineHeight1);
} else {
nextTick().then(() => {
updateLayoutByParentNode(segment1, ratio1, lineHeight1);
});
}
return;
}
if (width1 == 1680 && (segment1 >= 0 && segment1 <= 8)) {
const divWidthList = [
1680,
// 0等分宽度
1680,
// 1等分宽度 = 1920 - (120 * 2)
816,
// 2等分宽度 = (1920 - (120 * 2) - (48 * 1)) / 2
528,
// 3等分宽度 = (1920 - (120 * 2) - (48 * 2)) / 3
384,
// 4等分宽度 = (1920 - (120 * 2) - (48 * 3)) / 4
297.6,
// 5等分宽度 = (1920 - (120 * 2) - (48 * 4)) / 5
240,
// 6等分宽度 = (1920 - (120 * 2) - (48 * 5)) / 6
198.86,
// 7等分宽度 = (1920 - (120 * 2) - (48 * 6)) / 7
168
// 8等分宽度 = (1920 - (120 * 2) - (48 * 7)) / 8
];
unitWidth.value = divWidthList[segment1];
} else {
if (segment1 < 2) {
unitWidth.value = width1;
} else {
let allGapValue = gapValue * (segment1 - 1);
let allUnitWidth = width1 - allGapValue;
if (allUnitWidth < 0) {
allUnitWidth = 0;
}
unitWidth.value = allUnitWidth / segment1;
}
}
if (lineHeight1) {
unitHeight.value = lineHeight1;
} else if (ratio1) {
let ratioX = 1;
let ratioY = 1;
let ok = false;
let arr1 = ratio1.split(":");
if (arr1.length >= 2 && arr1[0] && arr1[1]) {
let x = parseInt(arr1[0]);
let y = parseInt(arr1[1]);
if (x && y) {
ratioX = x;
ratioY = y;
ok = true;
}
}
if (!ok) {
let arr2 = ratio1.split("x");
if (arr2.length >= 2 && arr2[0] && arr2[1]) {
let x = parseInt(arr2[0]);
let y = parseInt(arr2[1]);
if (x && y) {
ratioX = x;
ratioY = y;
ok = true;
}
}
}
unitHeight.value = unitWidth.value * ratioY / ratioX;
}
equPanelStyle["width"] = "" + px2vw(width1) + "vw";
processUnitChanged(segment1);
};
const processUnitChanged = (segment2) => {
unitTotalCount = unitKeyList.value.length;
if (segment2 <= 0) {
console.log("error: processUnitChanged() segment == " + segment2);
return;
}
const total = unitKeyList.value.length;
let lineTotal = parseInt(total / segment2);
if (total % segment2) {
lineTotal++;
}
let myHeight = 0;
if (lineTotal >= 1) {
myHeight = unitHeight.value * lineTotal + gapValue * (lineTotal - 1);
}
if (myHeight != 0) {
if (myHeight != panelHeight.value) {
panelHeight.value = myHeight;
equPanelStyle["height"] = "" + px2vw(myHeight) + "vw";
}
equPanelShow.value = true;
} else {
equPanelShow.value = false;
}
};
watch(
() => [props.segment, props.width, props.ratio, props.lineHeight],
(newVal, oldVal) => {
console.log("watch segment");
updateLayout(newVal[0], newVal[1], newVal[2], newVal[3]);
}
);
onMounted(() => {
console.log("equ onMounted");
});
onBeforeUnmount(() => {
});
updateLayout(segment.value, width.value, ratio.value, lineHeight.value);
return {
equPanelRef,
equPanelStyle,
equPanelShow
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return withDirectives((openBlock(), createElementBlock("div", {
ref: "equPanelRef",
style: normalizeStyle(_ctx.equPanelStyle),
class: "wrap1"
}, [
renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 4)), [
[vShow, _ctx.equPanelShow]
]);
}
const TvEqu = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c41f1eb6"]]);
export {
TvEqu as default
};