widget开发

这里介绍一个微前端widget开发案例（todos）

定义参数

在widget-ui项目中src/views/settingConfig/index.js中配置

注：如果开发过程中，修改参数，需要重新拉取widget

'todo_list': { //　与widget绑定资源code一致
        code: 'todo_list',
        eventLists: [], // 自定义参数
        showStyle: 'list',
        global: [{
                label: '横向布局',
                eventCode: 'add',
                icon: 'el-icon-plus',
                component: 'widgetButton'
            },],//横向配置项
        self:[//纵向悬浮配置项，按钮以及弹框组件
            {
                label: '新增待办', //　按钮名称
                eventCode: 'add', // 标识
                icon: 'el-icon-plus', //图标
                isDialog: true,
                component: 'todoForm' //自定义事件对应的组件；需在 /views/settingComponents/目录下写的组件name一致
            },
        ]
    }

暴露模块

在src/views/widgets目录下新建文件后，在build/mfp.config.js中对外暴露页面

exposes: {
    ...,
    './todo_list': './src/views/widgets/todo_list'
}

配置页面

<应用管理>页面里注册资源，

在<widget管理>里添加并选中对应的资源。并在绑定角色列点击授权

<门户>平台拖拽对应的widget,开发调试

开发调试

横向布局

横向布局的文件，需在 /views/settingComponents/目录下写的组件name一致

整个模块是一个slot

纵向布局

与横向布局一致，文件需在 /views/settingComponents/目录下写的组件name一致

在self配置项的label展示为下拉菜单，点击的弹框组件为配置项component的值

弹框的交互

提交数据时，需要修改弹框的dialogVisible = false,这样在$emit('configOption')时会触发数据保存和更新

其中tthis.configOption参数是整个widget的模型数据

处理如下

submitForm(){
        this.$refs[this.formRef].validate(async valid => {
            if (valid) {
                let data = cloneDeep(this.configOption)
                data.dialogVisible = false
                data.eventLists.push({id: `t_${Math.random()*(100000)}`,...this.form})
                this.$emit('update:configOption', data)
            }
        })
    }

资源组件的交互

在资源组件中，获取到的参数只有配置的自定义参数（eventLists: [],）

如果有修改数据的场景，触发updateItem事件，并传参数对象（{eventLists: lists}），如下

// src/views/widgets/todo_list.vue目录下
changeStatus(event) {
      let lists = cloneDeep(this.$attrs.eventLists)
      lists = lists.map(i => {
        if (event.id === i.id) {
          i.isCompleted = !i.isCompleted
        }
        return i
      })
      this.$emit('updateItem',{eventLists: lists})
    },