首页
AI Coding
NEW
沸点
课程
直播
活动
AI刷题
APP
插件
搜索历史
清空
创作者中心
写文章
发沸点
写笔记
写代码
草稿箱
创作灵感
查看更多
会员
登录
注册
前端小技巧
myLong
创建于2024-02-28
订阅专栏
一些前端小技巧,比如组件封装、样式动画等等
等 3 人订阅
共20篇文章
创建于2024-02-28
订阅专栏
默认顺序
默认顺序
最早发布
最新发布
uniapp - AI 聊天中的md组件
一、前言 之前已经完成了 AI 聊天页面的整体布局,也说明了消息是由数组渲染渲染的,现在就来处理这些消息的容器(组件)。 二、需求分析 项目中的需求是聊天内容里要有文件、图片、文本等内容。这篇文章主要
uniapp - AI 聊天页面布局的实现
一、前言 这个 AI 聊天涉及的东西还是比较多的,接口请求、页面布局、组件封装、点击交互等等。我想我得分几篇文章来说明,这篇文章主要是针对这个布局的实现。 二、布局分析 这是总体的UI布局,大致可以分
uniapp - 键盘上推 踩坑
一、前言 这是一个很常见很普遍的功能了,在输入框获取到焦点后,弹出键盘,把页面上推。在 uni-app 关于 textarea 的介绍中有相关配置。 那从哪里开始推,推哪个地方,我的整个【输入框-键盘
uniapp - textarea 高度 踩坑
一、前言 在做一个聊天的输入框,需求是输入框高度自定撑开,到达一定高度后(5行)就不再撑开,高度固定,可以滚动已填写的内容。图如下: 二、方案 传统的思路是 min-height 和 max-heig
富文本格式粘贴的问题
回到最初的问题,利用富文本编辑器,编写邮件模板,或者说,提供一个编辑器,用来编写邮件。如果说编写邮件而已,大可以在 word 或者其他编辑器里写好内容,但这里的一个特点就是 占位符 。
技巧-富文本焦点乱跳的问题
一、前言 上面做了邮件模板,保证了参数的不可编辑,在点击参数名称时,向富文本编辑器插入该参数。但是在编辑页面时,参数列表与富文本的内容已经回显,这时候编辑参数名称,光标会自动跳转到富文本编辑器。
技巧-富文本标签插入
一、背景 说到富文本,就像现在在使用的这个富文本一样。这个插入,就像点击工具栏,插入图片或者表格。 业务需求是做一个邮件模板,前端书写某些参数用作占位符,后端将占位符替换成具体的内容。
技巧-复制网页上的内容
平常我们复制网页上的内容时,总是弹出让你登录或者开vip的弹窗,又或者没反应,当你粘贴时发现是这个网页的登录网址。嘿嘿,我们玩浏览器的,还能让这个给难住吗?上号,看看怎么搞他!!
技巧-文字镂空效果
做一个文字镂空页面,需要一个背景图。涉及text-stroke和background-clip。 最基本的有一个蒙层和文字;
技巧-随机图片库
有一个库 Lorem Picsum,可以生成随机的图片。当我们写页面或者demo时,需要用到某些图片。以前还在苦恼到哪里去找图片时,现在方便了,这个库可以随机生成图片。
技巧-可视化大屏适配思考
如何实现一个大屏?大屏和一般的pc适配有什么不同?带着这两个问题进行了思考,并查阅了一些资料,下面是我的得到的关于实现大屏的一些想法。
基础-pc网页的常用布局方案
电脑是一个大屏,现在大部分电脑的分辨率都是 1920 x 1080了,也就是1080P,代表高清。那在pc的设计阶段,一般的ui都是按照这个 1080P来设计的。
技巧-拖拽元素排序
页面有几个元素按顺序纵向排列,希望能够拖拽这些元素进行排列。 1.添加拖拽属性 这时候元素可以拖拽了,即跟着鼠标光标移动,但该元素的原来位置没有变。
技巧-立体文字
给文字添加影子,让其看起来有立体的效果。首先啊,用 文字阴影 是做不出来的,可以把阴影当做一个元素,使用 伪元素 来做。
基础-磨砂玻璃效果
给文字打码,码的效果类似于磨砂玻璃。涉及到透明、背景滤镜。 backdrop-filter还可以做一些比较有趣的效果,比如鼠标移入之后,灰白图片变为彩色。
技巧-处理中文输入法导致的高频问题
有一个input文本框,进行@input之后,在文本框内输入文字会实时触发其绑定的方法。在输入英文字符时没有问题,但当输入中文时,还没有选择文字,所绑定的方法已经执行了。
技巧-统计字符串中某个字符出现的频率
有这么一个字符串 gagglajgeogqpgghuueugjjageihgjglpg,其中每个字符出现了一次或多次,现在需要把每个字符串出现的次数算出来。
技巧-圆形放大的hover效果
使用3层 元素 实现 鼠标经过的放大效果。涉及到定位,背景图片,伪元素,继承,裁剪,鼠标经过,过渡效果等。
技巧-防抖和节流的简单理解
一、防抖 防抖函数,可以这么理解,不是立即做,而是等待一段时间之后再做,如果等待期间又触发,那就重新计时。举个例子,就像游戏里的回城,如果被打断了,那就重新回城。
技巧-封装自定义指令loading效果
一般情况下,会封装一个loading组件,导入,注册,使用,然后根据数据的加载状态,控制loading组件的显示与隐藏,但不方便使用,现在封住一个自定义的loading指令