间距 组件css
css变量声明使用
今天跟朋友聊天被推荐的一个css变量使用,感觉挺方便的,适用于各种页面,类似于scss less ~好处是减少样式代码的重复性，增加样式代码的扩展性和灵活性 简单使用: <style> :root { --color:#000; --width:200px; } body { color : var ......
CSS 实现垂直居中的5种方法
方法1：使用绝对定位和负外边距对块级元素进行垂直居中 优点：兼容不错。缺点：必须提前知道被居中块级元素的尺寸 .father { width: 300px; height: 300px; background-color: red; position: relative; margin-bottom ......
css组合选择符和less中&作用
1.后代选择器（空格分隔） 2.子元素选择器（>分隔） 3.相邻兄弟选择器（+分隔） 4.普通兄弟选择器（~分隔） 1.后代选择器 ： 用于选取某元素的后代元素 以下实例选取所有 <div> 元素中的<p> 元素 <style> div p { background-color:yellow; } ......
关于React父组件数据更新传入子组件的数据不是最新的解决方法
利用 componentWillReceiveProps 再子组件加入componentWillReceiveProps 当props跟新时就会触发此函数 那就可以再这里判断 当需要变更的数据变化时复制进去就可以了 componentWillReceiveProps(nextProps) {// 第 ......
CSS实现菜单选项向外圆角效果
最终效果 实现方法 1. ::before、::after伪元素裁剪拼接 完整代码： 示例中图标引用了iconfont，地址 点击这里 html代码 <body> <ul> <li class="active"><i class="iconfont"></i></li> <li><i ......
Element Plus错误警告 | Popper: Detected CSS transitions on at least one of the following CSS properties: "transform", "top", "right", "bottom", "left".
这个错误的解决方案如下： 1. 禁用 "computeStyles" 修饰符的 adaptive 选项：这将允许平滑过渡，但可能会降低性能。 禁用 "computeStyles" 修饰符的 adaptive 选项，可以在创建 Popper 实例时指定 modifiers 参数，并将 computeS ......
CSS 属性 选择器
具有特定属性的HTML元素样式 具有特定属性的HTML元素样式不仅仅是class和id。 注意：IE7和IE8需声明!DOCTYPE才支持属性选择器！IE6和更低的版本不支持属性选择器。 属性选择器 下面的例子是把包含标题（title）的所有元素变为蓝色： 实例 [title] { color:bl ......
扒一扒Nacos、OpenFeign、Ribbon、loadbalancer组件协调工作的原理
大家好，我是三友~~ 前几天有个大兄弟问了我一个问题，注册中心要集成SpringCloud，想实现SpringCloud的负载均衡，需要实现哪些接口和规范。 既然这个兄弟问到我了，而我又刚好知道，这不得好好写一篇文章来回答这个问题，虽然在后面的聊天中我已经回答过了。 接下来本文就以探究一下Nacos ......
css 设置tr的边框
有时候有设置tr边框的需求，写下如下css tr{ border-bottom: 1px solid red; } 发现不起作用，后来在w3c上查了查，原来只有table，th和td有独立的边框，tr并无边框。 但我想实现每一行都存在下边框，其他边框不存在，该怎么办呢？ 有两种实现方法： 方法1： ......
ExtJS-UI组件-ActionSheet
更新记录 2023年3月8日 发布。 ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 转载请注明出处:https://www.cnblogs.com/cqpanda/p/17192499.html 作用 Ext.ActionShee ......
ExtJS navigationview UI组件
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 转载请注明出处:https://www.cnblogs.com/cqpanda/p/17181663.html 更新记录 2023年1月5日 初始化。 NavigationView i ......
ExtJS UI组件 - Titlebar
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 转载请注明出处:https://www.cnblogs.com/cqpanda/p/17183638.html 更新记录 2023年3月6日 初始化。 说明 标题条组件。 基本使用 E ......
ExtJS 轮播图UI组件(Carousel)
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 转载请注明出处: https://www.cnblogs.com/cqpanda/p/17177307.html 更新记录 2023年4月11日 发布。 Carousel组件（Mord ......
ExtJS-UI组件-Toolbar
ExtJS教程汇总：https://www.cnblogs.com/cqpanda/p/16328016.html 转载请注明出处:https://www.cnblogs.com/cqpanda/p/17183638.html 更新记录 2023年3月6日 初始化。 说明 工具栏。 基本使用 { x ......
css 清楚浮动的4种办法
1、浮动：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样 2、我们使用position：fixed，absolute和float都会造成浮动效果。 3、clear 属性的值可以是 lef ......
css 实现三栏布局（圣杯布局）的5种方法
效果图： 1、浮动：设置float: left;，配合负margin来实现 .left { float: left; width: 100px; height: 200px; background-color: red; } .right { float: right; width: 100px; ......
css 实现单行、多行溢出 省略号显示
1、单行溢出显示省略号： { white-space:nowrap; overflow:hidden; text-overflow:ellipsis;} 2、多行溢出省略号： ①、（缺点：此方法因为使用了webkit属性，故只能chrome等浏览器有效） { -webkit-line-clamp: ......
2、CSS 颜色定义
CSS颜色定义方法：（RGBA \ HSLA \ opacity \ transparent为css3 新特性） 1、直接使用颜色名/16进制值 2、使用RGBA: RGB代表光的三原色，Red、Green和Blue,CSS3中可以增加一个值a（alpha），表示颜色的透明度:取值范围0-1之间，0 ......
新的 CSS 伪类函数 :is() 和 :where()
新的 CSS 伪类函数 :is() 和 :where() Posted on 2022-08-15 14:39 书中枫叶 阅读(48) 评论(0) 编辑 收藏 举报 :is() 和 :where() 标题中的 <b> 标签进行颜色调整： h1 > b, h2 > b, h3 > b, h4 > b, ......
自己做的一个css文字逐字显示效果
原理很简单，就是通过opacity+animation控制显示，每个文字通过animation-delay延迟显示达到逐字显示的效果 两个函数，一个拆分字符串，一个初始化动画 function sliceStrWithSpan(str) { var strArr = str.slice(''); v ......
【ArkTS】向右看齐--解决Scroll子组件无法默认右对齐的问题
【关键字】 Scroll、Scroller、scrollEdge、文本右对齐 【问题描述】 在学习Scroll组件的使用时，本地使用的API版本是api 9，布局是这样的：使用row包裹Scroll，然后Scroll包裹Text，想要默认让文本显示的时候都是右对齐的，写的代码如下： 实现效果如下 ......
arroyo 组件简单说明
arroyo 架构上与k8s 的架构特别类似，包含了控制面板:api server 、controler、存储（k8s 是etcd，arroyo 是pg）、web ui （类似dashboard）数据面板: scheduler 以及worker（serverless 具体执行的地方），对于状态存储基 ......
前端工程化实战：React 模块化开发、性能优化和组件化实践
前端工程化实战是指通过组织工作流程、使用工具和技术来提高前端开发效率和质量的一种方法。常见的前端工程化实践包括模块化开发、自动化构建、代码检查和测试、性能优化等。下面将简要介绍模块化开发、性能优化和组件化实践。 ......
在vue中为vuecal组件中的一个按钮添加点击事件
现在需要为一个按钮添加点击事件 由于vuecal文档中没有该按钮的点击事件，所以考虑使用原生dom为其添加点击事件 使用原生dom添加 使用this.$nextTick+.onclick this.$nextTick(() => { // 获取对应的 dom元素 var otest = docume ......
CSS实现单行或者多行文本溢出隐藏并且显示省略号
一、单行超出显示省略号如果文字超出父元素指定宽度，文字会自动换行，而连续不间断数字和英文字母（没有其他字符）不会自动换行； 详细步骤： 第一步(不换行)：white-space:nowrop;（对于连续的数字或者英文字母可省略）第二步（溢出隐藏）overflow:hidden;第三步（文本溢出显示省 ......
如何通css实现 渐变下划线，以及交互动画
<h2 class="title"><span >围殴围殴我饿我饿我饿哦我饿围围殴围殴我饿我饿我饿哦我饿围殴围殴我饿我饿我饿哦我饿我饿围殴围殴殴围殴我饿我饿我饿哦我饿我饿围殴围殴</span></h2> css： .title { line-height: 2; color: #333; } .ti ......
任何自定义动态右键菜单组件
如果自定义动态右键菜单组件，模块与模块之间互不影， 细节样式可以后续补充 注意点：Teleport解决定位问题，Transition解决动画问题 contextMenu组件 <template> <div ref="continerRef"> <slot></slot> <Teleport to=" ......
vite 开发按需引入的组件库 rollup
转载：https://blog.csdn.net/qq_27314517/article/details/128675552 package.json { "name": "...", "private": false, "version": "0.1.9", "main": "./lib/inde ......
Antd之a-date-picker和a-time-picker组件传值
使用a-date-picker和a-time-picker组件时传到后端，传参值为类似"2023-04-10T06:58:44.000Z"这样的字符串。 要恢复正常传值，可将前端传到后端日期格式统一为”YYYY-MM-DD HH:mm:ss”。 1.a-date-picker组件添加 show-ti ......
vue3 封装组件中使用 pinia 报错
报错信息： Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia? const pinia = createPinia() app.use(pinia ......