barriers / 阅读 / 详情

Taro 3.3 alpha 发布:用 ant-design 开发小程序?

2023-07-29 19:50:34
共1条回复
里论外几

小程序的设计并没有完全遵循 Web 规范,导致小程序生态和传统 Web 开发生态之间的割裂,海量优秀的 Web 物料并不能直接用于小程序开发。因而 Taro 在相当一段时间内生态都相对薄弱,UI 框架选择不多的问题更是深深困扰着开发者。

另一方面,业界有着存量的 H5 应用,中短期内 H5 应用适配到小程序端的需要还会存在。我们希望能减少 H5 应用迁移到小程序端的成本,甚至能够直接运行在小程序端。

Taro 团队一直在思考如何最大限度地在小程序环境中复用 Web 生态,直到 Taro 3.0 诞生后,这种想法有了落地的可能。下文将介绍基于 Taro 3.0 实现 H5 同构的思路与问题,以及我们尝试适配了三大移动端 UI 框架 WEUI Ant Design Mobile VantUI 的实验结果。

Taro 3.0 是一款重运行时的跨端框架,它通过模拟实现浏览器的 BOM 和 DOM API 实现了对 React、Vue 等 Web 开发框架的兼容。

既然已经有了浏览器环境的 BOM 和 DOM API,Taro 应用和 Web 应用之间的鸿沟在于小程序组件和 HTML 标签之间的差异。

Taro3 的渲染数据流如下:

前端框架 -> Taro DOM -> 小程序 data

HTML 标签和小程序组件的标签名、属性、事件是有差异的,而前端框架无需感知这些差异。

因此前端框架适配层、Taro DOM 层不需要改动,只要在 Taro DOM 序列化为小程序 data 这一步作映射即可。

HTML 标签相对小程序组件封装程度更低、功能更简单,可以看作是小程序组件的子集。因此可以按一定的规则,把 HTML 标签映射为小程序组件,如:

完整的标签名映射规则请看: RFC 附录一

如果 HTML 标签的属性能在对应小程序组件的属性上找到对应,则进行映射,如:

完整的属性名映射规则请看: RFC 附录二

把 HTML 特有的事件在小程序端找到相似的事件进行映射,如:

完整的事件映射规则请看: RFC 附录三

前文介绍了我们会把 HTML 标签映射为小程序组件,但是 H5 应用中使用到的 CSS 标签选择器就会失效。

因此 Taro 使用了类名去进行模拟:

Taro 提供两种内置的浏览器默认样式,可以直接引入生效:

理想很美好,但现实却略显骨感。即使 Taro 能实现 BOM、DOM API,支持使用 HTML 标签等,同构方案还是存在着一些框架层面抹平不了的差异。以下列举出若干主要限制:

在 H5 中我们可以调用 DOM API 同步获取元素的尺寸:

但是在小程序中,获取元素尺寸的 API 是异步的:

因此不能兼容那些使用了同步 DOM API 去获取元素尺寸的组件。

<canvas> 、 <video> 、 <audio> 等标签在 H5 端可以直接调用 HTMLElement 上的方法:

但是在 Taro 中,要调用组件上的原生方法,必须先创建对应的 Context :

部分样式或 CSS 选择器在小程序中不支持,如:

首先需要安装 v3.3 的 CLI 工具:

然后进入项目,把 package.json 文件中 taro 相关依赖的版本修改为 ^3.3.0-alpha.2 ,再重新安装依赖(建议先把 node_modules 文件夹删除)。

为了节省项目空间,同构功能是可选的,以 Taro 插件的形式提供。

首先开发者需要安装插件 @tarojs/plugin-html :

然后配置使用此插件:

为了验证同构功能的可用性和效果,我们对 CSS 样式库 WEUI 、React 组件库 Antd Design Mobile 、Vue2 组件库 VantUI 的所有组件进行了测试。

测试效果比较理想,甚至稍微超出我们的预期,配合各组件库自身的按需加载能力,能以小巧的体积使用丰富的组件,相信各位开发者会喜欢这个功能。

仓库地址: taro-weui

WEUI 是一个 CSS 的样式库,与框架无关,兼容性比较高,大部分组件能直接使用。

仓库地址: taro-antd-mobile

能直接兼容使用的组件大概为 80%,主要问题在于:

仓库地址: taro-vant

VantUI 的组件十分丰富,能直接兼容使用的组件大概为 70%。部分开发者会在 Taro 中配合使用 Vant Weapp,但 Vant Weapp 只能运行在微信小程序,因此对 VantUI 的直接适配是一个很好的补充。

