## 联动规则
必须使用`v-form`指令声明为一个域
联动规则指当下拉框、复选框、单选按钮为指定的值时，联动其他字段做出相应的变化,通过属性`:linkage`来配置联动规则,接收`Array,Object`类型的值。

联动规则只在`cl-select`,`cl-checkbox`,`cl-radio`三种类型的控件上生效。
#### 下拉框联动
例：选择爬山时不显示下棋，选择游泳时游泳为必填，选择下棋时爬山只读
```html
<template>
  <el-form v-form>
    <cl-form-item label="爱好">
      <cl-select
        v-model="linkageForm.linkage"
        class="m-r"
        :options="options"
        :linkage="linkage"
      />
    </cl-form-item>
    <cl-form-item label="爬山">
      <cl-input
        :permission="permission.climb"
        v-model="linkageForm.climb"
        placeholder="喜欢爬哪座山"
      />
    </cl-form-item>
    <cl-form-item label="游泳">
      <cl-input
        :permission="permission.swim"
        v-model="linkageForm.swim"
        placeholder="喜欢哪种泳姿"
      />
    </cl-form-item>
    <cl-form-item label="下棋" v-if="permission.chess !== 'n'">
      <cl-input
        :permission="permission.chess"
        v-model="linkageForm.chess"
        placeholder="喜欢哪种棋"
      />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        linkageForm: {
          linkage: "",
          swim: "",
          climb: "白云山",
          chess: "",
        },
        permission: {
          swim: "w",
          climb: "w",
          chess: "w",
        },
        options: [
          { key: "1", value: "爬山" },
          { key: "2", value: "游泳" },
          { key: "3", value: "下棋" },
        ],
        linkage: [
          {
            value: "1",
            effect: [{ target: "permission.chess", type: "=", value: "n" }],
          },
          {
            value: "2",
            effect: [{ target: "permission.swim", type: "=", value: "b" }],
          },
          {
            value: "3",
            effect: [{ target: "permission.climb", type: "=", value: "r" }],
          },
        ],
      };
    },
  };
</script>
<!-- linkage.vue -->
```
#### 单选框联动
选择爬山时仅显示爬山，选择游泳时游泳必填，选择下棋时爬山只读
```html
<template>
  <el-form v-form>
    <cl-form-item label="爱好">
      <cl-radio
        v-model="linkageForm.linkage"
        class="m-r"
        :options="options"
        :linkage="linkage"
      />
    </cl-form-item>
    <cl-form-item label="爬山">
      <cl-input
        :permission="permission.climb"
        v-model="linkageForm.climb"
        placeholder="喜欢爬哪座山"
      />
    </cl-form-item>
    <cl-form-item label="游泳" v-if="permission.swim !== 'n'">
      <cl-input
        :permission="permission.swim"
        v-model="linkageForm.swim"
        placeholder="喜欢哪种泳姿"
      />
    </cl-form-item>
    <cl-form-item label="下棋" v-if="permission.chess !== 'n'">
      <cl-input
        :permission="permission.chess"
        v-model="linkageForm.chess"
        placeholder="喜欢哪种棋"
      />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        linkageForm: {
          linkage: "",
          swim: "",
          climb: "白云山",
          chess: "",
        },
        permission: {
          swim: "w",
          climb: "w",
          chess: "w",
        },
        options: [
          { key: "1", value: "爬山" },
          { key: "2", value: "游泳" },
          { key: "3", value: "下棋" },
        ],
        linkage: [
          {
            value: "1",
            effect: [
              { target: "permission.chess", type: "=", value: "n" },
              { target: "permission.swim", type: "=", value: "n" },
            ],
          },
          {
            value: "2",
            effect: [{ target: "permission.swim", type: "=", value: "b" }],
          },
          {
            value: "3",
            effect: [{ target: "permission.climb", type: "=", value: "r" }],
          },
        ],
      };
    },
  };
</script>
<!-- linkage-radio.vue -->
```
#### 复选框联动
选择下棋时减少email字段是否是合法邮箱的校验,选择爬山时其他输入字符不能少于5个字符
```html
<template>
  <el-form v-form>
    <cl-form-item label="爱好">
      <cl-checkbox
        v-model="linkageForm.linkage"
        class="m-r"
        :options="options"
        :linkage="linkage"
      />
    </cl-form-item>
    <cl-form-item label="爬山">
      <cl-input
        :permission="permission.climb"
        v-model="linkageForm.climb"
        placeholder="喜欢爬哪座山"
      />
    </cl-form-item>
    <cl-form-item label="游泳" v-if="permission.swim !== 'n'">
      <cl-input
        :permission="permission.swim"
        v-model="linkageForm.swim"
        placeholder="喜欢哪种泳姿"
      />
    </cl-form-item>
    <cl-form-item label="下棋" v-if="permission.chess !== 'n'">
      <cl-input
        :permission="permission.chess"
        v-model="linkageForm.chess"
        placeholder="喜欢哪种棋"
      />
    </cl-form-item>
    <cl-form-item label="其他">
      <cl-input
        :validate="validate.other"
        v-model="linkageForm.other"
        placeholder="其他爱好"
      />
    </cl-form-item>
    <cl-form-item label="email">
      <cl-input
        :validate="validate.email"
        v-model="linkageForm.email"
        placeholder="邮箱"
      />
    </cl-form-item>
  </el-form>
</template>
<script>
  export default {
    data() {
      return {
        linkageForm: {
          linkage: "",
          swim: "",
          climb: "白云山",
          chess: "",
          other: "",
          email: "",
        },
        permission: {
          swim: "w",
          climb: "w",
          chess: "w",
          other: "w",
        },
        options: [
          { key: "1", value: "爬山" },
          { key: "2", value: "游泳" },
          { key: "3", value: "下棋" },
        ],
        validate: {
          other: "",
          email: "required|email",
        },
        linkage: [
          {
            value: "1",
            effect: [
              { target: "permission.chess", type: "=", value: "n" },
              { target: "validate.other", type: "+", value: "min:5" },
            ],
          },
          {
            value: "2",
            effect: [{ target: "permission.swim", type: "=", value: "b" }],
          },
          {
            value: "3",
            effect: [
              { target: "permission.climb", type: "=", value: "r" },
              { target: "validate.email", type: "-", value: "email" },
            ],
          },
        ],
      };
    },
  };
</script>
<!-- linkage-checkbox.vue -->
```

每一个`Object`对象的结构为`{value: X,effect: [...]}`格式，表示当前控件的值为X时，联动`effect`中的内容，`effect`为一个数组，其中的每一个对象的结构为`{target: m, type: n, value: t}`，表示要联动的对象为m，联动的类型为n，联动的值为t。

## 联动类型
|类型|说明|示例|
|:---|:---|:---|
|=|赋值操作|`{'target': 'permission.climb', 'type': '=','value': 'w'}`,将`permission.climb`属性赋值为`w`，根据权限控制，当该属性由`n`变为`w`时则实现了由隐藏到可编辑的联动变化。|
|+|追加操作|`{'target': 'validate.other', 'type': '+', 'value': 'min:5'}`,对`validate.other`属性追加`min:5`[校验规则](/validation)。追加规则时如果原来已经存在同名规则，则会用新规则覆盖同名规则；如果原来不存在的规则，则新增。|
|-|减少操作|`{'target': 'validate.email', 'type': '-', 'value': 'email'}`,对`validate.email`属性减少`email`[检验规则](/validation)。减少规则时，会从原来的规则中移除掉同名规则。|
