分类：组件

2021
10-15

微信小程序实现简单手写签名组件的方法实例

目录背景：需求：效果一、思路二、实现1.页面与样式2.初始化3.点击时4.签名时三、总结背景：在做项目过程中，需要在微信小程序中实现手写签名组件。在网上找了微信小程序手写签名实现，但是都是不太理想。在实际运用中，会因为实时计算较多的贝塞尔曲线而产生卡顿。效果不理想。所以退一步，不需要笔锋以及笔迹模拟效果。只需要简单的手写签名实现。需求：可以实现用户在微信小程序上手写签名。需要组件化。效果一、思路在微信... 继续阅读 >
2021
07-09

详解Angular组件之生命周期(二)

目录一、view钩子1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项2、在一个变更检测周期中禁止一个视图被组装好之后再去更新视图二、content钩子1、Content钩子的调用顺序例子2、Content钩子中可以修改模版内容三、总结一、view钩子view钩子有2个，ngAfterViewInit和ngAfterViewChecked钩子。1、实现ngAfterViewInit和ngAfterViewChecked钩子时注意事项以父组件调用子组件方法中例子为基础，在父组件中实现ngAfterViewI... 继续阅读 >
2021
07-09

详解Angular组件生命周期(一)

目录概述一、钩子的调用顺序二、onChanges钩子三、变更检测机制和DoCheck()钩子概述组件声明周期以及angular的变化发现机制红色方法只执行一次。变更检测执行的绿色方法和和组件初始化阶段执行的绿色方法是一个方法。总共9个方法。每个钩子都是@angular/core库里定义的接口。import{Component,OnInit}from'@angular/core';@Component({selector:'app-life',templateUrl:'./life.component.html',styleUrls:['./life... 继续阅读 >
2021
07-09

详解Angular组件之中间人模式

目录一、中间人模式二、例子1、报价组件上加购买按钮2、父组件接收处理事件3、下单组件4、运行结果三、使用服务作为中间人一、中间人模式该组件树中除了组件1以外，每个组件都有一个父组件可以扮演中间人的角色。顶级的中间人是组件1，它可以使组件2，组件3，组件6之间互相通讯。依次类推，组件2是组件4和组件5的中间人。组件3是组件7和组件8的中间人。中间人负责从一个组件接收数据并将其传递给另一个组件。二、例子股票报价组件... 继续阅读 >
2021
07-09

如何用DevUI搭建自己的Angular组件库

目录前言创建组件库关键配置修改目录布局调整库构建关键配置开发一个Alert组件组件功能介绍组件结构分解定义输入输出定义布局测试Alert组件开发态引用组件编写单元测试发布组件前言作为前端开发者，随着公司业务的不断发展和增长，业务对组件功能、交互的诉求会越来越多，不同产品或者团队之间公用的组件也会越来越多，这时候就需要有一套用于支撑内部使用的组件库，也可以是基于已有组件扩展或者封装一些原生三方库。本文会手把手... 继续阅读 >
2021
06-23

详解vue组件之间相互传值的方式

概述我们都知道Vue作为一个轻量级的前端框架，其核心就是组件化开发。Vue就是由一个一个的组件构成的，组件化是它的精髓，也是最强大的功能之一。而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。但在实际项目开发过程中，我们需要访问其他组件的数据，这样就就有了组件通信的问题。在vue中组件之间的关系有：父子，兄弟，隔代。针对不同的关系，怎么实现数据传递，就是接下来要讲的。一、父组件... 继续阅读 >
2021
05-28

vue实现检测敏感词过滤组件的多种思路

写在前面  在做商户端敏感词检测的过程中，发现了一些问题，特在此总结。本文的行文思路是编写敏感词检测代码，前两个思路未采用组件化的开发思想，后三个思路根据需求变更，采用组件化的思想和mixins混入进行开发。需求分析v1在商户端产品模块，点击产品编辑按钮，可以修改产品的标题和价格。当没有填写产品标题时，置灰保存按钮；当填写的产品标题属于敏感词时，置灰保存按钮并给出后端返回的提示。在商户端定制模块... 继续阅读 >
2021
04-09

编写简洁React组件的小技巧

本文源于翻译文章SimpletipsforwritingcleanReactcomponents,原文作者IskanderSamatov在这篇文章中，我们会回顾一些简单的技巧，它们将帮助我们编写更简洁的React组件，并且更好地扩展我们的项目。避免使用扩展操作符传递props首先，让我们从一个应该避免的反模式开始。除非有明确的理由这样做，否则应该避免在组件树中使用扩展操作符传递props，比如：{...props}。通过这种方式传递props确实可以更快的编写组件... 继续阅读 >
2021
04-07

使用hooks写React组件需要注意的5个地方

Hook是React16.8开始新增的特性。虽然React官方文档已经作出了针对Reacthooks的相关概念的讲解，但是光看官方文档是很难将hooks使用好的，在编写hooks的过程中很容易跳进陷阱和错误。本文总结了5个不好的地方。01.不需要render的场景下使用useState在函数组件中我们可以使用useState来管理状态，这使得对状态的管理变得很简单，但是也容易被滥用，我们通过下面的代码样例看下容易忽略的地方。不推荐×functionClickButton(props)... 继续阅读 >
2021
03-30

开发一个封装iframe的vue组件

VUE的基本组成单元，我看应该是组件。用VUE开发前端项目，就是开发一个个组件，然后搭积木一样，将项目搭建出来。组件包含在页面，或者是更大的组件里面。在这里，组件与页面的界限，好像并不明显。事实上，对于单页应用，只有一个页面。组件的好处，一是可以加强复用；二是能够将特定功能封装，利于调用；三是由于职责分明，组件高内聚，组件间低耦合，利于系统功能的优化、扩展和维护。好处多多。开发组件，主要有2部分内容：1、... 继续阅读 >
2021
03-05

详解vue 表单绑定与组件

一、什么是双向数据绑定Vue.js是一个MVVM框架，即数据双向绑定，即当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。这也算是Vue.js的精髓之处了。  值得注意的是，我们所说的数据双向绑定，一定是对于UI控件来说的非UI控件不会涉及到数据双向绑定。单向数据绑定是使用状态管理工具的前提。如果我们使用vuex那么数据流也是单项的，这时就会和双向数据绑定有冲突。1、为什... 继续阅读 >
2021
03-05

详解vue3中组件的非兼容变更

函数式组件functionalattribute在单文件组件(SFC)<template>已被移除{functional:true}选项在通过函数创建组件已被移除//使用<dynamic-heading>组件，负责提供适当的标题(即：h1，h2，h3，等等)，在2.x中，这可能是作为单个文件组件编写的：//Vue2函数式组件示例exportdefault{functional:true,props:['level'],render(h,{props,data,children}){returnh(`h${props.level}`,data,children)}}/... 继续阅读 >
2021
01-27

vue 组件基础知识总结

组件基础1组件的复用组件是可复用的Vue实例。<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style><scriptsrc="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script></head><body><divid="app"><button-counter></button-counter><button-counter></button-counter><button-counter></button-counter></div><script>//定义一个名为button-counter的新组件Vue.co... 继续阅读 >
2021
01-17

详解Android的四大应用程序组件

Android的一个核心特性就是一个应用程序可作为其他应用程序中的元素，可为其他应用程序提供数据。例如，如果程序需要用某些控件来加载一些图片，另一个程序已经开发出了此项功能，且可供其他程序使用，就可以直接使用跨进程通信方式调用那个程序的功能，而不是自己再开发一个。为了实现这样的功能，Android系统必须能够在需要应用程序中的任何一部分时启动它的进程，并且实例化那部分的Java对象。所以，不像大多数其他系统中的程序... 继续阅读 >
2021
01-14

vue 递归组件的简单使用示例

前言递归相信很多同学已经不陌生了，算法中我们经常用递归来解决问题。比如经典的：从一个全为数字的数组中找出其中相加能等于目标数的组合。思路也不难，循环数组取值，不断递归相加，直到满足目标数条件。递归虽然能解决大部分，但弊处在于，很容易写出死循环的代码，导致爆栈。下面以我实际业务场景讲讲递归在vue组件中的应用。在vue中使用完成一个完整的递归，我个人认为最重要的有两点：确定好进入递归的条件;确定好跳出... 继续阅读 >
2021
01-03

jquery自定义组件实例详解

jquery自定义组件实例详解 缘起我们知道在JQ中，是允许我们自定义一些插件与扩展的。定义的方式也比较简单，采用$.extend就行，那么下面就来看看在JQ中自定义一个插件的实例JQuery如何封装一个组件效果我们先来看封装好的组件的效果图，这是一个根据组织机构选择人员的组件。实现原理我们先定义一个DbwSelectUser函数DbwSelectUser:function(options){varopt=$.extend({//是否多选：true(多选)，false(单选)multi:true,offset:'auto',//layerInd... 继续阅读 >