适配过程主要遇到的问题有:

同构方案还在持续优化中,部分实现还没有最终定稿。欢迎各位开发者到我们的论坛下留言,提出您的宝贵意见~: 同构方案 RFC 。

欢迎关注凹凸实验室

相关推荐

关于ant design的书籍

Ant Design是前端代码实现方案可不是搭建静态的界面这么简单,还包含动效的解决方案,也提供动效设计风格和原则。众所周知蚂蚁集团的B端产品是一个庞大的系统,数量多且功能复杂,而且变动频繁,常常需要设计师和开发人员能快速做出工作上的配合。同时这类产品中有存在很多类似的页面以及组件,根据原子设计理论可以得到一些稳定且高复用性的内容。随着这两年B端产品的逐渐白热化,越来越多的用户对更好的用户体验有了进一步的要求。带着这样的一个终极目标。蚂蚁集团体经过大量项目实践和总结,逐步打磨出一个服务于企业级产品的设计体系——Ant Design。通过组件化设计规范,降低冗余的生产成本,让设计者专注于更好的用户体验。『Ant Design设计原则是什么』针对B端产品反复出现的一些设计体验等问题,Ant Design给出标准的设计原则,实现跨应用交互一致性的有效融合。依照这些原则使用Ant Design组件设计界面,既减少了不必要的认知成本,又能够提升设计的效率。考虑到需要适应各种定制化的业务场景,设计原则具有一定的灵活性,万变不离其宗,通过了解设计原则的构建逻辑,高效组织信息、帮助建立用户与界面的互动等原则性要求,可以衍生出更具场景特性的设计方案。①Ant Design设计原则的由来:可以说Ant design的设计规范摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华原则,并做了理论之外最佳的设计实践。其十大设计原则反过来是对书本理论的补充,我在看书的过程结合『Ant Design』能更好地理解那些原则的释义。每一个原则都用了大量通俗易懂的案例来补充说明,这也是为什么国内的企业一直以来都很喜欢使用这套组件的原因。②Ant Design设计原则的适用范围:1.我们先说说『Ant Design』的适用范围:稍微了解Ant Design的小伙伴都知道,本系统是针对B端后台系统,承载媒介是PC端的浏览器。使用的人员主要包括:用户体验设计师、交互设计师、UI设计师、前端程序员等。2.再说说『Ant Design设计原则』的适用范围:顾名思义『设计原则』主要是针对设计师在创作页面时依照的标准。虽然『Ant Design的设计原则』是Ant Design系统的一部分,但是前文已经提到。此原则是摄取了《web界面设计》和《写给大家看的设计书》两本书中的精华,所以设计师可以把这些原则运用到任何的设计领域,并不要局限于企业后台系统的PC端产品。为了方便大家理解,讲一个小故事。故事来自于《写给大家看的设计书》,作者有一年圣诞节收到一份礼物——一本关于植物的百科全书。作者翻阅之后,发现其中有一颗叫约书亚树的树,造型奇特,自己从未见过。于是决定出门转转,然而发现外面到处都是这种树。故事到这里就完了。可能大家会想,这个故事要讲一个什么道理呢?简单来说就是,当你手中有个锤子,满世界都是钉子。当你了解到下面要讲的十个设计原则后,你会发现它们处处都适用。③Ant Design设计原则的内容:十大原则如下:1亲密原则(Proximity)2对齐原则(Alignment)3对比原则(Contrast)4重复原则(Repetition)5直截了当(Make it Direct)。6简化交互(Keep it Lightweight)7足不出户(Stay on the Page)8提供邀请(ProvideInvitation)9即时反应(React Immediately)10巧用过渡(Use Transition)。『如何运用Ant Design的设计原则』:对于一个初级设计师而言,想要了解UI用户体验等知识,学习Ant Design的设计原则算是比较快能上道的,因为Ant Design是吸取了很多前辈的精华,提炼而成的系统。打个简单的比喻,对于设计师而言Ant Design就是设计师学习『视觉规范』,掌握『设计原则』最好的字典。接下来我就给大家说说我是如何快速理解Ant Design的这10条设计原则并运用到工作当中。Ant Design定义了10条设计原则,根据『席克定律』选项太多不易记忆,于是我找到了这些设计原则的共通性,将其归为4类,也就是大家只需记住四类设计原则,在工作中适当延展即可。
2023-07-29 05:06:051

antdesign是否需要付费

