# 脚本/动作系统

# 概念解释

  • 类比王者荣耀,如果某个英雄想死而复生,就需要购买贤者的庇护-复活甲 (opens new window)这件装备,从而可以享受这件装备带来的技能:死亡2秒后原地复活
  • 在鲁班H5中,如果某个按钮想要支持点击跳转到百度,就需要购买外部跳转这件装备,从而享受这件状态带来的技能:配置可以跳转网址,点击后跳转至相关网址
  • 即如果你想某个组件拥有某些能力/技能,就需要到装备商店(即脚本商店)给这个组件买一件装备(脚本),然后使用这个装备自带的技能即可

# 如何使用?

  1. 项目启动或部署成功后,点击组件属性里的“装备(脚本)商店”,是没有可选择脚本的,如下图显示为空 image image

  2. 配置装备商店

  1. 配置完成
  • 配置好后,刷新前端页面,点击组件“动作面板”“装备(脚本)商店”就会看到刚刚配置的装备 image

  • 点击上图里面的“使用(购买装备)”即可在动作面板里面看到自己购买的装备,并且可以通过“使用技能(动作)” 启用对应的技能 image

  1. 配置动作 对动作/技能 进行简单配置,比如跳转网址,然后点击预览,即可看到对应动作/技能的效果了

附录:

  1. Demo脚本/动作/装备
点击查看

即在Content部分填写如下内容

return {
      methodsConfig: {              // 此项配置自定义方法的在组件配置面板如何展示
        clickFn: {             // 方法名,对应于 methods 内的某方法
          label: '外部跳转1',        // 自定义方法显示名
          params: [                 // 参数列表,对象数组
            {
              label: '类型',
              desc: 'query形式参数',
              type: 'object',
              default: 'http://',
              editor: {
                type: 'a-select',
                label: '类型',
                prop: {
                  options: [
                    {
                      "label": "http://",
                      "value": "http://"
                    },
                    {
                      "label": "https://",
                      "value": "https://"
                    },
                    {
                      "label": "邮件",
                      "value": "mailto:"
                    },
                    {
                      "label": "打电话",
                      "value": "tel:"
                    },
                    {
                      "label": "页码跳转",
                      "value": "#page"
                    },
                    {
                      "label": "表单提交",
                      "value": "@submit"
                    },
                    {
                      "label": "分享",
                      "value": "@share"
                    }
                  ]
                }
              }
            },
            {
              label: '跳转地址',     // 参数1的名称
              desc: '项目相对地址',   // 参数1的描述
              type: 'string',       // 参数1的类型,支持string|number|boolean|array|object
              default: 'www.baidu.com',          // 参数1默认值
            },
          ]
        }
      },
      methods:{
        clickFn:function(type, url){
          console.log(url)
          let win = window.open(type+url, '_blank')
          win.focus()
        }
      }
    }