组件keep-alive元素alive
使用vue2从零开始搭建自己的组件库（完整版）
前言 在前端开发中，除了常用的UI组件库以外，我们还会涉及到基于公司业务，需要定制化开发一些业务组件，还有随着项目的增多，开发人员的增多，为了提高工作效率，我们就需要统一管理好已开发好的业务组件。这时候我们就需要搭建自己的组件库，因为涉及到一些公司的业务，我们只能发布到私服的npm上。下面几点是我们 ......
Angular 复习与进阶系列 – Component 组件 の Angular Component vs Shadow DOM (CSS Isolation)
CSS Global Effect CSS style 是全局影响的. 假设我们有 2 个组件, AppComponent 和 TestComponent app html <div class="container"> <h1>Outside Hello World</h1> <app-test> ......
uni-app 滚动通知组件的实现
uni-app 滚动通知组件的实现 一、实现思路 二、使用scroll-view 组件实现 <template> <view class="notice"> <scroll-view class="notice-scroll" :scroll-y="true" :scroll-with-animat ......
html 元素定位与接口请求总结
1.下拉框 环境： 元素定位： <select id="sid" onchange="" style="margin-right: 20px; width: 100px;"> <option id="dev" value="dev">测试</option> <option id="prod" val ......
2023.04.06 - vue组件中动态指定监听的值
业务场景：高拍仪给出的视频信息API回调里会不断返回图像数据。因为有主副摄像图像信息，并且两个图像信息会二选一展示在DOM容器里。所以就是二对一的关系。 // 主摄像数据 let priPic:string = ''; // 副摄像数据 let subPic:string = ''; // 展示在容 ......
Angular 复习与进阶系列 – Component 组件 の Pipe
介绍 Pipe 类似于 Template Syntax, 它的用途是 transform value for display. 参考: Docs – Understanding Pipes DatePipe 一个简单的例子, 我有一个 JavaScript 的 Date value, 我要 disp ......
Angular 复习与进阶系列 – Component 组件 の Template Binding Syntax
前言 这篇介绍一些基本的 Angular 模板语法. 参考 Docs – Understanding binding Render, Event Listening and DOM Manipulation Angular 作为一个 MVVM 框架, 有两个任务是一定要处理好的 1. First R ......
封装表单组件，如果通过计算属性来解决打破单项数据流问题
平常当我们封装表单组件时候，子组件修改了内容，会通过emit的方式触发父组件来修改数据或者使用发布订阅方式 ，从而保证单项数据流不被打破。 那如何 用computed 计算属性来简化该方式呢 form页面 <el-input v-model='model.keyword'> <el-select v ......
可视化组件g2之分组箱型图、柱形图、散点图简单使用
<!-- 引入 G2 文件 --> <script src="./plugins/g2.v5.min.js"></script> <style> .container { display: flex; } .div { height: 500px; } </style> <!-- 创建图表容器 -- ......
二次封装ui组件，如何做到属性，作用域插槽以及 实例方法的穿透使用
A页面： 在使用二次封装的组件 <MyInput ref='inputRef' v-model='data' placeholder='xxxx'> <template #prepend> ...... </template> <template #append> ...... </template ......
2023.04.06 - 使用mixin动态混入，对vue组件中的数据做兼容经验总结(xp)
业务场景：在一个高拍仪的硬件设备中，厂家给了两套不同的API，分别支持win XP 和 winXP以上版本的系统，而这两套API的实现方式截然不同，一套使用的是http通信，一套是使用scoket通信，方法的调用自然也是不同。 我需要在同一组件兼容这两套代码。这种需求下很明显，我除了修改组件里的函数 ......
直播平台软件开发，简单易修改的弹框组件
直播平台软件开发，简单易修改的弹框组件 弹窗组件 适用框架 vue, uniapp 使用再uniapp 框架中可简单修改标签与尺寸单位后使用 px与rpx <!-- vue --><template><div v-show="ishide" @touchmove.stop.prevent><!-- ......
SpringBoot中如何编写一个优雅的限流组件？
很早以前，我曾写过两篇介绍如何在SpringBoot中使用Guava和Redis实现接口限流的文章。具体包括： 使用Guava实现单机令牌桶限流 使用Redis实现分布式限流 现在，一个问题摆在我们面前：如何将这两种限流机制整合到同一个组件中，以便用户随时切换呢？ 显然，我们需要定义一个通用的限流组 ......
CSS伪元素详解以及伪元素与伪类的区别
前面已经介绍过CSS伪类的知识，具体可见前文 CSS伪类知识详解。 伪元素常常被误解为伪类，主要在于他们的语法相似，都是对于选择器功能的扩展，相似程度很高导致被混淆。 本文通过详细介绍伪元素和常见的使用方法，最后也会分析下伪元素与伪类的基本区别。 基本描述 CSS伪元素也是应用于选择器的关键字，允许 ......
元素的多重排序
应用场景：渲染用户界面时，因为关键的消息和特殊的事件应该优先显示在其他信息之前。 numbers = [8, 3, 1, 2, 5, 4, 7, 6] //原始数据 group = {8, 3, 5, 7} //优先级高的数据， def sort_priority(numbers, group): ......
selenium元素定位详解
前端页面定位有很多种插件，如谷歌浏览器插件chroPath，还有selenium Builder，下面我们通过chroPath插件来通过xpath和css selector进行定位 一、xpath进行定位 1.xpath定位之//*定位当前页面下的所有元素 2.xpath定位之通过属性进行定位 3. ......
selenium环境搭建及基本元素定位方式
谷歌驱动下载地址： http://chromedriver.storage.googleapis.com/index.html 一、selenium简介 由于requests模块是一个不完全模拟浏览器行为的模块，只能爬取到网页的HTML文档信息，无法解析和执行CSS、JavaScript代码，因此需 ......
用python的pywinauto组件控制微信Windows版
使用pywinauto组件可以比较容易的操纵微信Windows版进行信息发送和接受 前提如下 1、已经安装有关python组件。 2、微信已经打开和登录，下面的代码不负责登录操作。 3、微信版本3.9.2.23 具体实现有两个类 1、帮助类Helper import datetime class H ......
Springboot 系列 (29) - Springboot+HBase 大数据存储（七）| Springboot 项目通过 Phoenix 组件使用 JDBC 访问 HBase
Phoenix 是 HBase 的开源 SQL 皮肤，通过 Phoenix 可以使用标准 JDBC API 代替 HBase 客户端 API 来创建表，插入数据和查询 HBase 数据。Phoenix 会把 SQL 编译成一系列的 Hbase 的 scan 操作，然后把 scan 结果生成标准的 J ......
JavaScript中数组元素删除的七大方法汇总
原文链接：https://blog.csdn.net/u010323023/article/details/52700770 在JavaScript中，除了Object之外，Array类型恐怕就是最常用的类型了。与其他语言的数组有着很大的区别，JavaScript中的Array非常灵活。今天我就来总 ......
handsontable 前端类似excel组件
基于table https://handsontable.com/docs/javascript-data-grid/demo/ 基于canvas canvas-datagrid 基于canvas SpreadJS ......
6.15 组件传参
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> </head> <body> <div ......
DOM：让一个元素跟随鼠标移动而移动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="wi ......
如何在vue3获取 DOM 元素
获取dom的ref元素名称，要对应暴露的名称，不然会出现无效的dom报错，也就是拿到的是null 在setup中，使用ref（null）获取dom 不能直接在setup里面拿到dom的值，因为setup对应的生命周期是created,所以必须在后续的生命周期钩子里面拿到，比如onMounted 注意 ......
java库和组件
以下排序是按照从技术组件到开发框架到代码工具，也有一些实在不好分类的，就放到最后了。 WEB 容器 Tomcat https://tomcat.apache.org/ Jetty https://www.jetty.com/ JBoss https://www.jboss.org/ Resin ht ......
React中函数组件与类组件的区别
一、定义。 1、类组件 类组件，顾名思义，也就是通过使用ES6类的编写形式去编写组件，该类必须继承React.Component 如果想要访问父组件传递过来的参数，可通过this.props的方式去访问； 在组件中必须实现render方法，在return中返回React对象，如下： class We ......
React父组件调用子组件属性和方法
子组件暴露自身的属性和方法 父组件使用ref绑定对应的子组件。调用即可 ###类组件绑定ref示例 import React from 'react' import Child from './Child' export default class Parent extends React.Comp ......
子组件传递数据给父组件的三种方法
1.props <template> <!-- App.vue --> <div id="app"> <!-- 向子组件中传入函数 --> <Student :receive="receive"></Student> </div> </template> <script> import Studen ......
JavaScript：数组删除指定元素
1.shift()方法 用于删除数组中的第一个元素。 注：此方法会改变数组的长度 let arr = [1,2,3] arr.shift() // 删除1 // arr为[2,3] 2.pop()方法 用于删除数组中最后一个元素 注：此方法会改变数组的长度 let arr = [1,2,3] arr ......