前端小技巧

一、前言 之前已经完成了 AI 聊天页面的整体布局，也说明了消息是由数组渲染渲染的，现在就来处理这些消息的容器（组件）。 二、需求分析 项目中的需求是聊天内容里要有文件、图片、文本等内容。这篇文章主要

一、前言 这个 AI 聊天涉及的东西还是比较多的，接口请求、页面布局、组件封装、点击交互等等。我想我得分几篇文章来说明，这篇文章主要是针对这个布局的实现。 二、布局分析 这是总体的UI布局，大致可以分

一、前言 这是一个很常见很普遍的功能了，在输入框获取到焦点后，弹出键盘，把页面上推。在 uni-app 关于 textarea 的介绍中有相关配置。 那从哪里开始推，推哪个地方，我的整个【输入框-键盘

一、前言 在做一个聊天的输入框，需求是输入框高度自定撑开，到达一定高度后（5行）就不再撑开，高度固定，可以滚动已填写的内容。图如下： 二、方案 传统的思路是 min-height 和 max-heig

回到最初的问题，利用富文本编辑器，编写邮件模板，或者说，提供一个编辑器，用来编写邮件。如果说编写邮件而已，大可以在 word 或者其他编辑器里写好内容，但这里的一个特点就是 占位符 。

一、前言 上面做了邮件模板，保证了参数的不可编辑，在点击参数名称时，向富文本编辑器插入该参数。但是在编辑页面时，参数列表与富文本的内容已经回显，这时候编辑参数名称，光标会自动跳转到富文本编辑器。

一、背景 说到富文本，就像现在在使用的这个富文本一样。这个插入，就像点击工具栏，插入图片或者表格。 业务需求是做一个邮件模板，前端书写某些参数用作占位符，后端将占位符替换成具体的内容。

平常我们复制网页上的内容时，总是弹出让你登录或者开vip的弹窗，又或者没反应，当你粘贴时发现是这个网页的登录网址。嘿嘿，我们玩浏览器的，还能让这个给难住吗？上号，看看怎么搞他！！

做一个文字镂空页面，需要一个背景图。涉及text-stroke和background-clip。 最基本的有一个蒙层和文字；

有一个库 Lorem Picsum，可以生成随机的图片。当我们写页面或者demo时，需要用到某些图片。以前还在苦恼到哪里去找图片时，现在方便了，这个库可以随机生成图片。

如何实现一个大屏？大屏和一般的pc适配有什么不同？带着这两个问题进行了思考，并查阅了一些资料，下面是我的得到的关于实现大屏的一些想法。

电脑是一个大屏，现在大部分电脑的分辨率都是 1920 x 1080了，也就是1080P，代表高清。那在pc的设计阶段，一般的ui都是按照这个 1080P来设计的。

页面有几个元素按顺序纵向排列，希望能够拖拽这些元素进行排列。 1.添加拖拽属性 这时候元素可以拖拽了，即跟着鼠标光标移动，但该元素的原来位置没有变。

给文字添加影子，让其看起来有立体的效果。首先啊，用 文字阴影 是做不出来的，可以把阴影当做一个元素，使用 伪元素 来做。

给文字打码，码的效果类似于磨砂玻璃。涉及到透明、背景滤镜。 backdrop-filter还可以做一些比较有趣的效果,比如鼠标移入之后，灰白图片变为彩色。

有一个input文本框，进行@input之后，在文本框内输入文字会实时触发其绑定的方法。在输入英文字符时没有问题，但当输入中文时，还没有选择文字，所绑定的方法已经执行了。

有这么一个字符串 gagglajgeogqpgghuueugjjageihgjglpg,其中每个字符出现了一次或多次，现在需要把每个字符串出现的次数算出来。

使用3层 元素 实现 鼠标经过的放大效果。涉及到定位，背景图片，伪元素，继承，裁剪，鼠标经过，过渡效果等。

一、防抖 防抖函数，可以这么理解，不是立即做，而是等待一段时间之后再做，如果等待期间又触发，那就重新计时。举个例子，就像游戏里的回城，如果被打断了，那就重新回城。

一般情况下，会封装一个loading组件，导入，注册，使用，然后根据数据的加载状态，控制loading组件的显示与隐藏，但不方便使用，现在封住一个自定义的loading指令