Meta tags:
keywords=阅读模式;
description=自定义组件的阅读模式允许在组件内部控制如何显示回显内容，使得在阅读模式下可以以不同于编辑模式的方式展示数据。;

Headings (most frequently used words):

阅读模式, 指南, 基础, 扩展, 教程, 开启阅读模式, 自定义组件阅读显示, 拖拽规则, 自定义回显内容, 挂载组件和拖拽规则,

Text of the page (most frequently used words):
modelvalue (8), template (8), const (8), value (6), rule (6), formdata (5), this (4), fcdesigner (4), script (4), input (4), return (4), formcreate (4), name (4), vue (4), div (4), span (4), form (4), create (4), options (4), ref (4), finput (3), val (3), props (3), from (3), import (3), preview (3), custom (3), readmode (3), error (3), 阅读模式 (3), 渲染函数 (2), page (2), 组件联动 (2), finputrule (2), designer (2), change (2), emit (2), update (2), specialcontent (2), isspecialcondition (2), formcreateinject (2), definecomponent (2), else (2), 自定义输入框 (2), uniqueid (2), label (2), icon (2), main (2), menu (2), optionsjson (2), parsejson (2), rulejson (2), response (2), api (2), fapi (2), option (2), model (2), pro (2), 移动端 (2), element (2), navigation (2), vue3版本 (2), vue2版本 (2), next, previous, pager, addcomponent, refs, 挂载拖拽规则, addcompoent, 挂载组件, 在完成组件和拖拽规则的定义后, 您需要将它们挂载到, 实例中, 以使其能够在设计器中使用, 挂载组件和拖拽规则, methods, 特殊内容, 根据特殊条件生成回显内容, special, 根据业务逻辑判断是否满足特殊条件, computed, object, 上下文, string, default, export, 表单模式下, 阅读模式下, _fc, class, 在一些复杂的场景中, 您可能需要根据用户的输入或其他条件动态调整回显内容, 可以通过动态计算, 来实现这一需求, 自定义回显内容, info, title, 在这里定义, 很重要, field, type, event, utils, lib, unique, 配置只对, 的规则生效, 对于已经保存的规则不会自动应用自定义阅读模式, 如果需要为已有规则启用自定义阅读模式, 需要手动编辑规则配置或重新拖拽组件, 后续新拖入设计器, 重要提示, 在定义拖拽规则时, 可以通过设置, 来指定该组件的阅读模式为自定义模式, 这将告知设计器使用自定义的回显逻辑来渲染组件, 拖拽规则, 自定义组件阅读显示, 加载表单规则失败, console, catch, 设置为阅读模式, true, data, then, getformrules, get, axios, 加载之前存储的表单规则和配置, onmounted, null, 表单数据, setup, handlesubmit, submit, length, app, 以下示例展示如何设置表单为阅读模式, 阅读模式示例, 通过设置, 配置项, 您可以让表单进入阅读模式, 以便在无需编辑时展示表单内容, 开启阅读模式, 这个功能仅在, 版本的设计器中提供, 详细了解, 版本功能, 自定义组件的阅读模式允许在组件内部控制如何显示回显内容, 使得在阅读模式下可以以不同于编辑模式的方式展示数据, 导出vue组件, 数据库表设计, 组件中获取设计器, 控制表单配置项显隐, 控制组件配置项显隐, 调整配置面板顺序, 可视化设计组件插槽, 默认收起组件分组, 限制容器可拖入组件, 组件类型切换, 组件值格式转换, 组件多语言配置, 隐藏组件和菜单, 设置组件默认配置, 设置表单默认配置, 生成选项配置规则, 获取表单结构树, 控制组件操作权限, 控制功能模块显隐, 覆盖内置组件, 渲染时监听事件, 打印表单内容, 表单渲染, 保存表单设计, 上传组件, 设置表单默认值, 常见问题, 扩展表单api, 扩展字体, 扩展右侧配置规则, 扩展自定义操作, 扩展容器组件, 扩展组件, 扩展模板, 远程请求, 扩展组件分组, 管理字段列表, 管理字段id, 快捷键, inject, 表单验证规则, 表单多语言, 跨项目渲染, 移动端自适应, 表单api, 内置分组和组件, 助手方法, 原型方法, 设计器的事件, 设计器的数据和方法, 设计器的配置, ts类型定义, 高级版表单设计器, 渲染器文档, 源码集成, agent, skills, ai表单助理, 已开源, 多语言, 版本对比, vant, ant, design, plus, sidebar, 返回顶部, appearance, 高级版, 更新记录, 在线演示, 产品手册, 开发文档, search, skip, content,

