0.0.1 • Published 4 years ago
@zhgjn/linkable v0.0.1
@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属性
}
0.0.1
4 years ago