|
|
@ -9,112 +9,200 @@ |
|
|
|
<body> |
|
|
|
<body> |
|
|
|
<div id="wrapper"></div> |
|
|
|
<div id="wrapper"></div> |
|
|
|
<script> |
|
|
|
<script> |
|
|
|
!(function () { |
|
|
|
var Model = BI.inherit(Fix.Model, { |
|
|
|
|
|
|
|
state: function () { |
|
|
|
var element2InstanceMap = new WeakMap(); |
|
|
|
return { |
|
|
|
|
|
|
|
expand: false, |
|
|
|
BI.getInstanceByElement = function (element) { |
|
|
|
showClearAll: false, |
|
|
|
return element2InstanceMap.get(element); |
|
|
|
hasUndo: false, |
|
|
|
|
|
|
|
hasRedo: false |
|
|
|
}; |
|
|
|
}; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
BI.Plugin.config(function (options) { |
|
|
|
computed: { |
|
|
|
|
|
|
|
expandText: function () { |
|
|
|
|
|
|
|
return this.model.expand ? "expand" : "not-expand"; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
clearAllText: function () { |
|
|
|
|
|
|
|
return this.model.showClearAll ? "showClearAll" : "not-showClearAll"; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
undoText: function () { |
|
|
|
|
|
|
|
return this.model.hasUndo ? "hasUndo" : "not-hasUndo"; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
redoText: function () { |
|
|
|
|
|
|
|
return this.model.hasRedo ? "hasRedo" : "not-hasRedo"; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
|
|
}, function (shortcut, instance) { |
|
|
|
actions: { |
|
|
|
instance.element.attr("shortcut", shortcut); |
|
|
|
setExpand: function () { |
|
|
|
if (instance.options.$testId) { |
|
|
|
this.model.expand = !this.model.expand; |
|
|
|
setIDAttribute(instance.element[0], instance.options.$testId); |
|
|
|
}, |
|
|
|
|
|
|
|
setClearAll: function () { |
|
|
|
|
|
|
|
this.model.showClearAll = !this.model.showClearAll; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
setUndo: function () { |
|
|
|
|
|
|
|
this.model.hasUndo = !this.model.hasUndo; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
setRedo: function () { |
|
|
|
|
|
|
|
this.model.hasRedo = !this.model.hasRedo; |
|
|
|
} |
|
|
|
} |
|
|
|
element2InstanceMap.set(instance.element[0], instance); |
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
BI.model("demo.model", Model); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function useExpand () { |
|
|
|
|
|
|
|
var button; |
|
|
|
|
|
|
|
var store = BI.useStore(); |
|
|
|
|
|
|
|
BI.onBeforeMount(function () { |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
BI.onMounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
function setIDAttribute (element, id) { |
|
|
|
}); |
|
|
|
if (element.id !== "") { |
|
|
|
BI.onBeforeUnmount(function () { |
|
|
|
throw new Error("不能修改有默认id的元素"); |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.onUnmounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.watch("expandText", function (val) { |
|
|
|
|
|
|
|
button.setText(val); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return function () { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
type: "bi.button", |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
button = _ref; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
text: store.model.expandText, |
|
|
|
|
|
|
|
handler: function () { |
|
|
|
|
|
|
|
store.setExpand(); |
|
|
|
} |
|
|
|
} |
|
|
|
element.setAttribute("id", id); |
|
|
|
}; |
|
|
|
|
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
function registerWidgetIdGenerator () { |
|
|
|
function useClearAll () { |
|
|
|
|
|
|
|
var button; |
|
|
|
|
|
|
|
var store = BI.useStore(); |
|
|
|
|
|
|
|
BI.onBeforeMount(function () { |
|
|
|
|
|
|
|
|
|
|
|
const idSet = new Set(); |
|
|
|
}); |
|
|
|
|
|
|
|
BI.onMounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.onBeforeUnmount(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.onUnmounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
return function (shortcut, id) { |
|
|
|
|
|
|
|
if (idSet.has(id)) { |
|
|
|
|
|
|
|
throw new Error("id重复了"); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
idSet.add(id); |
|
|
|
|
|
|
|
BI.Plugin.registerObject(shortcut, function (widget) { |
|
|
|
|
|
|
|
setIDAttribute(widget.element[0], id); |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
BI.watch("clearAllText", function (val) { |
|
|
|
|
|
|
|
button.setText(val); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return function () { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
type: "bi.button", |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
button = _ref; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
text: store.model.clearAllText, |
|
|
|
|
|
|
|
handler: function () { |
|
|
|
|
|
|
|
store.setClearAll(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
BI.registerWidgetId = registerWidgetIdGenerator(); |
|
|
|
function useUndo () { |
|
|
|
}()); |
|
|
|
var button; |
|
|
|
</script> |
|
|
|
var store = BI.useStore(); |
|
|
|
<script> |
|
|
|
BI.onBeforeMount(function () { |
|
|
|
|
|
|
|
|
|
|
|
function setTestId (parentShortcut, childShortcut, testId) { |
|
|
|
|
|
|
|
BI.Plugin.configRender(parentShortcut, function (rendered) { |
|
|
|
|
|
|
|
var queue = BI.isArray(rendered) ? rendered : [rendered];// 广度遍历 |
|
|
|
|
|
|
|
while (queue.length > 0) { |
|
|
|
|
|
|
|
var element = queue.shift(); |
|
|
|
|
|
|
|
BI.each(element, function (key, value) { |
|
|
|
|
|
|
|
if (BI.isArray(value)) { |
|
|
|
|
|
|
|
queue = queue.concat(value); |
|
|
|
|
|
|
|
} else if (BI.isPlainObject(value)) { |
|
|
|
|
|
|
|
queue.push(value); |
|
|
|
|
|
|
|
} else if ("type" === key && value === childShortcut) { |
|
|
|
|
|
|
|
element.$testId = testId; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
BI.onMounted(function () { |
|
|
|
return rendered; |
|
|
|
|
|
|
|
}); |
|
|
|
}); |
|
|
|
} |
|
|
|
BI.onBeforeUnmount(function () { |
|
|
|
|
|
|
|
|
|
|
|
setTestId("demo.parent", "bi.button_group", "测试testId"); |
|
|
|
}); |
|
|
|
|
|
|
|
BI.onUnmounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
var Widget = BI.inherit(BI.Widget, { |
|
|
|
}); |
|
|
|
setup: function () { |
|
|
|
BI.watch("undoText", function (val) { |
|
|
|
var list; |
|
|
|
button.setText(val); |
|
|
|
|
|
|
|
}); |
|
|
|
return function () { |
|
|
|
return function () { |
|
|
|
return { |
|
|
|
return { |
|
|
|
type: "bi.vertical", |
|
|
|
type: "bi.button", |
|
|
|
items: [{ |
|
|
|
|
|
|
|
type: "bi.button_group", |
|
|
|
|
|
|
|
height: 100, |
|
|
|
|
|
|
|
ref: function (_ref) { |
|
|
|
ref: function (_ref) { |
|
|
|
list = _ref; |
|
|
|
button = _ref; |
|
|
|
}, |
|
|
|
}, |
|
|
|
items: BI.range(10).map(function (i) { |
|
|
|
text: store.model.undoText, |
|
|
|
return { |
|
|
|
handler: function () { |
|
|
|
type: "bi.label", |
|
|
|
store.setUndo(); |
|
|
|
text: i, |
|
|
|
} |
|
|
|
cls: "bi-border" |
|
|
|
}; |
|
|
|
}; |
|
|
|
}; |
|
|
|
}), |
|
|
|
} |
|
|
|
layouts: [{ |
|
|
|
|
|
|
|
type: "bi.inline", |
|
|
|
function useRedo () { |
|
|
|
tgap: 10, |
|
|
|
var button; |
|
|
|
lgap: 10 |
|
|
|
var store = BI.useStore(); |
|
|
|
}] |
|
|
|
BI.onBeforeMount(function () { |
|
|
|
}, { |
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.onMounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.onBeforeUnmount(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.onUnmounted(function () { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
BI.watch("redoText", function (val) { |
|
|
|
|
|
|
|
button.setText(val); |
|
|
|
|
|
|
|
}); |
|
|
|
|
|
|
|
return function () { |
|
|
|
|
|
|
|
return { |
|
|
|
type: "bi.button", |
|
|
|
type: "bi.button", |
|
|
|
text: "点击", |
|
|
|
ref: function (_ref) { |
|
|
|
|
|
|
|
button = _ref; |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
text: store.model.redoText, |
|
|
|
handler: function () { |
|
|
|
handler: function () { |
|
|
|
|
|
|
|
store.setRedo(); |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
|
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
}] |
|
|
|
|
|
|
|
|
|
|
|
var Widget = BI.inherit(BI.Widget, { |
|
|
|
|
|
|
|
_store: function () { |
|
|
|
|
|
|
|
return BI.Models.getModel("demo.model"); |
|
|
|
|
|
|
|
}, |
|
|
|
|
|
|
|
setup: function () { |
|
|
|
|
|
|
|
var expandComponent = useExpand(); |
|
|
|
|
|
|
|
var clearAllComponent = useClearAll(); |
|
|
|
|
|
|
|
var undoComponent = useUndo(); |
|
|
|
|
|
|
|
var redoComponent = useRedo(); |
|
|
|
|
|
|
|
return function () { |
|
|
|
|
|
|
|
return { |
|
|
|
|
|
|
|
type: "bi.vertical", |
|
|
|
|
|
|
|
items: [expandComponent(), clearAllComponent(), undoComponent(), redoComponent()] |
|
|
|
}; |
|
|
|
}; |
|
|
|
}; |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
BI.shortcut("demo.parent", Widget); |
|
|
|
BI.shortcut("demo.hooks", Widget); |
|
|
|
BI.createWidget({ |
|
|
|
BI.createWidget({ |
|
|
|
type: "bi.absolute", |
|
|
|
type: "bi.absolute", |
|
|
|
items: [{ |
|
|
|
items: [{ |
|
|
|
el: { |
|
|
|
el: { |
|
|
|
type: "demo.parent" |
|
|
|
type: "demo.hooks" |
|
|
|
}, |
|
|
|
}, |
|
|
|
top: 100, |
|
|
|
top: 100, |
|
|
|
left: 100 |
|
|
|
left: 100 |
|
|
|