@we-weaver/linkable

安装

npm install --save @we-weaver/linkable

描述

支持块和块之间的联动操作，目前支持value 和 visible显示和隐藏

使用

<el-form ref="form" :model="form" label-width="80px">
    <el-form-item label="BMI">
      <el-row type="flex" :gutter="16">
        <el-col :span="8">
          <el-input :linkages="heightLink" name="height" placeholder="身高"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input :linkages="weightLink" name="weight" placeholder="体重"></el-input>
        </el-col>
        <el-col :span="8">
          <el-input disabled name="BMI" placeholder="BMI"></el-input>
        </el-col>
      </el-row>
    </el-form-item>
</el-form>

  import { connectField } from '@we-weaver/linkable';
  
  export default {
    components: {
      'el-input': connectField(Input),
    },
    data() {
      const calcBMI = (weight, height) => {
        let BMI = null;
        if (weight && height) {
          BMI = weight / ((height * height) / 10000);
          BMI = BMI.toFixed(2);
        }
        return BMI;
      }
      return {
        heightLink: [
          {
            condition: '{{ $self.value && $hole.weight.value }}',
            target: 'BMI',
            ok({ $self, $hole }) {
              return {
                value: calcBMI($hole.weight.value, $self.value)
              }
            }
          }
        ],
        weightLink: [
          {
            condition: '{{ $self.value && $hole.height.value }}',
            target: 'BMI',
            ok({ $self, $hole }) {
              return {
                value: calcBMI($self.value, $hole.height.value)
              }
            }
          }
        ],
      }
    }
  }

说明

connectField(Component, Options) Component 组件 Options 配置

// 默认配置
Options = {
  events: ["input:value"],  // 配置Component事件的行为，这个意思就是说，监听input事件，改变value属性
}