不需要。AntDesign前端框架(包含Axure资源)是免费开源的,可直接拿来用的。AntDesign是一套提炼和应用于企业级后台产品的交互语言和视觉体系。AntDesign源自蚂蚁金服体验技术部的后台产品开发,经过大量的项目实践和总结,希望能抽象出一套企业级的交互视觉规范,统一后台项目的前端UI设计,屏蔽各种不必要的设计差异和前端实现成本,解放设计和前端开发资源。
2023-07-29 05:06:331

如何评价 ant design

Ant Design 官方介绍: "在中台产品的研发过程中,会出现不同的设计规范和实现方式,但其中往往存在很多类似的页面和组件,给设计师和工程师带来很多困扰和重复建设,大大降低了产品的研发效率。"在这次开发的项目中,因为数据交互非常频繁,大量的表单、时间选择器、表格、单选多选框,以及各种标识状态的组件,如果光靠手写或者使用 jQuery 插件,其开发的工作量仍然是相当大的,因此,Ant Design "经过大量的项目实践和总结,沉淀出一个中台设计语言 Ant Design。旨在统一中台项目的前端 UI 设计,屏蔽不必要的设计差异和实现成本,解放设计和前端的研发资源。"同时,React 也是第一次使用,起初对于这种 Html 与 JS 代码混杂的书写格式搞得很不舒服,因为作为一个前端开发者,被"结构与逻辑分离"的思想洗脑太久了,但实际上组件的 HTML 是组成一个组件不可分割的一部分,能够将 HTML 封装起来才是组件的完全体,React 发明了 JSX 让 JS 支持嵌入 HTML 不得不说是一种非常聪明的做法,让前端实现真正意义上的组件化成为了可能。所以在使用了 React 开发一段时间后,越来越感觉到 React 封装组件的高效。而 Ant Design 则封装了一系列高质量的 React 组件,十分适用于在企业级的应用中,框架提供的 api 十分详尽,上手和使用相对简单,值得一提的是, Ant Design 使用 ES6 进行编写,因此使用过程中对 ES6 也是一次学习的机会。
2023-07-29 05:06:421

antdesign菜单栏能放控件吗

antdesign菜单栏能放控件。在AntDesign菜单栏中,可以通过设置菜单项的内容来展示文本、图标、链接等,如想在菜单栏中放置控件,可以使用AntDesign提供的SubMenu组件,SubMenu组件可以用于展示当前菜单项的内容,并且可以自定义内容,例如放置文本、图标以及各种控件等。AntDesign菜单栏是一种导航组件,一般用于网站和应用程序中的页面导航和操作菜单等。
2023-07-29 05:06:561

ant design 适合开发小程序吗

适合,但看你选择。Ant Design 是一个致力于提升用户和设计者使用体验的设计平台,有小程序开发相关途径。Ant Design更加适合管理平台的开发。
2023-07-29 05:07:061

antdesign中record值是上次的

antdesign中record值是上次的是正常现象。根据查询相关公开信息显示,在antdesign中,record的值是一个object,里面存放了这一行数据的内容,回调函数需要用到上一次record值才有意义,antdesign中record值是上次的是正常现象。AntDesign是一个UI设计语言,是一套提炼和应用于企业级后台产品的交互语言和视觉体系。
2023-07-29 05:07:131

vue本地修改antdesign单个组件

vue本地修改antdesign单个组件方法:1、打开浏览器,按下F12,button是渲染在当前页面内部,包裹在"app"的容器里。2、dropdown组件则是一部分渲染在app内,一部分渲染在"app"的外且与"#app"同级。3、对antdesign单个组件进行动态渲染即可修改。
2023-07-29 05:07:281

ant-design的table怎么强制刷新

ant-design的table强制刷新的步骤如下。1、登录ant-design品台,输入个人账号。2、左键点击界面,并按下键盘f4键,就可以强制刷新了。
2023-07-29 05:07:571

如何修改ant design部分组件的样式

一、去除Antd的Button组件两个汉字中间的空格 二、去掉input聚焦时的蓝色边框 三、去掉点击button时的动画 四、替换搜索框的icon 五、修改树形控件选中项的背景色 六、解决react里input输入时显示[object Object] 七、ant design的气泡卡片组件Popover的弹窗里设置输入框 从content属性入手,content属性值设置为包含input的组件(该组件里不要使用Input组件,直接使用input,否则崩溃) 八、设置input的宽度随输入内容长度的变化而变化: 设置一个兄弟节点span,span显示的内容绑定input的value,通过定位让span隐藏在input下 九、如何让antd的Modal组件的确认和取消不显示 十、如何改变Icon的大小和颜色
2023-07-29 05:08:091

