文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    《精通reactvue组件设计》之配合React Portals实现一个功能强大的抽屉(Drawer)组件

    前言 本文是笔者写组件设计的第六篇文章,内容依次从易到难,今天会用到react的高级API React Portals,它也是很多复杂组件必用的方法之一....二次封装一个可实时预览的json编辑器组件(react版) 正文 在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先看看实现后的组件效果: ?...能控制抽屉是否可见 能手动配置抽屉的关闭按钮 能控制抽屉的打开方向 关闭抽屉时是否销毁里面的子元素(这个问题是工作中频繁遇到的问题) 指定 Drawer 挂载的 HTML 节点, 可以将抽屉挂载在任何元素上...hidden, 后面我会单独附上css代码供大家参考. 2.3 实现destroyOnClose destroyOnClose主要是用来清除组件缓存,比较常用的场景就是输入文本,比如当我是的抽屉的内容是一个表单创建页面时...,我们关闭抽屉希望表单中用户输入的内容清空,保证下次进入时用户能重新创建, 但是实际情况是如果我们不销毁抽屉里的子组件, 子组件内容不会清空,用户下次打开时开始之前的输入,这明显不合理.

    1.7K31

    k3cloud单据插件

    ；捕获此事件，调整可选的单据类型 OnShowTrackResult上/下查过程，获得上/下查结果；捕获此事件，调整上/下查结果 OnBillInitialize 单据初始化插件，在OnInitialize...OnInitialize是继承自动态表单的方法，主要应用在动态表单中已介绍。...大部分设计是由外部系统保证，但对复杂业务系统来说，外部系统很难保证每个业务数据的正确性，甚至用大量访问系统来获取验证数据。...因此建议将数据校验按业务逻辑分开成两类，一类是界面输入校验，如字符、数字类型、格式化和表达式校验等，可以在插件保存前进行校验；而数据业务的校验，如库存校验信用检查等，通过校验服务校验。...优先通过IDE配置校验数据，如输入格式，最大最小值限定； 2. 操作控制类校验在表单的操作前插件检查； 3. 业务控制类校验在表单校验服务校验。 该事件中可以通过设置参数的Cancel终止保存操作。

    93310

    KPaaS洞察|异构系统中用户角色与权限分类及管理解决方案

    如何在多个异构系统中统一、有效地进行用户角色和权限管理，已成为企业保障数据安全和提升管理效率的关键挑战。...功能操作权限：限定用户对系统功能的操作权限，如创建、修改、删除记录以及运行报表等，可按照功能模块（如销售模块、采购模块、库存模块等）进行细分。...多系统权限管理平台提供如下两种解决方案： 方案一：表单设计统一单据制作与授权 在多系统权限管理平台内，通过表单设计将所有系统的单据统一制作。...PS：在多系统权限管理平台中，表单设计是一个功能强大的工具，它允许用户根据自己的业务需求设计表单界面。用户可以通过拖拽或点击控件来构建表单，支持桌面端和移动端的页面样式，以及预览表单设计。...其表单设计统一单据制作与授权以及用户角色梳理与同步的功能，简化了繁琐的多系统授权操作流程，减少了错误和不一致情况的发生，实现了统一、高效的权限管理。

    21721

    看完这篇，我不再疯狂码字！

    先回顾一些窘迫的时刻： 心心念念找到的优质PDF文献内容复制粘贴后乱码； 讲座卡卡卡拍了一大堆PPT，却难以整理编辑； 网页上筛选的文字只能查看，内容无法复制； 发送的图片上大段文字只能手动打字录入；...但个人和企业的证照、票据、表单种类数不胜数，一直以来业界对中长尾版式的信息识别+字段抽取的方案不足。...@物流单据识别： 如何在有限的时间内高效完成包裹的分拣和信息录入，是困扰快递行业的一大难题。...这些单据有如下特点： 企业自制的单据，如磅单、出库单、装货卸货单等。 腾讯云AI智能结构化识别专注于中长尾等版式研究及提供易用、高性价比的文字识别智能产品。...| 用AI，冲破耳朵经济的“黑洞” | 领红包封面 | AI助力，越来“粤省事” | 首批！腾讯云慧眼成为国检中心首批通过测评的人脸安全产品 | 点击下图可进入「腾讯云AI体验中心」免费体验

    2.2K30

    精通ReactVue系列之手把手带你实现一个功能强大的通知提醒框(Notification)

    数据录入型组件: 比如form表单, Switch开关, Upload文件上传等. 数据展示型组件: 比如Avator头像, Table表格, List列表等....本文将会使用React来开发该组件，也会使用到Javascript中常用的一些设计模式，比如单例模式，但是不管你使用什么框架来实现，原理都是通用的，如果感兴趣的朋友可以用vue也实现以一下。...正文 在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先来解构一下Notification组件, 一个Notification分为以下几个部分: 每一个区块都可以自定义配置...，其中要想实现Notification.info这样的方式还需要考虑到创建实例的问题，我们应该使用单例模式来控制实例的创建个数。...但是真正要实现以上需求讨论的那些通知框的功能，实际上我们还是要写很多代码来处理不同的情况的，所以为了方便大家理解，我们这里使用React Notification这个第三方库来帮我们处理基本的逻辑，笔者会基于它

    2K10

    React实战：使用Vite+TS+Antd构建React项目

    在本篇博客中，我们将介绍如何使用，vite、TypeScript、React Router和Ant Design工具和库来创建一个React项目。正文内容一、什么是Vite？...它提供了许多现代化的UI组件，如按钮、表单、弹出框和数据可视化等。Ant Design的设计风格非常优雅和简洁，同时还可以提供多语言支持和自定义主题等功能。...五、创建React项目现在，我们已经了解了一些常用的React工具和库，可以开始创建一个React项目了。...创建React项目在安装完Vite之后，我们可以使用Vite来创建一个新的React项目。...可以使用以下命令来创建一个新的React项目：vite create my-react-app --template react-ts这个命令将会创建一个基于React和TypeScript的项目，并且已经预装了一些常用的

    3K52

    看完这篇，我不再疯狂码字！

    以下文章来源于腾讯云AI ，作者Jerry 先回顾一些窘迫的时刻： 心心念念找到的优质PDF文献内容复制粘贴后乱码； 讲座卡卡卡拍了一大堆PPT，却难以整理编辑； 网页上筛选的文字只能查看，内容无法复制...； 发送的图片上大段文字只能手动打字录入； 海量纸质文件、票据需要手工录入系统。...但个人和企业的证照、票据、表单种类数不胜数，一直以来业界对中长尾版式的信息识别+字段抽取的方案不足。...@物流单据识别： 如何在有限的时间内高效完成包裹的分拣和信息录入，是困扰快递行业的一大难题。...这些单据有如下特点： 企业自制的单据，如磅单、出库单、装货卸货单等。 腾讯云AI智能结构化识别专注于中长尾等版式研究及提供易用、高性价比的文字识别智能产品。

    2.1K10

    k3 Bos开发百问百答

    【解答】 如果用系统的多级审核流程就会有多级审核的业签。可以在单据上增加多几个审核人、审核日期，在单据插件的AfterMultiCheck 事件中反写单据上的审核人、审核日期。...【摘要】自动启动审核 和自动选单 版本：K310.2SP1 问题描述：客户希望在打开一个新单据的同时，自动弹出选单的界面，显示要选择的单据。....【摘要】插件中获取单据上控件的位置、尺寸信息 版本：K310.2SP1 问题描述：请问在BOS插件开发中，可否用代码获取BOS单据上某个控件的位置、尺寸信息？以及能否用代码动态修改它们的位置？...【解答】 可以用lockcell方法锁定,如锁定单据头币别: Set dcttemp = m_BillInterface.GetFieldInfoByKey("FCurrencyID ", "", 0)...现在在服务器上运行正常，但在客户端上报组件不能创建。请问为什么？ 【解答】 估计你写的中间层组件并不是BOS中间层插件，如果只是一个普通的中间层组件，需要为该组件进行远程组件配置。

    4.7K30

    向钢铁侠学习怎样开发软件

    正文共：4345 字 预计阅读时间：13 分钟 作者：Sushrit Pasupuleti 翻译：疯狂的技术宅 来源：towardsdatascience ?...就像你第一次尝试创建的某些东西一样，大多数代码都足以显示某些内容并满足你的基本目的。点击一个 90 年代风格的按钮并很酷的打开一个显示着 Hello World 的弹出窗口，这真的是你想要的东西吗？...不断改变平台是一个巨大的痛苦，而从 WinForms 到 WPF 的转换仍然在 C# 上，一旦我切换到 React，就应该使用 JavaScript。...像 React 这样的框架非常关注可重用的组件。几乎三分之二的登录表单都可以重复使用下面这种组件。 ? 尽量减少重写相同组件和逻辑，尽可能重用。...设定一些条件，以便在检测到状态更改时，表单的某些元素能够被禁用和隐藏。例如，如果表单状态设置为“登录”，则不应显示密码确认和全名字段，并且必须将文本更改为“登录”。

    78130

    精通ReactVue系列之实现一个全局提示(Message)组件

    由于全局提示组件的设计原理和笔者上一篇写的精通React/Vue系列之手把手带你实现一个功能强大的通知提醒框(Notification)是类似的，区别主要是布局和配置参数，所以说细节和实现原理部分就不在这篇文章介绍了...数据录入型组件: 比如form表单, Switch开关, Upload文件上传等. 数据展示型组件: 比如Avator头像, Table表格, List列表等....本文将会使用React来开发该组件，也会使用到Javascript中常用的一些设计模式，比如单例模式，但是不管你使用什么框架来实现，原理都是通用的，如果感兴趣的朋友可以用vue也实现一下。...正文 在开始组件设计之前希望大家对css3和js有一定的基础,并了解基本的react/vue语法.我们先来解构一下Message组件, 一个Message分为以下几个部分: ?...基于react实现一个全局提示(Message)组件 组件的核心部分我们还是采用React Notification的模式。

    3.6K10

    Taro 小程序开发大型实战（五）：使用 Hooks 版的 Redux 实现应用状态管理（下篇）

    欢迎继续阅读《Taro 小程序开发大型实战》系列，前情回顾： 熟悉的 React，熟悉的 Hooks[1]：我们用 React 和 Hooks 实现了一个非常简单的添加帖子的原型 多页面跳转和 Taro...接着因为 LoginForm 表单数据要被清除，所以我们将选中图片的按钮又设置为可显示状态。 接着提示登录成功。 清空表单状态。...清空表单状态。...接着我们 dispatch 一个 type 为 SET_POST_FORM_IS_OPENED 的 action 用来更新 isOpened 属性，它将关闭展示发表帖子的表单弹出层 FloatLayout...本文所涉及的源代码都放在了 Github[11] 上，如果您觉得我们写得还不错，希望您能给❤️这篇文章点个在看+Github仓库加星❤️哦 参考资料 [1] 熟悉的 React，熟悉的 Hooks: https

    2K30

    通过三个实例掌握如何使用 TypeScript 泛型创建可重用的 React 组件

    市面上已经有很多关于 TypeScript 泛型的文章和教程，所以本文将聚焦于如何在 React 组件中使用泛型，让你的组件变得更加灵活和可重用。...这展示了泛型在 React 组件中的强大作用，我们可以用同一个组件处理不同类型的数据获取和展示。 三、使用泛型创建通用的 React 表单组件 在实际开发中，表单是我们常用的组件之一。...尽管在实际项目中我们通常会使用像 Formik 或 react-hook-form 这样的库来处理表单，但为了演示泛型的强大之处，我们将从头开始创建一个简单的表单组件。...使用泛型后，你可以创建一个通用的表单组件，可以用于任何类型的表单字段。这展示了泛型在 React 组件中的强大作用，使得我们的组件更加灵活和可复用。...希望这篇文章能让你更好地理解如何在 React 组件中使用泛型，并让你的组件变得更加灵活和可重用。如果你有任何问题或反馈，欢迎在评论区留言与我互动。

    26110

    前端开发必知：HTML、Vue和React中的跨域页面跳转解决方案

    前端开发必知：HTML、Vue和React中的跨域页面跳转解决方案 摘要 猫头虎博主今天将带你探讨在HTML、Vue和React环境下实现跨域页面跳转的技巧和方法。...跨域页面跳转是前端开发中的常见需求，无论是基于纯HTML环境还是现代的前端框架如Vue和React，都有不同的实现方式。...正文 HTML中的跨域页面跳转 超链接（Anchor） 传统的HTML提供了简单直接的页面跳转方法，即通过标签。你可以为其href属性设置目标页面的URL。...window.location.href = 'https://example.com'; // 新窗口打开 window.open('https://example.com', '_blank'); 表单提交...通过创建一个表单，并将其action属性设置为目标页面的URL，也可以实现跨域页面跳转。

    32010

    快来使用 React-Hook-Form 搭建强大的React表单

    没有人喜欢创建和重新创建带有验证的复杂表单，包括React开发人员。 在React中构建表单时，必须使用一个表单库，该库提供了许多方便的工具，而且不需要太多代码。...基于实用和简单这两个标准，应用程序最理想的React表单库是 React-hook-form 。...让我们看看如何在你自己的项目中使用 React-hook-form 来为你的React应用程序构建丰富的、有特色的表单。 安装 让我们来讨论一个典型的用例:一个用户注册到我们的应用程序。...这样做的原因是，当我们提交表单时，我们将获得单个对象上的所有输入值。每个对象的属性都将根据我们指定的输入名称属性进行命名。...总结 我希望本文向您展示了如何在React应用程序中更容易地创建功能性表单。 还有很多与react-hook形式相关的特性我没有在这里介绍。点击这里，官方文档应该涵盖你能想到的任何用例。

    3.7K21
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券