Text of the page (random words):
阅读模式 fcdesigner skip to content fcdesigner search k main navigation 官网 开发文档 产品手册 在线演示 vue2版本 vue3版本 移动端 更新记录 3 5 0 vue2版本 vue3版本 高级版 appearance menu 返回顶部 sidebar navigation 指南 介绍 element ui 版本 element plus 版本 ant design vue 版本 vant 移动端 版本 版本对比 图标 多语言 ai表单助理 已开源 agent skills 源码集成 渲染器文档 高级版表单设计器 基础 ts类型定义 设计器的配置 设计器的数据和方法 设计器的事件 原型方法 助手方法 内置分组和组件 变量 表单api 移动端自适应 跨项目渲染 表单多语言 组件联动 阅读模式 渲染函数 表单验证规则 inject 快捷键 扩展 管理字段id 管理字段列表 扩展组件分组 远程请求 扩展模板 扩展组件 扩展容器组件 扩展自定义操作 扩展右侧配置规则 扩展字体 扩展表单api 教程 常见问题 设置表单默认值 上传组件 保存表单设计 表单渲染 打印表单内容 渲染时监听事件 覆盖内置组件 控制功能模块显隐 控制组件操作权限 获取表单结构树 生成选项配置规则 设置表单默认配置 设置组件默认配置 隐藏组件和菜单 组件多语言配置 组件值格式转换 组件类型切换 限制容器可拖入组件 默认收起组件分组 可视化设计组件插槽 调整配置面板顺序 控制组件配置项显隐 控制表单配置项显隐 组件中获取设计器 数据库表设计 导出vue组件 意见 建议 目录 阅读模式 自定义组件的阅读模式允许在组件内部控制如何显示回显内容 使得在阅读模式下可以以不同于编辑模式的方式展示数据 这个功能仅在 pro 版本的设计器中提供 详细了解 pro 版本功能 开启阅读模式 通过设置 options preview 配置项 您可以让表单进入阅读模式 以便在无需编辑时展示表单内容 阅读模式示例 以下示例展示如何设置表单为阅读模式 vue template div id app form create v if rule length v model formdata v model api fapi submit handlesubmit rule rule option option form create div template script setup import formcreate from form create designer const rule ref const options ref 表单数据 const formdata ref const fapi ref null onmounted 加载之前存储的表单规则和配置 axios get api getformrules then response const rulejson optionsjson formdata response data rule value formcreate parsejson rulejson options value formcreate parsejson optionsjson formdata value formdata options value preview true 设置为阅读模式 catch error console error 加载表单规则失败 error script 自定义组件阅读显示 拖拽规则 在定义拖拽规则时 可以通过设置 readmode custom 来指定该组件的阅读模式为自定义模式 这将告知设计器使用自定义的回显逻辑来渲染组件 重要提示 readmode custom 配置只对 后续新拖入设计器 的规则生效 对于已经保存的规则不会自动应用自定义阅读模式 如果需要为已有规则启用自定义阅读模式 需要手动编辑规则配置或重新拖拽组件 js import uniqueid from form create utils lib unique const label 自定义输入框 const name finput const finputrule menu main icon icon value label name event change rule t return type name field uniqueid 在这里定义 很重要 readmode custom title 自定义输入框 info props props return 自定义回显内容 在一些复杂的场景中 您可能需要根据用户的输入或其他条件动态调整回显内容 可以通过动态计算 modelvalue 来实现这一需求 vue template div class _fc value 阅读模式下 template v if formcreateinject preview span v if isspecialcondition specialcontent span span v else modelvalue span template 表单模式下 template v else el input modelvalue modelvalue update modelvalue input el input template div template script import definecomponent from vue export default definecomponent name finput props modelvalue string 注入 formcreate 上下文 formcreateinject object computed isspecialcondition 根据业务逻辑判断是否满足特殊条件 return this modelvalue special specialcontent 根据特殊条件生成回显内容 return 特殊内容 methods input val this emit update modelvalue val this emit change val script 挂载组件和拖拽规则 在完成组件和拖拽规则的定义后 您需要将它们挂载到 fcdesigner 实例中 以使其能够在设计器中使用 js 挂载组件 fcdesigner addcompoent finput 挂载拖拽规则 this refs designer addcomponent finputrule pager previous page 组件联动 next page 渲染函数