antdesign文本框自动撑开,页面弹窗会抖动

您要问的是antdesign文本框自动撑开,页面弹窗会抖动怎么办?方法如下:1、在文本框自动撑开时,使用CSS动画或过渡效果来平滑过渡,避免弹窗位置的突然变化。2、将弹窗的位置设置为固定位置,不随文本框高度的变化而发生变化,例如可以设置弹窗的位置为屏幕中央。3、使用JavaScript监听文本框高度的变化事件,然后动态调整弹窗的位置,保持弹窗位置的稳定性。
2023-07-29 05:08:161

antdesign清除a-check选项

左键清除。根据官网例子发现勾选也能取到值,但官网没提供清除复选框残留问题,需要左键清除按钮可以清除a-check选项。ant.design是基于react开发的一个解放ui和前端的工具,它提供了一致的设计方便我们快速开发和减少不必要的设计与代码。
2023-07-29 05:08:231

antdesign中button展示隐藏

可以。antdesign中button展示隐藏是可以的,modal自带了按钮的prop设置,属性与button的prop属性一样,所以对其设置css设置,通过css的display的设置为none或者inline-block来控制按钮。
2023-07-29 05:08:381

如何设置ant design 中DatePicker的默认值

设置DatePicker的value时,将毫秒的时间转成moment对象就可以了 ,需要在项目中引入moment.js,配置就不说了。如:import Moment from "moment"var formatTime = Moment(Date.now());//参数换成毫秒的变量就OK//设置DatePicker的valuethis.setState({datePickerTime:formatTime})
2023-07-29 05:08:451

如何设置ant design 中DatePicker的默认值

设置DatePicker的value时,将毫秒的时间转成moment对象就可以了 ,需要在项目中引入moment.js,配置就不说了。如:import Moment from "moment"var formatTime = Moment(Date.now());//参数换成毫秒的变量就OK//设置DatePicker的valuethis.setState({datePickerTime:formatTime})
2023-07-29 05:09:121

引用的antdesign组件如何设置相对定位

点击Tree组件item,在右侧添加Tab,或者激活Tab。点击Tree组件item,在右侧添加Tab,或者激活Tab,这可以算是正向定位,那反向定位就是当右侧Tab页切换时左侧Tree组件选中对应item,核心代码也就是指定selectedKeys。相比较而言也不难,难点在默认打开相关父节点,当然前面过了控制好autoExpandParent这个属性就好了。
2023-07-29 05:09:191

Ant Design表单Form常用方法

Ant Design表单Form常用方法 Form.useForm() 通过 Form.useForm 对表单数据域进行交互。用法: 经 Form.useForm() 创建的 form 控制实例,常用方法如下: 1、form.setFieldsValue() 设置表单的值,更新对应的值,用法: 2、form.getFieldValue() 获取对应字段名的值。用法: 3、form.getFieldsValue() 获取一组字段名对应的值,会按照对应结构返回。用法: 4、form.validateFields() 触发表单验证。用法: 5、form.submit() 提交表单,与点击 submit 按钮效果相同,会走 onFinish 方法。用法: 6、form.resetFields() 重置一组字段到 initialValues。用法: ———————————————— 原文链接: https://blog.csdn.net/qq_29791893/article/details/106058043
2023-07-29 05:09:261

antdesign日期组件不能手动输入

在浏览器中打开,在 input 框中输入数据时, 发现内容一致都不变,内容都为 test, 如同被禁止修改一样。原因是因为在 ant design 中,input 组件的 value 属性赋值后, input 的值会一直保持 value , 修改后仍然会被重新赋值为 value。
2023-07-29 05:09:331

如何设置ant design 中DatePicker的默认值

设置DatePicker的value时,将毫秒的时间转成moment对象就可以了
2023-07-29 05:09:401

vuecli3使用Ant Design 图标

1.在脚手架中引入Ant Design 2.在main.js文件中写入: import Antd from "ant-design-vue" import "ant-design-vue/dist/antd.css" 3.在需要使用的页面引入对应的图标 举个例子,我要在home.vue里面使用 在页面使用:<home-outlined></home-outlined>就可以了。
2023-07-29 05:09:471

Ant Design Pro V5 包含演示效果创建方法

