Vue动态表单---Variant Form代码学习（Vue内置组件）

一、动态表单

• 首先找到表单部分
  
• 找到遍历动态组件的重点
  

二、动态组件component标签

Props：
is - string | ComponentDefinition | ComponentConstructor
inline-template - boolean
用法：
渲染一个“元组件”为动态组件。依 is 的值，来决定哪个组件被渲染。

<!-- 动态组件由 vm 实例的 `componentId` property 控制 -->
<component :is="componentId"></component>

<!-- 也能够渲染注册过的组件或 prop 传入的组件 -->
<component :is="$options.components.child"></component>

三、transition组件

<transition> 元素作为单个元素/组件的过渡效果。<transition> 只会把过渡效果应用到其包裹的内容上，而不会额外渲染 DOM 元素，也不会出现在可被检查的组件层级中。

四、transition-group组件

<transition-group> 元素作为多个元素/组件的过渡效果。<transition-group> 渲染一个真实的DOM元素。默认渲染 <span>，可以通过 tag attribute 配置哪个元素应该被渲染。
注意，每个 <transition-group> 的子节点必须有独立的 key，动画才能正常工作

<transition-group name="fade" tag="div" class="form-widget-list">
          <template v-for="(widget, index) in designer.widgetList">
          <!--将容器与其他字段的循环组件进行区分-->
            <template v-if="'container' === widget.category">
              <component :is="getWidgetName(widget)" :widget="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
                                :index-of-parent-list="index" :parent-widget="null"></component>
            </template>
            <!--被遍历的字段组件-->
            <template v-else>
              <component :is="getWidgetName(widget)" :field="widget" :designer="designer" :key="widget.id" :parent-list="designer.widgetList"
                            :index-of-parent-list="index" :parent-widget="null" :design-state="true"></component>
            </template>
          </template>
        </transition-group>

三、引用表单组件

• 引用的index.js

// 从当前目录下加载所有.vue后缀的组件
const requireComponent = require.context('./', false, /\w+\.vue$/)

let comps = {}
// 遍历requireComponent对象，构建components键值
requireComponent.keys().map(fileName => {
  let comp = requireComponent(fileName).default;
  comps[comp.name] = comp
})

export default comps;

require.context(directory, useSubdirectories, regExp, mode = ‘sync’)

• directory:表示检索的目录
• useSubdirectories：表示是否检索子文件夹
• regExp:匹配文件的正则表达式,一般是文件名
• mode:加载模式，同步/异步
  用来在组件内引入多个组件

四、最后

通过一个数组字符串就能遍历不同的组件了

 <component :is="'input-widget'">
 </component>

• is对应的值为上面解析到的组件key
  

ok，就到这里\(^o^)/~