Pull request #3143: KERNEL-13158: 写个简单demo

Merge in VISUAL/fineui from ~GUY/fineui:master to master * commit '9b579fe9cf2952932551b125268f7d1dc58d7117': update KERNEL-13158: 写个简单demo update
2 years ago · 88b9474cc8
1 changed files with 24 additions and 1 deletions
--- a/examples/useContext.html
+++ b/examples/useContext.html
@ -7,6 +7,11 @@
    <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>
 </head>
+<style>
+.my-parent {
+    --css-scale: 1;
+}
+</style>
 <body>
 <div id="wrapper"></div>
 <script>
@ -14,7 +19,8 @@
    var Model = BI.inherit(BI.Model, {
        state: function () {
            return {
-                expand: false
+                expand: false,
+                cssScale: 2.0
            };
        },
        childContext: ["text"],
@ -33,6 +39,18 @@
    });
    BI.model("demo.model", Model);

+    var oldFormat = BI.pixFormat;
+    BI.pixFormat = function (pix, border) {
+        var context = BI.useContext("cssScale");
+        if (!context) {
+            return oldFormat.apply(this, arguments);
+        }
+        if (!BI.isNumber(pix)) {
+            return pix;
+        }
+        return "calc(var(--css-scale) * " + pix + "px)";
+    };
+
    var Child = BI.inherit(BI.Widget, {
        render: function () {
            var label;
@ -45,6 +63,7 @@
            // });
            return {
                type: "bi.label",
+                height: 30,
                ref: function (_ref) {
                    label = _ref;
                },
@ -60,6 +79,9 @@
    BI.shortcut("demo.child", Child);

    var Widget = BI.inherit(BI.Widget, {
+        props: {
+            baseCls: "my-parent"
+        },
        _store: function () {
            return BI.Models.getModel("demo.model");
        },
@ -67,6 +89,7 @@
            var child;
            var store = BI.useStore();
            return function () {
+                this.element[0].style.setProperty('--css-scale', store.model.cssScale);
                return {
                    type: "bi.vertical",
                    vgap: 20,