Ant Design Pro V5 包含演示效果创建方法 1、node版本 v16.13.1 2、创新项目 2.1、执行命令: 2.2、选择 ant-design-pro 2.3、选择 TypeScript 2.4、选择 complete 执行命令: 支持基本功能已近和演示的一致了。可以执行 访问: http://localhost:8000 如果需要包含主题切换功能,需要以下操作: 3、主题切换功能 3.1、执行以下安装: 4、为了拥有更多的功能,请安装ProComponents 参考: https://procomponents.ant.design/ 组件如下: 安装命令:
2023-07-29 05:09:551

如何评价 Ant Design Mobile

第一次看到ant design的时候确实有一种眼前一亮的感觉,第一个想到的是终于有个长得和bootstrap不太一样的框架了,于是在公司要做新项目的后台运维系统的时候,使用了ant design,当时使用的是0.11.X的版本,总体体验是很不错的,要用的到组件基本都有,再根据需求做一下简单的封装,基本上能满足90%的需求了。不好的地方是使用的版本对responsive支持的不是很好,在小屏幕上显示有点问题,看到1.0版本应该是在这方面做了很大改进了。总体来说,如果公司在用react的话,还是推荐ant design。
2023-07-29 05:10:151

eclipse下如何使用ant-design框架

package example;public class HelloWorld {public static void main(String[] args) {System.out.println("Hello World");}}<?xml version="1.0" encoding="utf-8"?><project default="main" basedir="."><target name="main" depends="compile, compress" description="Main target"><echo>Building the .jar file.</echo></target><target name="compile" description="Compilation target"><javac srcdir="${basedir}/src/example" /></target><target name="compress" description="Compression target"><jar jarfile="HelloWorld.jar" basedir="${basedir}/src/example"includes="*.class" /></target></project>
2023-07-29 05:10:241

蚂蚁金服的 ant design是开源的吗

我用IE8进了以一下主页(ant.design) 电脑蹦了 。。。 不知道是不是我电脑的问题
2023-07-29 05:10:503

ant design table行高怎么设置?

应为th和td有padding值,默认的大小padding值为16,综合起来高度超过你要设置的20了,如果不想要可以设置为0,或者height比较大,这样才能看出效果
2023-07-29 05:10:571

antdesignvue增加初始化不好用

antdesignvue增加初始化不好用的原因如下:1、版本不兼容:AntDesignVue的不同版本之间可能存在一些差异和兼容性问题,在使用时需要确保所使用的版本与当前应用程序的其他组件和依赖库兼容。如果版本不兼容,可能会导致初始化不成功,出现异常情况。2、组件引用错误:在使用AntDesignVue进行开发时,需要确保正确引用所需的组件和依赖库,否则可能会导致初始化不成功。如果组件引用错误,可能会出现找不到组件、组件无法显示等异常情况。
2023-07-29 05:11:121

SpringBoot整合Ant Design Pro进行部署

构建打包成功之后,会在根目录生成 dist 文件夹,然后将dist 文件夹里的的文件复制到 spring boot 项目的 /src/main/resources/static 目录下 注意:@Controller不是@RestController,使用@RestController会返回“index”字符串 输入地址 http://localhost:8080 、 http://localhost:8080/user/login 都会转发到index.html,从而展示Ant Design Pro页面 尝试访问 http://localhost:8080/user/login 时,发现现在已经能访问到index.html了,但页面报错了,访问不到js和css,错误页面如下: 需要配置一下,让js、css等静态资源去static目录下去加载 再次访问 http://localhost:8080/user/login 页面显示正常 访问 http://localhost:8080/console/commodity/product-brand 显示后台界面 关于2.3,网上有一种思路是这样的: Ant Design构建完成后只有一个index.html页面和一些js、css文件,当使用browserHistory,如果直接放在Spring Boot的resource/static文件夹下面,当浏览器直接访问或者在非 "/ “,”/index"路径刷新时,由于服务器无法正确响应,会直接触发404报错。 解决思路:浏览器访问任何404错误路径都返回 /index.html文件。剩下的事情交给前端路由 这种方式也能实现效果,但这种方式使得所有的错误请求(404)都会被拦截跳转到index.html ,其实不太严谨,而且给人的感觉是,先让其“出错”,再来“补救” 参考官方文档: Ant Design Pro
2023-07-29 05:11:191

antdesignvue增加功能初始化功能不好用

以下解决方法。1、确认版本:首先要确认使用的AntDesignVue版本是否支持初始化功能。使用的是较旧的版本,会出现初始化功能不好用的情况。可以升级到最新版本。2、检查代码:检查代码是否正确。在使用初始化功能时,需要在组件中添加created或mounted生命周期函数,并在函数中调用初始化方法。3、查看文档:查看AntDesignVue的官方文档,了解初始化功能的使用方法和注意事项。仍然无法解决问题,可以在AntDesignVue的GitHub仓库中提出问题,寻求帮助。
2023-07-29 05:11:261

