个人技术分享

【代码】react-beautiful-dnd 横纵排序demo。

elementUI合并表格

在项目中的public文件夹下新建一个h5player的文件夹（这里的文件夹名字可以自己取，后端引入时注意一下就好了），接着将刚才下载的开发包中的bin文件夹里面所有的文件都赋值到项目中的h5player文件夹下。// // 当容器div#play_window有固定宽高时，可不传iWidth和iHeight，窗口大小将自适应容器宽高。2、使用该插件很难更改其样式，只能使用其自带的窗口（1x1,2x2等），如过我要一个1x2的窗口就无法实现；// // 分屏播放，默认最大分屏4*4。

JSX 代码本身并不是 HTML，也不是 Javascript，在渲染页面前，需先通过解析工具（如babel）解析之后才能在浏览器中运行。可查看 JSX 解析后的效果更早之前，Babel 会把 JSX 转译成一个函数调用，功能与现在的 jsxs 函数类似相当于 vue 的 h 函数例如会被Babel 转译为React.createElement() 会创建对象这些对象被称为 “React 元素”。它们描述了你希望在屏幕上看到的内容。

今天帮同事看了一个问题，他尝试用vite+vue3+ts+pinia创建项目，结果刚上来就遇到这么一个问题。

MessageBox 是 Element UI 提供的一个全局方法，用于创建各种对话框，如消息提示、确认框和输入框MessageBox 可以通过引入 MessageBox 组件来使用，也可以通过全局挂载的方式使用 this.$confirm 等快捷方法

因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下。思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用。思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用。缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码。新建一个组件,将官网暴露的属性全部引用了。

【代码】react-beautiful-dnd 横纵排序demo。

在src下创建setupProxy.js。在配置文件中加入server项。

最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图

因为ElementuiPlus的dialog弹框的初始样式不太好看,而公司要求又要好看,本来是已经实现了,但是后来想想了发现封装完dialog的其他功能也要,所以特此记录一下。思路:封装一个组件,组件内部嵌套el-dialog,然后定义好公共样式,定义好方法,直接使用。思路:封装一个组件,将所有新增的参数引入el-dialog 参数中,实现参数共用。缺陷:因为很多属性定义好了,导致如果超出既定样式的方案就得重新调整代码。新建一个组件,将官网暴露的属性全部引用了。

vue+css解决图片变形问题（flex-shrink: 0）

ref是一种脱围机制，用于保留不用于渲染的值。ref是一个普通的JavaScript对象，具有一个名为 current的属性，你可以对其进行读取或设置你可以通过调用useRef Hook 来让react给你一个ref与state一样，ref允许你在组件的重新渲染之间保留信息与state不同，设置ref的current值不会触发重新渲染不要在渲染过程中读取或写入 ref.current。这使你的组件难以预测Refs是一种通用概念，但大多数情况下你会使用它们来保存DOM元素你通过传递。

最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图

tabletable完成选择订单。

vue 表单些某项 v-if 控制后,想在显示时添加验证

公司项目要求兼容pc、平板、手机等多个设备，之前出现了一个问题是页面在pc和移动端正常运行，而且IE都可以支持，但某些平板无法显示页面内容，所以记录一下解决思路。上面说过replace方法是可以使用正则匹配的，用正则可以替换所有的位置，那么我们就可以这么写了。加上这么一句就可以，其它不用操作，之后在平板右下角会出现一个绿色的按钮，点击就可以显示报错信息。经过一段时间的测试，这五行基本可以识别大多数情况的换行符，且不存在平板不兼容的问题。的情况，这是正常的，为了解决，我们有两种解决方案。当使用字符串替换时，

公司项目要求兼容pc、平板、手机等多个设备，之前出现了一个问题是页面在pc和移动端正常运行，而且IE都可以支持，但某些平板无法显示页面内容，所以记录一下解决思路。上面说过replace方法是可以使用正则匹配的，用正则可以替换所有的位置，那么我们就可以这么写了。加上这么一句就可以，其它不用操作，之后在平板右下角会出现一个绿色的按钮，点击就可以显示报错信息。经过一段时间的测试，这五行基本可以识别大多数情况的换行符，且不存在平板不兼容的问题。的情况，这是正常的，为了解决，我们有两种解决方案。当使用字符串替换时，

useCallBack计算结果是函数, 主要用于缓存函数，应用场景如: 需要缓存的函数，因为函数式组件每次任何一个 useState 的变化，整个组件都会被重新刷新，一些函数是没有必要被重新刷新的，此时就应该缓存起来，提高性能，和减少资源浪费。useMemo缓存的是二次计算的数据，主要用于缓存计算结果的值，跟vue里面的computed大致相同的作用，这样避免组件重新渲染的时候，再重新执行整个函数，导致之前的二次计算也会重新执行一次。都是依赖数据发生变化，才会去更新缓存数据。

【代码】【JS】并发控制。