<html> <head> <meta charset="utf-8"> <title></title> <!-- <link rel="stylesheet" type="text/css" href="../dist/2.0/fineui.min.css"/> <script src="../dist/2.0/fineui.js"></script> --> <link rel="stylesheet" type="text/css" href="http://fanruan.design/fineui/2.0/fineui.min.css"/> <!-- <script src="http://fanruan.design/fineui/2.0/fineui.min.js"></script>--> <script src="http://localhost:9001/fineui.js"></script> </head> <style> .my-parent { --css-scale: 1; font-size: calc(var(--css-scale) * 14px); } </style> <body> <div id="wrapper"></div> <script> // tab上下文环境测试 var Model = BI.inherit(BI.Model, { state: function () { return { expand: false, cssScale: true }; }, childContext: ["text", "cssScale"], computed: { text: function () { return this.model.expand ? "text-yes" : "text-not"; } }, actions: { toggle: function () { this.model.expand = !this.model.expand; } } }); BI.model("demo.model", Model); var TempModel = BI.inherit(BI.Model, { state: function () { return { cssScale: false }; }, childContext: ["cssScale"], }); BI.model("demo.temp_model", TempModel); var oldFormat = BI.pixFormat; BI.pixFormat = function (pix, border) { var context = BI.useContext("cssScale"); if (!context || context.model.cssScale === false) { return oldFormat.apply(this, arguments); } if (!BI.isNumber(pix)) { return pix; } if (border > 0) { return "calc(var(--css-scale) * " + pix + "px" + " - " + border + "px"+")"; } return "calc(var(--css-scale) * " + pix + "px)"; }; var oldPix = BI.toPix; BI.toPix = function (pix, border) { var context = BI.useContext("cssScale"); if (!context || context.model.cssScale === false) { return oldFormat.apply(this, arguments); } if (!BI.isNumber(pix)) { return pix; } if (border > 0) { return "calc(var(--css-scale) * " + pix + "px" + " - " + border + "px"+")"; } return "calc(var(--css-scale) * " + pix + "px)"; }; var Child = BI.inherit(BI.Widget, { render: function () { var label; var context = BI.useContext(); setInterval(function () { context.toggle(); }, 1000); // BI.watch(context, "expand", function () { // label.setText(context.model.text); // }); return { type: "bi.label", height: 30, ref: function (_ref) { label = _ref; }, effect: function (w) { w.setText(context.model.text); }, text: function () { return context.model.text; } }; } }); BI.shortcut("demo.child", Child); var Widget = BI.inherit(BI.Widget, { props: { baseCls: "my-parent" }, _store: function () { return BI.Models.getModel("demo.model"); }, setup: function () { var child; var store = BI.useStore(); return function () { this.element[0].style.setProperty('--css-scale', 2); return { type: "bi.vertical", vgap: 20, items: [{ type: "demo.child", ref: function (_ref) { child = _ref; } }, { type: "bi.dynamic_date_combo", supportDynamic: false, width: 200, value: { type: 1, value: { year: 2012, month: 3, day: 15 } } }, { type: "bi.down_list_combo", cls: "bi-border", width: 24, height: 24, popup: { _store: function () { return BI.Models.getModel("demo.temp_model"); } }, value: [{value: 2}, {value: 3, childValue: 4}], items: [[{ text: "属于", value: 1, cls: "dot-e-font" }, { text: "不属于", value: 2, cls: "dot-e-font" }], [{ el: { text: "大于", value: 3, iconCls1: "dot-e-font" }, value: 3, children: [{ text: "固定值", value: 4, cls: "dot-e-font" }, { text: "平均值", value: 5, cls: "dot-e-font" }] }]] }] }; }; } }); BI.shortcut("demo.parent", Widget); BI.createWidget({ type: "bi.absolute", items: [{ el: { type: "demo.parent" }, top: 100, left: 100 }], element: "#wrapper" }); </script> </body> </html>