antdesignvue支持tsx吗

支持。根据查询网上相关信息显示,antdesignvue是使用Vue实现的遵循AntDesign设计规范的高质量UI组件库,用于开发和服务于企业级中后台产品,支持tsx。
2023-07-29 05:11:331

antdesign 怎么当前日期

DateTime DT = System.DateTime.Now; string dt = System.DateTime.Now.ToString();对于datetime对象,主要有下面几个属性:Year、Month、Date、Hour、Minute、Secord 分别获取此实例的年、月、日、时、分、秒部分TimeOfDay、DayOfWeek、DayOfYear 分别表示获取此实例的当天的时间、获取此实例所表示的日期是星期几、获取此实例所表示的日期是该年中的第几天对于datetime对象,主要有下面几个方法:AddYears、AddMonths、AddDays...分别将指定的年、月、日数加到此实例的值上。
2023-07-29 05:11:411

antdesign适合开发小程序吗

适合,但看你选择。AntDesign是一个致力于提升用户和设计者使用体验的设计平台,有小程序开发相关途径。AntDesign更加适合管理平台的开发。
2023-07-29 05:12:051

ant design 2.0要收费吗

不收费。AntDesign是免费开源的,它是一套提炼和应用于企业级后台产品的交互语言和视觉体系统一后台项目的前端UI设计,屏蔽各种不必要的设计差异和前端实现成本,解放设计和前端开发资源。
2023-07-29 05:12:141

Ant Design TreeSelect树形选择器禁用父节点

n 个文件夹中含有文件,文件可多选,文件夹不可选。Ant Design TreeSelect的树形组件支持此功能。但父节点子节点都是可选的。 解决方案1:在所有父节点的字段上加上 disabled:true 属性。在 css 中针对ant-select-tree-checkbox-disabled类名添加 display:none 样式。可满足需求。待优化。 解决方案 2:在父节点上加disableCheckbox:true属性(是否可选)。
2023-07-29 05:12:211

antdesign路由加id

antdesign路由加id步骤如下:1、在路由配置文件中,定义需要添加id参数的路由。2、在组件中使用路由参数。3、需要跳转到该路由的地方,使用Link或者NavLink组件。4、使用Link组件来定义跳转到/user/:id路由的链接,其中user.id是要传递的id参数。
2023-07-29 05:12:291

如何设置ant design 中DatePicker的默认值

设置DatePicker的value时,将毫秒的时间转成moment对象就可以了 ,需要在项目中引入moment.js,配置就不说了。如:import Moment from "moment"var formatTime = Moment(Date.now());//参数换成毫秒的变量就OK//设置DatePicker的valuethis.setState({datePickerTime:formatTime})
2023-07-29 05:12:361

antdesign和elementui哪个好

你好,elementui与antdesign相比较的话,个人认为还是antdesign更好。
2023-07-29 05:12:511

Ant Design table设置自定义排序表头和对字段进行隐藏

react + antd 动态设置表头和对表头进行排序 1、对title字段设置显示隐藏; 2、对title字段进行拖拽排序;
2023-07-29 05:13:071

antdesign什么组件可以展示附件

rc-upload。根据该组件简介可知,使用rc-upload可以展示附件。组件(Component)是对数据和方法的简单封装。C++Builder中,一个组件就是一个从TComponent派生出来的特定对象。
2023-07-29 05:13:141

antdesign表格里怎么获取到数组里的值

1、首先在model的state建立一个数组。2、其次通过effect异步请求将请求到的数据data保存到此数组中。3、最后直接搜索获取数组里的值。
2023-07-29 05:13:331

antdesignupload验证不通过不弹窗

antdesignupload验证不通过不弹窗的解决办法:1、首先打开antdesignupload中prop的名字和rules中的属性。2、再将prop的名字和rules中的属性名改为对象.属性的格式,用引号引起来。
2023-07-29 05:13:401

ant design 中表格怎么合并单元格

在WPS软件内,首先选中你要合并的那几个单元格然后点击“合并居中”按钮如下图所示就可以把这3个单元格变为一个单元格了。如下图所示:
2023-07-29 05:13:501

ant design 页面内跳转到详情页面怎么写

