脚本扩展组件功能
市面上H5编辑器大多着力于给用户提供可视化的编辑体验，通过提供丰富的模板和海量的组件来满足用户多样化的功能需求，这确实是一个不错的方向，码良平台也具备类似的机制（虽然目前组件还不够多，模板也不够精美）。
但是，码良并不满足于此。
考虑如下场景，我们向某页面添加了10个按钮，点击这些按钮时需要分别记录点击时间、组件 id 并发送到服务端（即记录点击日志并提交）。将需求拆分一下：
- 由于按钮组件本身不具备点击日志记录和发送功能，需要扩展此功能；
- 需要为这一组按钮都添加这个同样的功能。
在有脚本功能之前，我们需要新开发一个具备上述能力的按钮组件。先不考虑开发组件的成本和所需的权限（码良平台任何用户都可以开发自己的组件，其他平台可是未必支持哦），这种方案能满足上述需求。但是，需求稍一变化，不止按钮，其他组件也需要这个功能呢，还得开发，实在麻烦。
码良的脚本机制便是为了解决此类问题提出的。
码良脚本具备以下几个基本特性：
- 脚本可以扩展组件功能。
- 脚本可以被复用。
- 脚本几乎具备完全的组件控制能力
在这样的能力加持下，其他H5编辑器平台不好实现的富交互、重逻辑页面，统统可以搞定。
不够直观？有图为证
编写脚本，点击组件 alert 出当前时间和组件 id
上传脚本，给其他组件添加此脚本
return {
mounted: function () {
console.log('hello world')
}
}以上几行代码就实现了一个超级简单的脚本！使用了此脚本的组件会在其 mounted 生命周期打印出 hello world。
所以，如上所示，脚本就是一个 Vue 配置对象(option object)。是的，就是这么简单！
除原生 Vue 配置属性外，你可以为组件添加自定义属性、自定义方法。
首先，我们先以 vue 语法为组件添加一个属性 who ，在该组件mounted 生命周期内会 alert “hello xxx”。
return {
props: {
who: String,
},
mounted: function () {
window.alert('hello ' + this.who)
}
}编辑器如何识别这个属性并提供合适的输入控件呢，继续修改上面的脚本
return {
props: {
who: {
type: String,
default: 'world', // 默认值
editor: {
type: 'input', // 需提供一个文本输入框
label: '谁啊', // 在编辑器中该字段实际展示的名字
desc: '就是谁啊', // 字段描述信息，帮助理解字段的意义，hover 展示
}
}
},
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: '打卡下班', // 自定义方法显示名
params: [ // 参数列表，可以在编辑器输入
{
label: '打卡时间', // 参数1的名称
desc: '按时下班，请勿逗留', // 参数1的描述，可选
type: 'string', // 参数1的类型，支持`string|number|boolean|array|object`
default: '02:00' // 参数1默认值
},
// 参数2 参数3 ...
]
}
},
methods:{
workLate (ts){
// do something
}
}
}将以上脚本添加给某组件，并将 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 object），再加上对属性（props）和方法（methods）的描述，辅以一些码良组件的基本通用方法和属性。只要你拥有一些 vue 开发基础，你就可以尽情发挥想象力与创造力，制作开发出富交互、重逻辑的页面。
码良之笔，值得拥有！