@ccos/webos-vue
Version:
A Web-Ui Framework for Skyworth/Coocaa TV
94 lines (93 loc) • 2.59 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const vue = require("vue");
const common = require("./index45.js");
let cardProps = {
width: {
// 设计宽度（以1920x1080的设计宽度） // 如果没有设置则使用父元素的宽度
type: Number,
required: false,
default: 0
},
height: {
// 设计宽度（以1920x1080的设计高度） // 如果没有设置则使用父元素的高度
type: Number,
required: false,
default: 0
},
title: {
// 卡片的主标题
type: String,
required: false,
default: ""
},
subTitle: {
// 卡片的副标题
type: String,
required: false,
default: ""
}
};
function useCard() {
const cardRef = vue.ref(null);
const cardStyle = vue.reactive({});
const cardDesignWidth = vue.ref(0);
const cardDesignHeight = vue.ref(0);
function getElemDesignWidthHeight(element) {
const virWidth = common.getVirtualWidth();
const screenWidth = window.innerWidth;
const elemWidth = element.clientWidth;
const elemHeight = element.clientHeight;
console.log(`virWidth=${virWidth}, screenWidth=${screenWidth}, elemWidth=${elemWidth}， elemHeight=${elemHeight}`);
let designWidth;
let designHeight;
{
designWidth = elemWidth * virWidth / screenWidth;
designHeight = elemHeight * virWidth / screenWidth;
}
return {
width: designWidth,
height: designHeight
};
}
const updateLayoutInfoByParentNode = (callback) => {
if (cardRef.value) {
const parent = cardRef.value.parentNode;
if (parent) {
let design = getElemDesignWidthHeight(parent);
console.log("design = " + JSON.stringify(design));
if (design.width && design.height) {
updateLayout(design.width, design.height, callback);
}
}
}
};
const updateLayout = (width1, height1, callback) => {
if (width1 && height1) {
cardStyle["width"] = "" + common.px2vw(width1) + "vw";
cardStyle["height"] = "" + common.px2vw(height1) + "vw";
cardDesignWidth.value = width1;
cardDesignHeight.value = height1;
if (callback) {
callback();
}
return;
}
if (cardRef.value) {
updateLayoutInfoByParentNode(callback);
} else {
vue.nextTick().then(() => {
updateLayoutInfoByParentNode(callback);
});
}
};
return {
cardRef,
cardStyle,
cardDesignWidth,
cardDesignHeight,
updateLayout
};
}
exports.cardProps = cardProps;
exports.useCard = useCard;