import { routerRedux } from "dva/router";在models里面可以直接yield put(routerRedux.push("/"));或者在页面里面dispatch(routerRedux.push("/"));
2023-07-29 05:13:571

antdesign中的input的圆角怎样修改

如果你的浏览器支持CSS3,则使用border-radius就可以达到你要的圆角输入框效果<input type="text" style="border-radius:10px;">
2023-07-29 05:14:041

react native ant design

Drawer is a panel that displays the app"s navigation options on the left edge of the screen. 在点击控件或者某个区域后,浮出一个气泡菜单来做更多的操作。 如果设置了遮罩层,建议通过点击遮罩层的任一位置,进行退出。 分隔长列表,每次只加载一个页面。 由至少 2 个分段控件组成,用作不同视图的显示;是 iOS 的推荐组件。 规则 用于让用户在不同的视图中进行切换。 位于 APP 底部,方便用户在不同功能模块之间进行快速切换。 点击后会触发一个操作。 复选框 DatePickerView 的功能类似于 DatePicker ,但它是直接渲染在区域中,而不是弹出窗口。 用于选择日期或者时间。 用于接受单行文本。 注意:只是图片选择器,一般用于上传图片前的文件选择操作,但不包括图片上传的功能 权限相关的问题可以移步至: https://github.com/ant-design/ant-design-mobile-rn/issues/90 查看 PickerView 的功能类似于 Picker ,但它是直接渲染在区域中,而不是弹出窗口。 在一组预设数据中进行选择,e.g. 省市区选择。 在两个互斥对象进行选择,eg:选择开或关。 用作增加或者减少当前数值。 允许用户在一个区间中选择特定值,eg:控制屏幕的显示亮度。 一般可位于 NavBar 下方,通过『取消按钮』退出激活状态。 用于接受多行文本。 图标右上角的红点、数字或者文字。用于告知用户,该区域的状态变化或者待处理任务的数量。 可以折叠/展开的内容区域。 走马灯,轮播图 在水平和垂直方向,将布局切分成若干等大的区块。 单个连续模块垂直排列,显示当前的内容、状态和可进行的操作。eg:联系人列表。 当你需要一个 infinite scroll 列表时,请使用 ListView 。 从 3.0.0 开始使用 ant-design-icons 字体图标不需要单独安装但是需要 link 更多信息请查看 https://github.com/ant-design/ant-design-icons/tree/master/packages/icons-react-native 安装完成后需要link字体文件 使用方式: 在导航栏下方,一般用作系统提醒、活动提醒等通知。 进行标记和分类的小标签,用于标记事物的属性和维度,以及进行分类。 显示一个任务的进度;或者引导用户完成某个复杂任务。 从底部弹出的模态框,提供和当前场景相关的 2 个以上的操作动作,也支持提供标题和描述。内置固定的展示样式、不支持特别灵活的修改。 活动指示器。 表明某个任务正在进行中。 用作显示系统的重要信息,并请求用户进行操作反馈,eg:删除某个重要内容时,弹出 Modal 进行二次确认。 表明某个任务的当前进度。 一种轻量级反馈/提示,可以用来显示不会打断用户操作的内容,适合用于页面转场、数据交互的等场景中。 在整张页面中组织插画、图标、文字等内容,向用户反馈操作结果。 在整张页面中组织插画、图标、文字等内容,向用户反馈操作结果。 为组件内建文案提供统一的国际化支持。 Provider 使用 React 的 context 特性,只需在应用外围包裹一次即可全局生效。 我们暂时只提供英语,中文两种语言支持( 默认语言是中文 ),所有语言包可以在 这里 找到。 如果你找不到你需要的语言包,欢迎你在 英文语言包 的基础上创建一个新的语言包,并给我们 Pull Request。 本模块仅用于组件的内建文案,若有业务文案的国际化需求,建议使用 react-intl ,可参考示例: Intl demo 1 和 Intl demo 2 。
2023-07-29 05:14:121

ant design vue多样化表格,合并单元格,数据必须以行遍历

话不多说,源码奉上,效果如上图所示 表格: 1、行是 colSpan 2、列是 rowSpan design 表格的title 是不计算 索引的 ! 3、methods 方法里面实现 rowSpan 1、 注意 这里 key 是传值 声明方法的时候可以后写 2、使用的时候 在 mounted 里面调用即可 4、customRender 实现合并
2023-07-29 05:14:191

Ant Design - Table Columns中dataIndex的含义

