Browse Source

Merge pull request #201836 in DEC/fineui from master to feature/x

* commit '88b9474cc8b5b75520c0643acc6eceaf0dda8055':
  update
  KERNEL-13158: 写个简单demo
  update
master
superman 2 years ago
parent
commit
9ada36f534
  1. 25
      examples/useContext.html

25
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,

Loading…
Cancel
Save