移動端 · CAP開發文檔

## cap3自定義控件 1、自定義控件事件注冊目錄：移動工程/v5/form/js/components/suiCustom.js 示例： /** * demo自定義控件-附件，返回html * @param (html, inputAttrObj, options, auth) * @returns {string} */ api.buildAttaChmentDom = function(html, inputAttrObj, options, auth){ //此處是渲染控件的dom //如果是relation或者relationform，則修改__state if (options.fieldInfo.inputType == 'relation' || options.fieldInfo.inputType == 'relationform') { options.model.__state = 'modified'; } inputAttrObj['value'] = options.model.value; inputAttrObj['readonly'] = 'true'; inputAttrObj['class'] += ' sui-hide'; html += '<input ' + cmp.sui.attrBuilder(inputAttrObj) + '/>'; html += '<div ' + cmp.sui.attrBuilder({class: 'sui-form-ctrl-value-display sui-form-ctrl-attachment', id: options.fieldInfo.name}) + '>'; //attachment控件 --start options.model.attData = options.model.attData || []; var items = options.model.attData; if (items.length > 0) { html += '<div class="attachment-items">'; items.forEach(function(item){ item.remoteSource = !item.remoteSource ? (cmp.util.getSeeyonPath() + '/rest/attachment/file/' + item.fileUrl) : item.remoteSource; html += ' <div class="attachment-item">'; html += ' <i class="attachment-icon ' + _FileExtensionFilter(item.extension) + '"></i>'; var dom = document.createElement('div'); dom.classList.add('attachment-content'); dom.classList.add('allow-click-attachment'); dom.setAttribute('see-att-data', JSON.stringify(item)); dom.innerHTML = item.filename; html += dom.outerHTML; if (auth == 'edit') { html += ' <i class="see-icon-v5-form-close-circle-fill"></i>'; } html += ' </div>'; }); } else { html += '<div class="attachment-items items-empty">'; } html += '</div>';//items-end if (auth == 'edit') { html += '<div class="attachment-add-item">' + (cmp.i18n('form.attachment.uploadLimit') || 'Please upload file which limited as 50MB') + ' <div class="icon-add">' + ' <i class="see-icon-v5-form-add"></i>' + ' </div>' + ' </div>'; } html += '</div>'; //attachment控件 --end html +='</div>'; return html } 2、自定義調用目錄：移動工程/v5/form/js/components/sui_utils.js 示例： case 'customcontrol': if(options.model.customType&&options.model.customType!='text'){ //自定義控件 -demo inputAttrObj['customType'] = options.model.customType; switch (inputAttrObj['customType']){ case 'attachment': html += SuiCustom.buildAttaChmentDom (html, inputAttrObj, options, auth) break; default: break; } }else{ inputAttrObj['value'] = options.model.value; inputAttrObj['readonly'] = 'true'; inputAttrObj['class'] += ' sui-hide'; html += '<input ' + $.sui.attrBuilder(inputAttrObj) + '/>'; html += '<div ' + $.sui.attrBuilder({class: 'sui-form-ctrl-value-display sui-form-ctrl-static ' + (!options.model.value ? 'sui-form-placeholder' : ''), id: options.fieldInfo.name}) + '>' + (options.model.display || options.fieldInfo.desc || '').escapeHTML() + '</div>'; } break;