# 通用表单管理器 UniCell

策略模式驱动的表单管理器

妈妈再也不用担心我表单和接口来回复制了

你应该使用本组件

任何使用到表单的位置

你不应该使用本组件

在本组件中你可以：

通过创建一个 vue 文件来注册一个表单策略
方便的在任意位置调用你的表单
表单策略中可以调用你的接口，不用担心，仅在使用时它才会发出请求

# 注册策略

创建UniCell/modules/策略名字.vue

在其中写入策略方案

 <template>
     <!-- ... -->
 </template>

 <script lang="ts">
 // 为方便 mixin, 策略中只支持 vue 类语法
 import { Component } from 'vue-property-decorator'
 import Base from './base' // 在这里引入了Base类

 @Component({})
 export default class extends Base { // 使用继承混入Base类
     //...
 }
 </script>
 <style scoped lang="scss"></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在这里我们使用了一个混入 Base 类，我在其中提供了一些响应变量来方便开发，你可以直接在 template 中使用

变量	说明	示例用法
name	本策略被使用时的名称	input 组件中`:placeholder="'请输入'+name"`
type	本策略的类型，也就是文件名
data	传过来的数据组，配合 field 使用	input 组件中 `v-model="data[field]"`
field	计算出来的字段	input 组件中 `v-model="data[field]"`
value	等于`data[field]`	input 组件中 `v-model="value"`
options	外部配置，一般绑定到表单元素上	input 组件中 `v-bind="options"`

# 使用策略

<UniCell v-model="表单数据对象" 策略名字1:显示别名="字段名或配置对象" 策略名字2 />

示例：

渲染多个策略

text

食物

data

UniCell 测试窗口 {
  "Unknown_Field:食物": []
}

指定策略对应的字段

text

食物

传递策略配置

text

指定字段并修改别名

用户名

传递策略配置并修改别名

用户名

<template>
  渲染多个策略
  <UniCell v-model="data" text 食物 showData:data/>
  <br/>
  指定策略对应的字段
  <UniCell v-model="data" text="username" :食物="{field:'food'}" />
  <br/>
  传递策略配置
  <UniCell v-model="data" :text="{ style: 'width:400px' }" />
  <br/>
  指定字段并修改别名
  <UniCell v-model="data" text:用户名="username" />
  <br/>
  传递策略配置并修改别名
  <UniCell v-model="data" :text:用户名="{ field:'username',style:'width:400px',size:'mini'}" />
</template>
<script>
  export default {
    data() {
      return {
        data: {},
      };
    },
  };
</script>

Copy

# 策略示例

<!-- UniCell/modules/text.vue -->
<template>
  <ElInput
    clearable
    :placeholder="'请输入' + name"
    v-model="value"
    v-bind="options"
  ></ElInput>
</template>

<script lang="ts">
  import { Component } from "vue-property-decorator";
  import Base from "./base";

  @Component({})
  export default class extends Base {}
</script>

<style scoped lang="scss"></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

← 通用列表 UniList