在Ant Design中,如果我们要使用table,可以到官网文档中查看详细的例子。 但是在例子中,你会发现类似以下的数据结构: 可以看到,数组的object中有key,dataIndex,title,render这些keys。 title以及render都好理解,title指的是thead中每个th的显示字段,render指的是用什么样的方式来显示数据(通常为一个返回ReactNode的函数)。 那么dataIndex指的是什么意思呢? 我们先来看一下官方文档怎么说: 由于英文文档解释的很潦草,这里我把中文文档中的解释也加了进去。 我们看到,假设我们dataIndex为name,那么我们在table的dataSource中指定的每一个数据中,都必须包含有name为key的对象,而显示出的数据就是相应key对应的数 假设我们的数据结构更为复杂一些,例如name: {firstname: "Eagle", lastname: "Luo"},那么我们需要将dataIndex改为name.firstname或name.lastname来获取下一层级的数据。 结合以上例子来看,dataIndex的含义就比较明确了。需要注意的一点,如果我们已经使用了唯一的dataIndex,那么我们就不再需要给每个column加上key了。
2023-07-29 05:14:331

antdesignupload校验失败不展示文件对话框

点击label。根据博客园显示,antdesignupload不显示文件选择框,点击label就行了。antdesign作为react的前端框架,提供的upload组件为上传文件提供了很大的方便。
2023-07-29 05:14:521

Ant Design Pro Vue使用心得

路由和菜单是组织起一个应用的关键骨架,pro 中的路由为了方便管理,使用了中心化的方式,在 ==router.config.js== 统一配置和管理。 目前脚手架中所有的路由都通过 ==router.config.js== 来统一管理,在 ==vue-router== 的配置中我们增加了一些参数,如 ==hideChildrenInMenu==,==meta.title==,==meta.icon==,==meta.permission==,来辅助生成菜单。其中: 具体请参考 https://pro.loacg.com/docs/router-and-nav 菜单根据 ==router.config.js== 生成,具体逻辑在 ==src/store/modules/permission.js== 中的 ==actions.GenerateRoutes== 方法实现。 在 Ant Design Pro 中,我们抽离了使用过程中的通用布局,都放在 ==/components/layouts== 目录中,分别为: 在 Ant Design Pro 中,一个完整的前端 UI 交互到服务端处理流程是这样的: 从上面的流程可以看出,为了方便管理维护,统一的请求处理都放在 @/src/api 文件夹中,并且一般按照 model 纬度进行拆分文件,如: 其中,==@/src/utils/request.js== 是基于 ==axios== 的封装,便于统一处理 ==POST==,==GET== 等请求参数,请求头,以及错误提示信息等。具体可以参看 ==request.js==。 它封装了全局 request 拦截器、response 拦截器、统一的错误处理、baseURL 设置等。 例如在 api 中的一个请求用户信息的例子: 参考: https://pro.loacg.com/docs/biz-icon 、 参考: https://pro.loacg.com/docs/i18n 参考: https://pro.loacg.com/docs/authority-management -更换logo在==srccomponents oolsLogo.vue==中更换 在==vue.config.js==文件中修改 在文件==srcutils equest.js==中设置 动态方法的引用 调用获取动态方法
2023-07-29 05:14:591

ant design mobile支持vue吗?

可以,用这个 https://github.com/SmallComfort/react-vue ,它把你的 vue 代码编译成 react,你可以直接在 .vue 文件内引用 antd 的组件
2023-07-29 05:15:071

vue引入ant-design报错总结

一、 https://github.com/ant-design/ant-motion/issues/44 看了github上的issue,发现解决办法有多样: 1、降低less版本到^3以下(但是webpack4要求3以上,所以不推荐) 2、开启JavaScript vue-cli4下 配置webpack, 查看vue-cli的官网, https://cli.vuejs.org/zh/ 摘自官网: 注意:vue-cli4在配置时,需要嵌套一层-----》 lessOptions:{},否则报错:
2023-07-29 05:15:141

ant-design-vue 框架搭建(一)

vue create 项目名 cd 项目名 yarn add ant-design-vue main.js 中的配置 详细地址 npm add node-sass@4.14.1 npm add sass-loader@7.3.1 package.json变为 这里好像会自动添加,无需导入 npm add vue-router 在src/router/index.js中配置好路由后,记得导入main.js 如果出现下面的错误 执行这条语句npm install --save core-js即可 npm install --save axios vue-axios .env.development 配置环境变量 通过下面这个语句查看存在.env里的内容 axios 的使用 axios用法的详细地址 安装cookies npm add nprogress 添加进度条 在main.js 中导入样式 在需要用到的地方
2023-07-29 05:15:211