本帖最后由 Derrick.Jiao 于 2022-8-12 11:28 编辑
本文主要讲述怎样在组件版设计器 (Component Designer) 中自定制图片的边栏, 如图:
SpreadJS V14 新推出的组件版设计器, 解决了框架兼容, 加载性能等一系列问题. 针对自定义特性的定制, 它采用了目前流行的"声明式" 开发模型, 支持利用JSON的方式定义功能UI的template, 并且能够声明相关的交互事件(命令式command声明), 以下代码以设置背景色为例说明:
- {
- "type": "ColumnSet",
- "margin": "5px 0px",
- "children": [
- {
- "type": "Column",
- "children": [
- {
- "type": "Radio",
- "bindingPath": "pictureFill",
- "items": [
- {
- "text": "无填充",
- "value": 0
- },
- {
- "text": "纯色填充",
- "value": 1
- }
- ]
- }
- ]
- }
- ]
- },
需要说明的是pictureFill, 这是一个数据声明的key, 在下边的命令中可以获取到元素的状态.
- var sidePanelsPictureCommands = {pictureOptionPanel: {
- commandName: "pictureOptionPanel",
- enableContext: "AllowEditObject",
- visibleContext: "pictureSelected && !pictureAltTextPanel_Visible",
- execute: function(context, propertyName, newValue){
- if(!propertyName){
- return;
- }
- let sheet = context.Spread.getActiveSheet();
- let activePicture = getSelectedPicture(sheet);
- switch(propertyName){
- case "pictureFill":
- if(newValue === 0){
- activePicture.backColor(null)
- }
- else{
- activePicture.backColor("white")
- }
- break;
- case "pictureLine":
- if(newValue === 0){
- activePicture.borderStyle("none")
- }
- else{
- activePicture.borderStyle("double")
- }
- break;
- default:
- Reflect.apply(activePicture[propertyName], activePicture, [newValue])
- break;
- }
- },
- getState: function(context){
- let sheet = context.Spread.getActiveSheet();
- let activePicture = getSelectedPicture(sheet);
- const pictureStatus = {
- pictureFill: 0,
- backColor: "",
- pictureLine: 0,
- borderWidth: 0,
- borderColor: ""
- };
- if (activePicture) {
- for(let key in pictureStatus) {
- switch(key){
- case "backColor":
- let backColor = activePicture.backColor();
- if(backColor){
- pictureStatus.backColor = backColor;
- pictureStatus.pictureFill = 1;
- }else {
- pictureStatus.backColor = "#000000";
- pictureStatus.pictureFill = 0;
- }
- break;
- case "borderWidth":
- pictureStatus.borderWidth = activePicture.borderWidth();
- break;
- case "borderColor":
- pictureStatus.borderColor = activePicture.borderColor();
- break;
- }
- }
- let borderStyle = activePicture.borderStyle();
- if(borderStyle && borderStyle !== "none"){
- pictureStatus.pictureLine = 1
- }else {
- pictureStatus.pictureLine = 0
- }
- }
- return pictureStatus;
- },
- }
- }
getState可以用来获取UI元素的状态, 这里与bindingPath相关
execute用来执行修改, 本例中可以用来修改picture的状态.
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图