Kinlink 代码示例

// 字段联动示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;
    // 初始化时隐藏额外信息字段
    form.hideField('额外信息');
  });

  kinlink.events.on(kinlink.FormEvents.FIELD_CHANGE, (data) => {
    const { fieldName, value } = data;
    const form = kinlink.formApi;

    // 当"类型"字段值为"高级"时，显示"额外信息"字段
    if (fieldName === '类型' && value === '高级') {
      form.showField('额外信息');
    } else if (fieldName === '类型') {
      form.hideField('额外信息');
    }
  });
})();

// 自定义字段验证示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    const form = kinlink.formApi;

    // 添加邮箱格式验证
    form.addFieldValidator('邮箱', (value) => {
      if (!value) return;
      if (!/^\w+@\w+\.\w+$/.test(value)) {
        return '请输入有效邮箱地址';
      }
      return undefined; // 验证通过
    });
    
    // 添加手机号验证
    form.addFieldValidator('手机号', (value) => {
      if (!value) return;
      if (!/^1[3-9]\d{9}$/.test(value)) {
        return '请输入有效的手机号码';
      }
      return undefined;
    });
  });
})();

// 移动端适配示例
(function() {
  kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
    if (kinlink.layoutApi.checkIsMobileDevice()) {
      // 移动端布局简化
      const form = kinlink.formApi;
      
      // 隐藏次要信息字段，简化移动端表单
      ['次要信息1', '次要信息2', '详细描述'].forEach(field => form.hideField(field));

      // 增大输入框触控区域
      form.setFieldComponentStyle('姓名', {
        fontSize: '16px',
        padding: '12px 8px'
      });
      
      // 自定义移动端操作栏
      kinlink.layoutApi.mobileHideFormActionBar();
      
      // 创建更符合移动端操作习惯的界面元素
      // ...此处省略具体实现代码
    } else {
      // PC端完整布局逻辑
    }
  });
})();