如何从父组件打开物料UI Modal？ - 腾讯云开发者社区

然后又无意间刷到“Portal”，才知道Modal的实现还有如此妙的方式，顺而想着干脆把UI组件库的实现原理看完。本文将讲述 Modal弹窗类的实现原理： 1....在我们页面有时需要一些特定的弹窗时，通过改UI组件过于麻烦。这时切图仔级别的会想：简单啊，创建一个给绝对定位不就得了。倘若只是当前路由页用，也还凑合。...类购物车的弹窗，又该如何处理数据及渲染？再进一步想，万一组件库会作为绩效考核，拿到每个环境都长得不一样，咋整？ ?...1.1 Jquery时代的弹窗实现初初入行时，去各种资源站，找Jquery的UI组件，想必三四年经验的前端们都曾乐此不疲。 ?...需要通过redux或props管理数据，可这对于一个UI组件来说过于臃肿了。 React官方也意识到构建脱离于父组件的组件挺麻烦的，于是在v16版本推了一个叫“Portal ”的功能。

2.8K4 1

如何基于 WebComponents 封装 UI 组件库

如何基于 WebComponents 封装 UI 组件库 https://www.zoo.team/article/web-components 前言作为一名前端攻城狮，相信大家也都在关注着前端的一些新技术...="(e) => { data = e.detail }"> 封装我们自己的组件库设计目录结构第一步：要有一个优雅的组价库我们首先要设计一个优雅的目录结构，设计目录结构如下 . └── cai-ui.../components/xxx/xxx.js' 按需导入我们只需要导入组件的 js 文件即可如 import 'cai-ui/components/Button/index.js' 自定义配置主题支持主题色可配置...import '//cai-ui'; <!...我总结了以下几点：更加偏向于 UI 层面，与现在数据驱动不太符，和现在的组件库能力上相比功能会比较弱，使用场景相对单一。

1.5K2 0

您找到你想要的搜索结果了吗？

是的

没有找到

如何构建UI组件设计规范？

通过本文，你将学习到 Uber ，Pinterest ，Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范。 ...那么，如何才能构建有效的UI组件设计规范呢？以下有几个方面需要引起注意。保持视觉和功能一致性功能一致性使你的产品更具可预测性。...鉴于目前的行业情况， UI组件还可以作为用户体验组件，将功能和视觉一致性结合起来。...组件是用于UI设计和开发的一种很好的办法，使用较少的可重用的组件，更好地实现一致性。 ...但是，如何才能真正地创建基于组件的设计规范，使设计人员和开发人员可以利用该规范进行协作？在创建基于组件的设计规范前，你必须了解它是什么。

4871 0

如何构建UI组件设计规范？

通过本文，你将学习到 Uber ，Pinterest ，Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范。...那么，如何才能构建有效的UI组件设计规范呢？以下有几个方面需要引起注意。...鉴于目前的行业情况， UI组件还可以作为用户体验组件，将功能和视觉一致性结合起来。...组件是用于UI设计和开发的一种很好的办法，使用较少的可重用的组件，更好地实现一致性。...但是，如何才能真正地创建基于组件的设计规范，使设计人员和开发人员可以利用该规范进行协作？在创建基于组件的设计规范前，你必须了解它是什么。

1.2K3 0

修改源码实现小程序UI库iview weapp的modal组件自定义宽高

记一下小程序端UI库iview weapp的modal模态窗自定义样式修改因为项目需要在模态窗中显示内容，小程序端的iview没有类似popup这种的弹出框，所以就选择了modal对话框来承载弹出内容...修改方法如下: # 组件修改组件代码: 1.modal的index.js 添加宽高属性 Component({ externalClasses: ['i-class', 'i-class-mask...的index.wxml修改: i-modal-body、i-modal-main的标签增加style属性设置 ......modal-main" style="width:{{width}}px;"> ......组件标签上传入属性 modal title="新增银行卡" i-class="iot-modal" :visible="visible" :actions="actions

1.8K3 0

如何优雅的设置UI库组件的属性？

