@ccos/webos-vue
Version:
A Web-Ui Framework for Skyworth/Coocaa TV
219 lines (218 loc) • 7.27 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const common = require("./index45.js");
require("./index47.js");
const _pluginVue_exportHelper = require("./index34.js");
const _sfc_main = vue.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 = vue.ref(null);
const equPanelShow = vue.ref(false);
const equPanelStyle = vue.reactive({ position: "relative", width: "0px", height: "0px" });
const segment = vue.toRef(props, "segment");
const width = vue.toRef(props, "width");
const ratio = vue.toRef(props, "ratio");
const lineHeight = vue.toRef(props, "lineHeight");
const panelHeight = vue.ref(0);
const unitWidth = vue.ref(0);
const unitHeight = vue.ref(0);
const unitKeyList = vue.ref([]);
let unitTotalCount = 0;
vue.provide("equal-divide-part-segment", segment);
vue.provide("equal-divide-part-unit-width", unitWidth);
vue.provide("equal-divide-part-unit-height", unitHeight);
vue.provide("equal-divide-part-unit-keys", unitKeyList);
const onUnitChanged = () => {
vue.nextTick().then(() => {
if (unitTotalCount != unitKeyList.value.length) {
processUnitChanged(segment.value);
console.log("unitKeyList", unitKeyList.value);
}
});
};
vue.provide("equal-divide-part-unit-changed", onUnitChanged);
function getElemDesignWidth(element) {
const virWidth = common.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 {
vue.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 = common.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"] = "" + common.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 + common.gapValue * (lineTotal - 1);
}
if (myHeight != 0) {
if (myHeight != panelHeight.value) {
panelHeight.value = myHeight;
equPanelStyle["height"] = "" + common.px2vw(myHeight) + "vw";
}
equPanelShow.value = true;
} else {
equPanelShow.value = false;
}
};
vue.watch(
() => [props.segment, props.width, props.ratio, props.lineHeight],
(newVal, oldVal) => {
console.log("watch segment");
updateLayout(newVal[0], newVal[1], newVal[2], newVal[3]);
}
);
vue.onMounted(() => {
console.log("equ onMounted");
});
vue.onBeforeUnmount(() => {
});
updateLayout(segment.value, width.value, ratio.value, lineHeight.value);
return {
equPanelRef,
equPanelStyle,
equPanelShow
};
}
});
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", {
ref: "equPanelRef",
style: vue.normalizeStyle(_ctx.equPanelStyle),
class: "wrap1"
}, [
vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
], 4)), [
[vue.vShow, _ctx.equPanelShow]
]);
}
const TvEqu = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-c41f1eb6"]]);
exports.default = TvEqu;