Skip to content

如何在左侧使用自定义组件

Jump to bottom
SSC edited this page Nov 10, 2020 · 7 revisions

进入此文档说明你已经了解了设计器的基本属性，已经可以成功开始使用了。

前言

如何自定义左侧字段显示介绍了左侧字段的显隐控制。但这些字段只是通用的，有的同学需要自定义业务字段，并且还要配置组件的属性或事件。请看customFields属性的用法。

开始

customFields ｜ 自定义字段 | Array 默认值 []

基本用法

以 el-alert 为例，看一个基本用法。

<template>
  <avue-form-design style="height: 100vh;"
                    :undo-redo="false"
                    :show-github-star="false"
                    :include-fields="[]"
                    :custom-fields="customFields">
  </avue-form-design>
</template>

<script>

export default { // 方便演示，隐藏了其他字段
  data() {
    return {
      customFields: [{
        title: '警告',
        component: 'el-alert',
        labelWidth: '0px',
        span: 24,
        icon: 'el-icon-warning',
        params: {
          title: '警告警告警告警告',
          type: 'success'
        },
        event: {
          close: () => {
            console.log('alert关闭事件')
          }
        }
      },]
    }
  },
}
</script>

自定义字段的核心在于字段中的component,params,event属性。component属性用来控制渲染什么组件，配置了此属性后可在设计器右侧采用js的方式配置自定义属性和自定义事件。params用来控制自定义组件的自定义属性。event用来控制组件的自定义事件。

自己封装的组件

对于设计器来说首先来大体定义两种组件：

  • 可配置的组件 例如el-alert，可直接通过属性的配置来控制组件内的显示内容。
    al-alert
    对于这种组件可直接通过component属性来渲染组件，并通过右侧配置控制组件的显示内容。

  • 不可配置的组件 例如el-timeline，需要通过内容插槽来控制组件内的显示内容。
    al-timeline
    对于这种组件，我们需要二次封装。将其变成可配置的组件。下面来看个例子：

  1. 编写一个组件custom-timeline
    custom-timeline.vue 
<template>
  <el-timeline :reverse="reverse">
    <el-timeline-item v-for="(item, index) in itemList"
                      :key="index"
                      :icon="item.icon"
                      :type="item.type"
                      :color="item.color"
                      :size="item.size"
                      :timestamp="item.timestamp">
      {{item.content}}
    </el-timeline-item>
  </el-timeline>
</template>

<script>
export default {
  name: 'custom-timeline',
  props: {
    itemList: {
      type: Array,
      default: () => {
        return []
      }
    },
    reverse: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>
</style>
  1. 在main.js中注册
import CustomTimeline from './components/custom/timeline'
Vue.component(CustomTimeline.name, CustomTimeline)

// import CustomFields from './components/custom' //自定义组件多时可使用此方式批量注册组件
// Vue.use(CustomFields)
  1. 页面中使用
<template>
  <avue-form-design style="height: 100vh;"
                    :undo-redo="false"
                    :show-github-star="false"
                    :include-fields="[]"
                    :custom-fields="customFields">
  </avue-form-design>
</template>

<script>

export default { // 方便演示，隐藏了其他字段
  data() {
    return {
      customFields: [{
        title: '警告',
        component: 'el-alert',
        labelWidth: '0px',
        span: 24,
        icon: 'el-icon-warning',
        params: {
          title: '警告警告警告警告',
          type: 'success'
        },
        event: {
          close: () => {
            console.log('alert关闭事件')
          }
        }
      }, {
        title: '时间线',
        component: 'custom-timeline',
        labelWidth: '0px',
        span: 24,
        icon: 'el-icon-sort',
        params: {
          reverse: false,
          itemList: [{
            content: '支持使用图标',
            timestamp: '2018-04-12 20:46',
            size: 'large',
            type: 'primary',
            icon: 'el-icon-more'
          }, {
            content: '支持自定义颜色',
            timestamp: '2018-04-03 20:46',
            color: '#0bbd87'
          }, {
            content: '支持自定义尺寸',
            timestamp: '2018-04-03 20:46',
            size: 'large'
          }, {
            content: '默认样式的节点',
            timestamp: '2018-04-03 20:46'
          }]
        }
      }]
    }
  },
}
</script>
  1. 效果如下

总结

自定义组件的核心在于component属性，理论上设计器可渲染任何注册过的组件，并通过右侧params自定义属性来配置组件的显示内容。

Clone this wiki locally