UI库提供了很多组件，组件又带有很多属性，有一些常用属性我们可以记住并且手撸，但是有些不常用的属性，或者需要设置多个属性，这样的情况下写起来就麻烦了，有时候还要打开帮助文档看看属性是怎么设定的，需要设置什么样的属性值...演示地址 https://naturefw.gitee.io/nf-rollup-ui-controller/ 源码 https://gitee.com/naturefw/nf-rollup-ui-controller...js的对象和模板代码，支持 json 格式；大部分属性值都可以通过鼠标点击的方式生成，少数的需要手敲；工作量比较大、精力有限，目前仅支持 element-plus 的部分组件，理论上可以支持任何UI...小类原则按照UI库提供的组件按照功能，“原子”级别按照值的类型，比如数组和非数组。...https://naturefw.gitee.io/nf-rollup-ui-controller/ 生成模板和代码属性设置完毕之后，可以生成template模板代码，以及js里定义的对象，支持json

1.7K1 0

国际大厂如何创建UI组件设计规范？看这里

通过本文，你将学习到 Uber ，Pinterest ，Shopify 和 Airbnb 等知名网站如何利用组件构建统一的UI / UX 设计规范。 ?...那么，如何才能构建有效的UI组件设计规范呢？以下有几个方面需要引起注意。 1、保持视觉和功能一致性 ? 功能一致性使你的产品更具可预测性。...鉴于目前的行业情况， UI组件还可以作为用户体验组件，将功能和视觉一致性结合起来。...组件是用于UI设计和开发的一种很好的办法，使用较少的可重用的组件，更好地实现一致性。 ?...但是，如何才能真正地创建基于组件的设计规范，使设计人员和开发人员可以利用该规范进行协作？在创建基于组件的设计规范前，你必须了解它是什么。

1.4K3 0

如何解决打开VS2010后没有UI界面的问题

不知道大家有没有遇到过这样的问题：当打开VS2010的时候，出现这样一个初始化界面。但是几秒钟之后，初始化界面消失，但是VS2010的UI界面并没有出现。

1.5K8 0

如何动态更改Element-UI组件尺寸以及源码分析

如何更改尺寸？...$ELEMENT.size = size // 这一步很关键，这是 Element-UI 向 Vue 暴露的实例属性，下面会源码分析 this....达到及时更新当前页面 }, render: function(h) { return h() // avoid warning message }, } ELement-UI...里组件是如何使用 $ELEMENT.size 的？...$ELEMENT.size 使用 }, }, }; 总结知识点：单页应用刷新页面路径的处理全局组件属性的控制

4.5K3 0

React进阶(5)-分离容器组件,UI组件(无状态组件)

Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的容器组件...(聪明组件) 在使用Redux中,无非就是做两件事情如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer纯函数中初始化),同时还需要监听store...,也叫做傻瓜组件,因为它不具备任何逻辑,功能比较单一，只负责页面填充渲染 UI组件(傻瓜组件/无状态组件) UI组件:纯函数,没有任何副作用,给指定的输入,有指定的输出的函数,换句话说,只根据外部组件的...props进行渲染组件的好处:拆分成容器组件与UI组件,不仅仅是功能上的分离,还有就是它无状态了,让UI组件只根据props来渲染UI,不需要state,让UI组件无状态,是拆分组件的目的,这样维护起来比较方便...,接收父组件的传来的props值,应该用props去接收,如果是用class声明的组件,则用this.props去接收,子组件从父组件中接受props值,在子组件内没有涉及到状态state了至于上面子组件接收

1.5K0 0

React进阶(5)-分离容器组件,UI组件(无状态组件)

