- 博客(89)
- 收藏
- 关注
RSS订阅原创 适配屏幕px、rem单位换算, 将 pxToRem 函数设置为一个全局工具如：在 utils.js 文件、SCSS/Mixin 定义
该写法通过设计稿比例和rem动态计算，实现了设计稿到实际页面的精准适配。在SCSS// SCSS 函数// 使用示例div {在CSS:root {/* 设计稿宽度 */div {/* 使用全局基准 */使用函数，适合动态计算，便于在 JS 中使用。利用 SCSS 函数或 CSS 自定义属性，实现全局使用，便于在样式文件中调用。100rem是换算规则：它依赖于根元素的动态设置，确保rem和设计稿比例一致。（根据公式计算）。
2024-11-22 14:48:16
1299
原创 重新认识async、await
async函数在抛出返回值时，会根据返回值类型开启不同数目的微任务return结果值：非thenable、非promise（不等待）thenable（等待 1个then的时间）promise（等待 2个then的时间）
2024-11-18 23:37:58
1168
原创 拉分支git branch --set-upstream-to=origin/yourbranch
当➜ git checkout -b test_1.1.5 origin/test_1.1.5。3. 重新添加远程的origin，git remote add origin 地址。2. 先移除远程的origin，git remote rm origin。git checkout -b 分支名 origin/分支名。致命错误：一个名为 'test_1.1.5' 的分支已经存在。1. 检查远程关联 git remote -v。
2024-08-08 18:07:38
821
原创 form 和 {...form}区别主要体现在对象的引用和解构
的地方都会得到更新。这是因为在 JavaScript 中，对象是通过引用来传递的，所以修改对象的属性，会影响到所有引用这个对象的地方。：这是使用了 ES6 的新特性，叫做对象的解构赋值，或者叫作对象的扩展运算符。的一个浅拷贝，也就是新生成了一个新的对象，对象的属性和。所以，当你更改这个新对象的时候，原来的。在 JS 中是有区别的，主要体现在对象的引用和解构。的内存地址是不一样的，也就是说新对象和。对象的内容并未改变。如上所示，当我们修改。
2024-05-23 10:55:32
265
原创 lodash库中的函数处理嵌套的对象和数组的函数
这个toSnakeCase函数的作用是将一个对象（obj）中的所有的键（key）从camelCase（驼峰式）转换为snake_case（蛇形式）。它通过递归的方式遍历整个对象，将每个键转换为snake_case，然后保存到一个新的对象中。这个函数能够处理嵌套的对象和数组。
2024-02-21 12:37:15
854
原创 defineEmits用于定义并验证组件可以发射的事件类型
defineEmits是 Vue 3 Composition API 的一个函数，主要用于定义并验证组件可以发射的事件类型。在 Vue 3 中，你可以通过调用 defineEmits 或在 emits 选项中定义一个数组，来。这个定义好的 emits 可以在 setup 函数中以第二个参数的形式取得并触发相应的事件。然后，其他的父组件可以使用 v-on 或 @ 来监听 MyComponent组件发射的。
2024-01-26 18:19:47
933
原创 Vuex中的dispatch用来触发（派发）action
那么，store.dispatch(‘resetChatInput’) 就是触发 ‘resetChatInput’ 这个 action，这个 action 会执行一个异步操作（在这个例子中没有异步操作），然后提交 mutation ‘RESET_CHAT_INPUT’，这个 mutation 会重置 prompt、quoteChatId 和 refImage 这三个 state 的值为默认值。store.dispatch(‘actionName’) 会去调用名为 actionName 的 action。
2024-01-16 12:31:22
1070
原创 dangerouslyUseHTMLString选项来启用自定义 HTML 片段
【代码】饿了么ui中的dangerouslyUseHTMLString。
2023-12-22 12:45:10
1735
原创 请求本地的 JSON 文件作为 mock 数据
请求本地的 JSON 文件作为 mock 数据，你可以使用 Vue 的生命周期钩子函数 created 或 mounted 来发送 HTTP 请求（GET 请求）并获取 JSON 数据。
2023-11-08 07:32:29
701
原创 针对element-plus，跳转jump（快速翻页）
情况是这样的，一次返回十条数据，但是展示的时候自己对数据进行了处理（又弄了一套currentTaskIndex）,每次只让它展示———返回数据 十条中的一条，现在利用el-pagnation,做的快速翻页，其实是快速翻条！打印之后可以看到分页跳转的数字输入框，是有进行处理的，max="102",是我自己的数据total/条数，向上取整得到的。自己处理的数据，当翻完10条数据之后，才会再次去请求一次接口。所以对当前跳转输入框，进行了一些处理。后续待补充.......
2023-10-26 11:18:46
626
原创 css鼠标样式 cursor: pointer
cursor: none;cursor:not-allowed; 禁止选择user-select: none
2023-08-15 15:08:35
935
原创 hooks 中转发ref用法的汇总，useRef和forwardRef 的用法
如果只是想在单个页面中使用，不涉及父子组件，可以像图一一样，使用hooks的钩子函数，useRef(),就不需要包上forwardRef()，直接声明 const inputRef = useRef();如下父子组件之间使用ref,子组件需要包上forwardRef()父组件使用createRef创建。
2023-05-24 11:26:01
237
原创 关于git stash使用
如果要撤销一个 `stash`，可以使用 `git stash drop stash@{N}` 命令来删除指定的 `stash`，其中 `N` 是 `stash` 在列表中的索引号。注意，删除一个 `stash` 不会自动将其应用到工作区中，必须使用 `git stash apply` 或 `git stash pop` 命令显式地应用一个 `stash`。之前的某个 `git stash`，可以使用 `git stash list` 命令来查看所有存储的 `stash` 列表，然后使用。
2023-05-08 13:18:37
1905
原创 不同状态同时展示不同的操作项
模版中给每个操作项，使用v-if根据不同状态码展示不同的按钮，传入2个参数；第一个参数代表，各个操作按钮；第二个参数代表，不同的状态；当状态为100、300、500时（待上线、已下线、上线失败）可以为。实现一个这样的需求——不同状态同时展示不同的操作项。表格的操作项包括查看、编辑、上线、删除。当状态为200时（上线成功）可以有。当状态为100时（待上线）可以有。
2023-05-05 15:25:32
212
原创 element-ui中this.$confirm提示文字中，部分有颜色（自定义）
MessageBox 组件可以通过传递一个 HTML 片段来自定义对话框内容的样式。注意，在使用 MessageBox 组件时需要添加 dangerouslyUseHTMLString: true 选项来启用自定义 HTML 片段。为了确保代码的可读性和可维护性，通过字符串模板来动态生成对话框的内容。
2023-05-04 19:16:51
5869
原创 处理数据，传参时，如果某些参数没有值，就不传这个字段
如果某些参数没有值，您可以在发送请求之前过滤掉这些空值参数。具体来说，您可以使用 JavaScript 中的delete关键字，从参数对象中删除值为空的属性。在这个示例中，我们定义了一个名为submitForm的方法来提交表单。在方法内部，我们使用方法将表单数据复制到一个新的对象中。然后，我们使用for-in循环遍历这个新对象的属性，并使用delete关键字删除值为空的属性。最后，我们将这个过滤后的参数对象传递给saveUser方法。
2023-04-27 02:00:19
1429
原创 react hook 父子通信
添加了类型注释来定义props和回调函数的参数类型。在父组件中,使用useState钩子来定义text状态，并指定其类型为string。在子组件中，使用interface来定义props类型，并使用React.ChangeEvent来定义handleChange函数的参数类型。
2023-04-21 08:14:31
230
原创 Vue中的逻辑判断
如果需要在模板中进行逻辑运算或条件判断，可以使用 Vue 提供的指令（例如 v-if、v-for 等）来实现。在 Vue 模板语法中，使用 {{ }} 来绑定数据时，是不允许使用 JavaScript 的逻辑运算符（例如 &&、|| 等）和三元运算符的。如果需要在模板中使用三元运算符，可以在 Vue 的模板语法中使用 v-bind 指令和 :class 绑定来实现。因为在 Vue 模板中，这些运算符会被解析成 JavaScript 语法，而不是 Vue 的模板语法。
2023-04-14 19:04:35
1161
原创 利用计算属性控制展示文本
在页面中使用条件渲染指令 v-if 或者 v-show 来根据接口返回数据的状态来决定是否展示“生成失败”这个文本。这是因为 isFailed 计算属性会在 status 变量发生改变时自动重新计算，从而更新页面中的数据，而直接使用。在接口请求成功后，我们将接口返回的状态存储到 status 变量中，并在计算属性 isFailed 中根据。的值来计算是否需要展示“生成失败”这个文本。上面的代码中，我们使用了 Vue.js 的。来计算是否需要展示“生成失败”这个文本。需要注意的是，我们在。
2023-04-14 18:06:09
340
原创 轮询的时候，总是报500服务器无法处理大量的请求
HTTP 500 错误通常表示服务器内部错误。这意味着后端服务器出现了一些问题，导致它无法处理请求。如果你在调用任务状态的接口时总是遇到这个错误，可能有以下一些原因：1.后端代码出现了错误，导致服务器无法正确处理请求。你可以查看服务器的日志，找出具体的错误信息，从而更好地排查问题。2.后端服务器出现了瓶颈，无法处理大量的请求。如果后端服务器的处理能力不足，就可能会导致它出现内部错误。你可以尝试减少请求的频率，或者考虑升级服务器的配置。3.网络连接不稳定，导致请求无法正常传输。
2023-04-13 19:11:41
1761
原创 双大括号中数据简短书写
写的这么长，只是为了方便解释和阅读。实际上，在Vue模板中访问对象的属性是通过双大括号和对象属性名称的组合来实现的。其中，datum是你在模板中定义的变量名，代表接口返回的数据对象。process_params是datum对象中的一个属性，compressed是process_params属性中的一个对象，text是compressed对象中的一个属性，而text属性又是一个包含文本的对象。通过这样的方式，你可以访问对象中的任意深度的属性。
2023-04-09 19:12:26
343
原创 处理复杂数据
这样可以让copyData方法调用getDataByPath方法获取到需要的数据，避免了在copyData方法中多次访问this.datum.process_params对象的冗余代码。实现点击事件将双大括号中的数据填充到表单中的部分。可以在模板中给每个显示数据的元素绑定一个点击事件，点击时触发相应的处理函数。copyData方法的作用是根据传入的参数dataPath，找到this.datum.process_params对象中。分割成一个数组，然后遍历这个数组，逐级访问对象的属性，直到获取到最终的数据。
2023-04-09 18:44:57
450
3
原创 如何处理后端返回的复杂数据
在这个代码中，我们使用axios库调用API，并在成功响应时将数据映射到我们的params对象中。映射时，我们只选择需要的字段，即参数的名称，类型和是否必需，并将它们存储在一个新的对象中。这样，通过映射操作，我们将接口返回的复杂数据结构转换为了一个简单的对象，该对象只包含了我们需要的参数的名称、类型和必填属性。在这个模板中，我们使用v-for指令循环渲染params对象中的每个参数，并使用{{ }}语法来显示参数的名称，类型和必需性。如果参数是必需的，我们将在参数名称后面添加一个星号。
2023-04-09 00:22:33
784
原创 ?.可选链操作符
它的作用是在访问可能为空（null或undefined）的对象的属性或者方法时，避免因为访问了空对象而导致代码抛出异常报错，而是直接返回undefined。这可以让我们在访问对象属性前先对其进行存在性检查，以避免因对象不存在而导致的错误。在传统的属性访问方式中，我们需要使用条件判断语句来判断对象及其属性是否存在，而使用可选链操作符的属性访问方式则更加简洁，不存在的属性会直接返回undefined，我们可以使用如条件语句或者空值合并操作符来对其进行处理。
2023-04-08 22:27:17
214
原创 trim()方法去除消息字符串两端的空格
这样做的目的是为了确保只有非空的消息才被添加到消息列表中，并且每次添加消息后清空输入框的内容，以便用户继续输入下一条消息。检查用户输入的消息是否为空格或空字符串（通过trim()方法去除消息字符串两端的空格并判断是否为空字符串）。如果消息非空，则将其添加到消息列表中（通过push()方法将消息添加到this.messages数组末尾）。清空输入框的内容（通过将this.newMessage设置为空字符串）。
2023-04-05 23:29:48
220
原创 React.FC是React中的一种函数组件类型
这种方式的定义方式可以让TypeScript进行类型推导，从而使得我们在编写React组件的时候更加方便。同时，使用这种方式定义的函数组件可以自动继承React.FC的一些类型属性，例如children等。使用React.FC定义函数组件的好处是，它可以自动推导props的类型，而不需要手动声明propTypes或者定义props接口。React.FC是React中的一种函数组件类型，代表着一个接收props作为输入并返回JSX元素的函数组件。这样，我们就可以很方便地编写函数组件并定义它的props类型。
2023-04-02 21:50:52
1554
原创 JS 实现将数组转换成一个字符串 并且每个元素末尾都加上分号
方法，以将数组元素连接成一个字符串。然后，我们将一个额外的分号添加到字符串的末尾，以满足每个元素末尾都需要加上分号的要求。方法将每个元素后面都加上了分号，并将其转换为一个新的数组。方法中传递了一个空字符串作为参数，以防止在元素之间添加额外的分隔符。如果你想要更加灵活地处理数组中的元素，可以使用。方法将新的数组连接成一个字符串。在上面的代码中，我们将分号作为参数传递给。在上面的代码中，我们使用。
2023-03-23 15:46:32
926
原创 mac安装nginx (M2)
在/opt/homebrew/var/homebrew/linked路径,输入nginx, 启动nginx。服务器默认路径（nginx 文件存放路径为，在 Mac 上其实这个存放路径是软链出来的）安装之后，根据上面的信息。当前版本1.23.3。
2023-03-21 00:45:30
875
原创 ??与||运算符比较
纵观 JavaScript 发展史，或 || 运算符先于?另一方面，空值合并运算符?是最近才被添加到 JavaScript 中的，它的出现是因为人们对 || 不太满意。如果其中任何一个是 || 的第一个参数，那么我们将得到第二个参数作为结果。height || 100 首先会检查 height 是否为一个假值，它是 0，确实是假值。例如，在上面的代码中，我们可以用 || 替换掉?或运算符 || 可以以与?所以，|| 运算的结果为第二个参数，100。所以，结果为 height 的原始值，0。
2023-02-20 18:45:20
747
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人