Skip to content

脚本扩展组件功能

石头 edited this page Nov 9, 2019 · 1 revision

脚本是什么

市面上H5编辑器大多着力于给用户提供可视化的编辑体验,通过提供丰富的模板和海量的组件来满足用户多样化的功能需求,这确实是一个不错的方向,码良平台也具备类似的机制(虽然目前组件还不够多,模板也不够精美)。

但是,码良并不满足于此。

考虑如下场景,我们向某页面添加了10个按钮,点击这些按钮时需要分别记录点击时间、组件 id 并发送到服务端(即记录点击日志并提交)。将需求拆分一下:

  1. 由于按钮组件本身不具备点击日志记录和发送功能,需要扩展此功能;
  2. 需要为这一组按钮都添加这个同样的功能。

在有脚本功能之前,我们需要新开发一个具备上述能力的按钮组件。先不考虑开发组件的成本和所需的权限(码良平台任何用户都可以开发自己的组件,其他平台可是未必支持哦),这种方案能满足上述需求。但是,需求稍一变化,不止按钮,其他组件也需要这个功能呢,还得开发,实在麻烦。

码良的脚本机制便是为了解决此类问题提出的。

码良脚本具备以下几个基本特性:

  • 脚本可以扩展组件功能。
  • 脚本可以被复用。
  • 脚本几乎具备完全的组件控制能力

在这样的能力加持下,其他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.labeleditor.desc 使 who 属性在编辑器中更友好的展示,editor.type 指定了编辑器应该为该属性提供何种输入控件,更多的editor.type输入类型请参考文档

自定义方法

自定义方法常用于处理回调,响应事件等。

比如组件有一个属性为 successCall,代表某个操作成功的回调方法,其 editor.typefunction

为组件添加自定义方法后,就可以在组件 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 开发基础,你就可以尽情发挥想象力与创造力,制作开发出富交互、重逻辑的页面。

码良之笔,值得拥有!

例行求体验,例行求 star