Redux实现了一个todolist,但是代码依旧不够完美,我们继续进行拆分的在本节中,你将学习到,如何拆分容器组件,UI组件(无状态组件),让组件尽可能的保持功能的单一,减少组件的状态的 · 正...· 文 · 来 · 啦 · ♚ 容器组件(聪明组件) 在使用Redux中,无非就是做两件事情如何获取store的状态(组件中通过getState方法获取),并且初始化组件的状态(在Reducer...UI组件(傻瓜组件/无状态组件) UI组件:纯函数,没有任何副作用,给指定的输入,有指定的输出的函数,换句话说,只根据外部组件的props进行渲染组件的好处:拆分成容器组件与UI组件,不仅仅是功能上的分离...,还有就是它无状态了,让UI组件只根据props来渲染UI,不需要state,让UI组件无状态,是拆分组件的目的,这样维护起来比较方便,保持各组件的功能单一,组件的状态交给容器组件去维护,容器组件通过props...,接收父组件的传来的props值,应该用props去接收,如果是用class声明的组件,则用this.props去接收,子组件从父组件中接受props值,在子组件内没有涉及到状态state了至于上面子组件接收

9641 0

如何用 Karma，Jasmine，Webpack 测试 UI 组件系列（一）配置篇

如何用 Karma,Jasmine,Webpack 测试 UI 组件系列（一）配置篇为什么要测试从个人经验来看，测试是防止软件缺陷的最好方法。...生产开发中当我们修改一小段代码，大部分的开发人员会手动打开他们的浏览器或 POSTMAN来验证它是否仍然正确。这种方法(手工测试)不仅低效，而且会隐藏一些你未发现的缺陷。...本文介绍如何使用 Karma,Jasmine,Webpack 编写单元测试代码。

2.1K15 0

mint-ui的search组件如何在键盘显示搜索按钮

/div> 解决办法： mint-ui...的search组件input默认也是type="search"类型的，但是还需要在外层包一组form标签，并且带有action,就会在键盘中出现搜索按钮。...如上是方法一：在手机键盘点击搜索的时候，页面会刷新，所以给form加一个target，target规定在何处打开 action URL，再放入一个隐藏的iframe,起名为form的target的值，

1.8K7 0

element-ui中upload组件如何传递文件及其他参数

最近项目用到了vuethink，里面集成了element-ui，之前一直用的是bootstrap框架，对js也是一知半解，然后也用过vue.js，但也是学的不通透的，然后就各种入坑。...下面就分析一下我使用element-ui遇到的问题以及解决方法吧，如有不足请指正。...首先在element-ui的官网里有对upload组件的简单的介绍 1 <el-upload 2 class="upload-demo" 3 action="https://jsonplaceholder.typicode.com...PHP提供的url进行传参，这是最直接能想到的方式，但是因为action中是post方式的，而PHP后台我使用的restful方式的url，post方式无法实现传参，我试了好几种都没能成功，也不知道要如何改成

2.2K3 0

分析snapmaker Luban软件的导入图片，图片处理的源码

该函数是从父级组件传下来的，allowedFiles参数定义了能够导入的文件类型，也是从父级组件传下来的。...找一下他的父级组件，搜了一下，父级组件叫做SVGEditor.tsx 然后我们发现allowedFiles参数与onChangeFile 参数也是从上游传下来，我们就找。...SVGEditor.tsx组件被两个组件引用，如下图，我们要找的是LaserVisualizer下的在该组件Visualizer.tsx中排查，我们发现参数allowedFiles 最多支持这些格式...path.extname(file.name).toLowerCase(); if (extname === '.stl' && this.props.materials.isRotate) { modal...this.props.materials.isRotate) { this.props.cutModel(file, () => { modal({

1061 0

vue3使用 vant ui 3 如何获取组件 popup dom的高度？

我目前使用的是 vant-ui 3.1.2 popup 弹出层组件，我想要获取弹出层的高度来计算一些东西，但是使用常规定义 ref dom 的方式总是无法获取，最终找到方案如下： vant-ui 官方文档

3921 0

React 模态框 Modal 组件详解

引言模态框（Modal）是一种常见的 UI 元素，用于显示重要信息或请求用户输入。在 React 中，实现一个功能完善的模态框组件并不复杂，但也有许多细节需要注意。...本文将从基础概念出发，逐步深入到 React 模态框组件的实现，包括常见问题、易错点及如何避免，并提供代码案例解释。什么是模态框？...简单的模态框组件首先，我们来实现一个简单的模态框组件。这个组件包含一个按钮，点击按钮后显示模态框，模态框内有一个关闭按钮。...setIsModalOpen(false); }; return ( 打开模态框...如果希望禁用此功能，可以在 Modal 组件中添加一个属性来控制。

3071 0

【Vue】怎样让你的组件变得更灵活？

引言在我们的日常开发中，我们一般会引入做的比较成熟的第三方UI框架，比如ElementUI。...当我们在调用UI框架中的组件时，会发现常用的调用方式有两种，一种是直接在页面中嵌入组件： ......另一种则是在js中通过方法调用：ElMessageBox.confirm(...)可以看到ElementUI中的组件使用方式更加灵活，可以满足不同场景的需求，那么这两种不同的调用方式都是如何实现的呢...Modal title="信息提示" // 弹框标题 content="打开了一个弹框" // 弹框内容 ......然后我们进一步介绍了Vue3中如何去自定义指令，以及自定义指令相关的传参数方法，使用自定义指令可以辅助我们的组件实现更多更加复杂的功能。

2971 0

jQuery插件jQueryUI

jQuery UI是一个功能丰富的jQuery插件集合，提供了一系列用户界面组件和效果，可用于创建交互性强、视觉效果丰富的网页应用程序。.../base/jquery-ui.css">基本用法 jQuery UI提供了一系列易于使用的UI组件和效果，包括对话框、拖拽、排序、自动完成、日期选择器等。...使用modal选项将对话框设置为模态对话框，即禁止用户操作其他页面元素。在对话框初始化之后，我们通过点击按钮来打开对话框。通过dialog("open")方法，可以打开对话框。...常用UI组件和效果以下是jQuery UI中一些常用的UI组件和效果：对话框（Dialog）：用于创建自定义对话框。拖拽（Draggable）：使元素可被拖动。...除了上述组件和效果外，还有很多其他组件和效果可供选择和使用。可以根据具体需求，在jQuery UI官方文档中查找相关组件的详细文档和示例。

2.6K2 0

Vue 组件插槽：父子组件间的内容分发和插槽作用域

组件来定义，在这个组件中，我们定义了两个插槽来分发父级作用域分发的内容，一个用于渲染模态框标题，一个用于渲染模态框主体内容： modal-header"> modal-example> 可以看到，对于组件中的命名插槽，需要通过 ......，除此之外，我们还可以在父级作用域获取组件插槽中的动态数据，从而通过条件过滤实现内容的动态渲染，你可以将其理解为在父级作用域引用带有动态数据的插槽，那如何在父级作用域中调用组件插槽中的数据呢？...{{ language }} 我们通过一个循环列表渲染从父级作用域传入的...为此，Vue.js 生态提供了 Vue Loader 来支持编写单文件 Vue 组件，从而方便我们以更加灵活、更加现代的方式构建功能强大的 Vue 应用，下篇教程，学院君将给大家演示如何 Vue CLI

2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

Vue3 & React Hooks 新UI组件原理：Modal 弹窗

如何基于 WebComponents 封装 UI 组件库

如何构建UI组件设计规范？

如何构建UI组件设计规范？

修改源码实现小程序UI库iview weapp的modal组件自定义宽高

如何优雅的设置UI库组件的属性？

国际大厂如何创建UI组件设计规范？看这里

如何解决打开VS2010后没有UI界面的问题

如何动态更改Element-UI组件尺寸以及源码分析

React进阶(5)-分离容器组件,UI组件(无状态组件)

React进阶(5)-分离容器组件,UI组件(无状态组件)

如何用 Karma，Jasmine，Webpack 测试 UI 组件系列（一）配置篇

mint-ui的search组件如何在键盘显示搜索按钮

element-ui中upload组件如何传递文件及其他参数

分析snapmaker Luban软件的导入图片，图片处理的源码

vue3使用 vant ui 3 如何获取组件 popup dom的高度？

React 模态框 Modal 组件详解

【Vue】怎样让你的组件变得更灵活？

jQuery插件jQueryUI

Vue 组件插槽：父子组件间的内容分发和插槽作用域

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