马良的笔——妙笔本文是“马良系统的使用与设计”系列文章的第四篇。可以先看前几篇介绍：马良的正确打开方式如何设计高扩展性的在线网页制作平台神笔已开，如何使用组件开发星破千上周上海又迎来了at进博会，我们“被迫”放了三天假，放了三天假。放假归来，我们惊喜地发现，马良星的数量已经突破了1000颗大关，令人欣喜。上周节前，我们开源了马良的所有项目，包括gods-pen-server马良服务器、gods-pen-admin马良管理后台、gods-pen马良编辑器，7月开源。至此，马良宣布完全开源。同时，我们推出了相应的工具gods-pen-cli，协助您完成整个马良项目的运行和部署。具体请参考源码部署文档。让我们输入这篇文章的文本并对脚本进行编码。什么是脚本？市面上的H5编辑器大多注重为用户提供可视化的编辑体验。通过提供丰富的模板和海量的组件来满足用户多样化的功能需求，这确实是一个很好的方向。马良平台也有类似的机制（虽然组件不够，模板不够优雅）。然而，马良并不满足于此。考虑以下场景。我们向一个页面添加10个按钮。当点击这些按钮时，我们需要记录点击时间和组件id并发送给服务器（即记录点击日志并提交）。拆分需求：由于按钮组件本身没有点击记录和发送功能，所以需要扩展该功能；同样的功能需要添加到这组按钮。在脚本功能之前，我们需要开发一个新的具有以上能力的按钮组件。无论开发组件的成本和所需的权限（马良平台的任何用户都可以开发自己的组件，但其他平台可能不支持），该方案可以满足上述要求。但是，如果需求稍有变化，不仅是按钮，其他组件也需要这个功能，还得自己开发，真是麻烦。马良的脚本机制就是为了解决此类问题而提出的。马良脚本具有以下基本特点：脚本可以扩展组件功能。脚本可以重复使用。该脚本具有几乎完整的组件控制能力。在这些能力的加持下，其他H5编辑器平台难以实现的交互丰富、逻辑重的页面都可以搞定。不够直观？写一个脚本以图片为证，点击组件alert显示当前时间和组件id上传脚本，将此脚本添加到其他组件脚本开发return{mounted:function(){console.log('helloworld')}}上面几行代码实现了一个超级简单的脚本！使用此脚本的组件将在其安装的生命周期内打印helloworld。所以，如上所示，脚本是一个Vue配置对象（选项对象）。是的，就这么简单！除了原生的Vue配置属性，你还可以向组件添加自定义属性和自定义方法。自定义属性首先，我们用vue语法给组件添加一个属性who，在组件挂载的生命周期中会提示“helloxxx”。return{props:{who:String,},mounted:function(){window.alert('hello'+this.who)}}编辑器如何识别这个属性并提供合适的输入控件？继续修改上面的脚本return{props:{who:{type:String,default:'world',//默认值editor:{type:'input',//需要提供一个文本输入框label:'who',//在编辑器中字段在浏览器中的实际显示名称desc:'Whoisit',//字段描述信息，帮助理解字段含义，悬停显示}}},mounted:function(){window.alert('hello'+this.who)}}将上面的脚本添加到一个组件中，在属性配置面板中有一个who属性配置。可以看到我们在vue属性配置对象中添加了editor字段，editor.label和editor.desc使编辑器中的who属性为了在编辑器中更友好的展示，editor.type指定了什么样的输入控制编辑器应提供此属性。更多editor.type输入类型，请参考文档。自定义方法自定义方法通常用于处理回调、响应事件等。比如一个组件有一个属性successCall，表示操作成功的回调方法，它的editor.type是function。为组件添加自定义方法后，可以在组件successCall属性配置面板中选择该方法。return{editorMethods:{//如何配置自定义方法在组件配置面板显示workLate:{//方法名，对应`methods`中的一个方法label:'signin',//自定义方法显示名params:[//参数列表，可在编辑器中输入{label:'入住时间',//参数1名称desc:'准时下班，请勿停留',//参数1说明,optionaltype:'string',//参数1的类型，支持`string|number|boolean|array|object`default:'02:00'//参数1的默认值},//参数2参数3...]}},methods:{workLate(ts){//dosomething}}}将上面的脚本添加到组件中，并将workLate方法传递给点击操作。与普通vue组件相比，只增加了editorMethods配置。获取组件实例this.$parent.getComponent(anotherComponentId)设置组件显示和隐藏var$com=this.$parent.getComponent(id)$com.visible=true//false对于组件更通用的方法和属性实例请参考文档中的简单复杂示例再次搬出简单版智障聊天机器人（对话api来自https://www.ownthink.com/robot.html）使用按钮、列表、文本等组件绘制页面结构为发送按钮添加脚本，编写处理逻辑视频点击观看简而言之，脚本的核心其实就是一个普通的Vue配置对象（option对象），加上对属性（props）和方法（methods），辅以一些基本代码组件的常用方法和属性。只要你有一定的vue开发基础，就可以充分发挥你的想象力和创造力，开发出交互性强、逻辑丰富的页面。好笔，值得拥有！套路求经验，套路求星。
