脚本开发


return {
  mounted: function () {
    console.log('hello world')
  }
}

以上几行代码实现了一个超级简单的脚本!使用了此脚本的组件会在其 mounted 生命周期打印出 hello world

所以,如上所示,脚本就是一个 Vue 配置对象(option object)。是的,就是这么简单!

除原生 Vue 配置属性外,我们提供了自定义属性、自定义方法添加方案、以及 vm.$options.$lib、数据总线等服务。

添加自定义属性

使用脚本添加自定义属性,用户在配置面板配置属性后,脚本可通过组件实例访问到该属性设定值。

支持自定义输入类型、条件属性等。

可复制下文代码为任一组件添加脚本查看效果。


/**
 * 
 * @param type: 字段类型,支持原生类型以及【码良输入类型】
 * 
 * 码良输入类型: 
 * input    单行输入框
 * text     多行输入框
 * enum     列表单选    需提供选项字段defaultList, 支持数组、map结构
 * image    图片选择
 * audio    音频选择
 * video    视频选择
 * richtext 富文本 
 * number   数字
 * function 方法设置
 * data     json数据
 * date     时间选择
 * checkbox 多选框      同enum 不提供defaultList字段时,输入值为布尔类型
 * radio    单选框      同enum
 * 
*/

return {
  props: {
    // 原生类型
    foo: {
      type: String
    },
    // 图片输入
    fooImage: {
      type: String,
      editor: {
        type: 'image'
      }
    },
    // 日期
    fooDate: {
      editor: {
        type: 'date'
      }
    },
    // json数据
    fooData: {
      type: String,
      editor: {
        type: 'data'
      }
    },
    // checkbox 多选
    fooCheckbox: {
      type: Array, // 此项必须为Array
      default: () => { // 且需提供初始值
        return [] // ['day', 'hour', 'min', 'sec']
      },
      editor: {
        label: '显示精度',
        type: 'checkbox',
        defaultList: [ // array 形式的选项
          'day',
          'hour',
          'min',
          'sec',
        ]
      }
    },
    // checkbox 布尔
    fooCheckboxBool: {
      type: Boolean, // 此项必须为Boolean
      editor: {
        type: 'checkbox'
      }
    },
    // enum 含选项
    fooEnum: {
      default: 'value1',
      type: String,
      editor: {
        label: '我是字段名', // 将字段名显示为可读性更强的文本,不提供此项时,显示字段名
        desc: '我是帮助文本', // 为字段提供提示信息,帮助理解字段的意义
        type: 'enum',
        defaultList: { // map结构的选项 key为值,value为显示文本
          'value1': '条件1',
          'value2': '条件2',
          'value3': '条件3',
        }
      }
    },
    // 条件属性
    ifFoo1: {
      type: [Number],
      default: 0,
      editor: {
        work: function () {
          return this.fooEnum == 'value1' // 只有当 `fooEnum` 字段取值为 'value1' 时才显示此项
        },
        label: '条件属性1',
        type: 'number',
      }
    },
    ifFoo2: {
      type: [Date,