form-create é um componente de geração de formulário que pode gerar renderização dinâmica, coleta de dados, validação e funções de envio por meio de JSON. Oferece suporte a 3 estruturas de interface do usuário e oferece suporte à geração de qualquer componente Vue. Construído em 20 componentes de formulário comumente usados e componentes personalizados, não importa o quão complicado seja o formulário, ele pode ser facilmente manipulado.
Embora o form-create tenha muitos componentes integrados, se os componentes de que precisamos não forem componentes convencionais ou o efeito dos componentes integrados não for satisfatório, então precisamos de componentes personalizados para alcançar. Afinal, os componentes personalizados são muito flexíveis e pode ser realizado qualquer efeito que você deseja.
Este artigo apresentará como adicionar um componente personalizado ao designer de formulário e permitir que o form-create o exiba para enviar o formulário com êxito.
Como adicionar um menu ao lado esquerdo do designer de formulário
Documento oficial: http://designer.form-create.com/guide/menu.html
Oficial incorporado main, aide, layouttrês grupos. Você pode adicionar um novo menu a um grupo existente ou adicionar um novo grupo e adicionar um menu.
Adicionar um novo menu a um grupo existente
//插入拖拽按钮到`main`分类下
this.$refs.designer.appendMenuItem('main', {
icon: 'icon-checkbox',
name: 'checkbox',
label: '单选框'
})
Adicionar grupo e adicionar menu
//插入自定义菜单
this.$refs.designer.addMenu({
title: "自定义组件",
name: "custom",
list: [{
icon: 'icon-checkbox',
name: 'checkbox',
label: '单选框'
}]
});
O código acima cria um novo grupo e adiciona um novo menu 自定义组件neste grupo . 单选框Se o menu recém-adicionado aqui estiver associado a um componente personalizado, precisamos inserir as regras de geração do componente primeiro, caso contrário, é apenas um novo botão e o arrastar e soltar é inválido. Modifique o código acima da seguinte maneira:
//插入自定义组件signboard的生成规则(详细内容下一节讲)
this.$refs.designer.addComponent(signboard);
//插入自定义菜单
this.$refs.designer.addMenu({
title: "自定义组件",
name: "custom",
list: [{
icon: signboard.icon,
name: signboard.name,
label: signboard.label
}]
});
});
componentes personalizados
Descrição oficial do documento: http://designer.form-create.com/guide/component.html
Adicionar componentes personalizados do Vue
Não há nada a dizer sobre este conteúdo, assim como seu desenvolvimento habitual Vue自定义组件. Após a conclusão da criação, precisamos definir as regras de geração do componente para que ele possa ser form-createusado em .
Regras de geração de componentes personalizados
A regra de geração de componentes é um arquivo js, que define um objeto e alguns atributos que precisam ser configurados para geração de componentes, comumente usados como: tipo, campo, título, props, opções, etc. Para descrições de campos específicos, consulte : http:// www .form-create.com/v2/guide/rule.html#%E6%89%A9%E5%B1%95%E9%85%8D%E7%BD%AE Exemplo de código
:
import SignBoard from "./components/esign/SignBoard.vue";
const label = "电子签名";
const name = "SignBoard";
function makeRequiredRule() {
return {
type: "Required",
field: "formCreate$required",
title: "是否必填"
};
}
export const signboard = {
//拖拽组件的图标
icon: "icon-checkbox",
//拖拽组件的名称
label,
//拖拽组件的 key
name,
//拖拽组件的生成规则
rule() {
//如果在 props 方法中需要修改 rule 的属性,需要提前在 rule 上定义对应的属性
return {
//生成组件的名称
type: name,
field: "signValue", //表单组件的字段名称，即v-model绑定的值
title: label,
component: SignBoard, //挂载自定义组件
effect: {
//设置自定义属性
fetch: "",
required: "请点击签名" //必填校验
},
//校验规则
validate: [{
type: "string", required: true, message: "请点击签名" }],
props: {
},
// options: []
};
},
props() {
return [
makeRequiredRule(),
// makeOptionsRule("options"),
{
type: "switch", field: "disabled", title: "是否禁用" },
{
type: "input", field: "action", title: "上传的地址(必填)" },
{
type: "Struct",
field: "headers",
title: "设置上传的请求头部",
props: {
defaultValue: {
} }
}
];
}
};
A definição das regras do componente no documento oficial não é muito detalhada. Se você encontrar problemas que não sabe definir, consulte o código das regras dos componentes integrados, https://gitee.com/ xaboy/form-create-designer/tree/ master/src/config/rule
Neste ponto, adicionamos um novo menu, que pode ser arrastado para a tela e visualizado.
O diagrama de efeitos é o seguinte:
o conteúdo da configuração do componente à direita corresponde ao propsconteúdo da configuração do arquivo de configuração acima.
form-create exibe componentes personalizados
O documento oficial afirma: http://www.form-create.com/v2/guide/custom-form-component.html
Os componentes personalizados a serem gerados devem ser vue.componentmontados globalmente por métodos ou formCreate.componentmontados por métodos
Por exemplo:
formCreate.component('TestComponent',component);
Após a conclusão da montagem, podemos gerar componentes personalizados de acordo com as regras de geração de componentes emitidas pela interface. As regras de geração de componentes aqui são as regras que você definiu anteriormente. Mas tem um problema aqui, quando inserimos a regra do componente no form designer, definimos ela component, para que esse campo também seja entregue quando a interface for entregue, o que fará com que o arquivo do componente customizado não seja encontrado, porque você não pode Este componente personalizado não é usado no mesmo projeto, então adicionei um pouco de processamento aqui e removi manualmente o campo do componente ao entregar as regras do componente. Dessa forma, não teremos problemas montando o componente personalizado primeiro e depois gerando o form-create.
Sobre como usar componentes customizados no form-create é mais ou menos assim, também encontrei muitas referências durante o desenvolvimento, mas não sabia o que eu disse, então descrevi meu processo de operação completamente de novo.