joken-前端工程师

  :: 首页 :: 博问 :: 闪存 :: 新随笔 :: :: :: 管理 ::

2024年9月13日

摘要: 去掉子组件多余的空参数即可,比如props:{} 阅读全文
posted @ 2024-09-13 21:57 joken1310 阅读(0) 评论(0) 推荐(0) 编辑

摘要: 代码 使用方组件 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import useMyHooks from './hooks/useMyHooks'; export default defineC 阅读全文
posted @ 2024-09-13 21:49 joken1310 阅读(0) 评论(0) 推荐(0) 编辑

摘要: tsx 实现slot插槽 父组件 <template> <div class="component-name"> <child> <template #default="scope"> <div>default</div> <div>{{ scope.a }}</div> </template> < 阅读全文
posted @ 2024-09-13 21:41 joken1310 阅读(0) 评论(0) 推荐(0) 编辑

摘要: 参考代码 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import type { Reactive, Ref } from 'vue'; import styles from '../scss/c 阅读全文
posted @ 2024-09-13 21:24 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

2024年9月9日

摘要: tsx 子组件、tsx 使用class 方式 tsx 组件代码 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; import type { Reactive, Ref } from 'vue'; im 阅读全文
posted @ 2024-09-09 21:33 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年9月8日

摘要: emits 定义结构和使用 子组件 import { defineComponent, PropType, h, computed, ref, watch } from 'vue'; export default defineComponent({ name: 'PageF', props: { r 阅读全文
posted @ 2024-09-08 21:47 joken1310 阅读(3) 评论(0) 推荐(0) 编辑

2024年9月5日

摘要: 总论 tsx setup里面定义了return dom 元素,则options api的 render函数不生效 options 的render函数生效前提是setup里面不能return dom options 的render里面不能使用this,只能使用ctx,且setup得返回数据,ctx才能 阅读全文
posted @ 2024-09-05 23:19 joken1310 阅读(3) 评论(0) 推荐(0) 编辑

2024年9月4日

摘要: 代码实现示例 子组件 实现双向绑定 <template> <div class="component-name"> <input type="text" :value="modelValue" @input="handleChange" /> </div> </template> <script s 阅读全文
posted @ 2024-09-04 22:25 joken1310 阅读(6) 评论(0) 推荐(0) 编辑

摘要: 在 Vue 3 中,使用 PropType 可以定义复杂类型的 props。这对于确保组件 props 接收到的值符合预期的结构非常有用。下面是一些定义复杂类型的常见方法。 1. 定义对象类型 你可以使用 TypeScript 的接口或类型别名来定义复杂对象类型。 import { defineCo 阅读全文
posted @ 2024-09-04 21:35 joken1310 阅读(30) 评论(0) 推荐(0) 编辑

摘要: husky 安装使用 说明 husky 作用是创建git钩子,然后触发命令执行 安装 yarn add husky 初始化 npx husky init 会出现下面文件夹 commitlint 安装和使用 安装 commitlint yarn add commitlint 安装校验规则库 @comm 阅读全文
posted @ 2024-09-04 21:31 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年9月3日

摘要: lint-staged 安装和使用 说明 lint-staged 是一个插件,为了方便触发eslint,配置哪些文件触发eslint stylelint等 安装 yarn add lint-staged 创建 .lintstagedrc 在根目录 { "*.vue": "eslint", "*.ts 阅读全文
posted @ 2024-09-03 22:44 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

2024年8月31日

摘要: window cmd 修改临时环境变量 set path=D:\node\node20 powershell 修改临时环境变量 直接一个新的环境变量,不需要关心旧的,那就: $env:path="D:\node\node20" 如果需要依赖旧的环境变量,那: $env:path+="D:\node\ 阅读全文
posted @ 2024-08-31 09:10 joken1310 阅读(5) 评论(0) 推荐(0) 编辑

2024年8月20日

摘要: Array.prototype.indexOf() const beasts = ['ant', 'bison', 'camel', 'duck', 'bison']; console.log(beasts.indexOf('bison')); // Expected output: 1 // St 阅读全文
posted @ 2024-08-20 22:22 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

2024年8月19日

摘要: 官方说明 https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout 默认是auto 自动根据单元格内容自适应 fixed 表格和列的宽度是由 table 和 col 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的 阅读全文
posted @ 2024-08-19 22:18 joken1310 阅读(1) 评论(0) 推荐(0) 编辑

2024年8月15日

摘要: 在 JavaScript 中,'10' < '1' 的结果为 false,这是因为 JavaScript 在进行比较操作时,会将字符串按照字符编码进行比较,而不是将它们转换为数字。 字符编码比较: 字符串 '10' 的第一个字符是 '1',而字符串 '1' 的第一个字符也是 '1'。 由于两个字符串 阅读全文
posted @ 2024-08-15 22:01 joken1310 阅读(5) 评论(0) 推荐(0) 编辑

摘要: 在 Vue 项目中,设置的 color 样式为 Hex 代码,但最终显示为 RGB 代码,这通常是由于以下几种情况导致: 1. CSS 预处理器 (Sass, Less) 的影响: 当你使用 Sass 或 Less 等 CSS 预处理器时,它们会将 Hex 颜色代码转换为 RGB 颜色代码,以便更好 阅读全文
posted @ 2024-08-15 21:54 joken1310 阅读(3) 评论(0) 推荐(0) 编辑

摘要: startswidth 用于检查字符串是否以指定的子字符串开头。 startsWith(searchString, position) searchString: 要搜索的子字符串。 position: 可选参数,指定搜索开始的位置(默认值为 0)。 用法: const str = "hello w 阅读全文
posted @ 2024-08-15 21:44 joken1310 阅读(11) 评论(0) 推荐(0) 编辑

摘要: padStart 和 padEnd 是 JavaScript 中字符串方法,用于在字符串的开头或结尾添加填充字符,直到达到指定的长度。 padStart(targetLength, padString) targetLength: 目标字符串长度。 padString: 用于填充的字符串。 用法: 阅读全文
posted @ 2024-08-15 21:42 joken1310 阅读(17) 评论(0) 推荐(0) 编辑

摘要: 代码 function rgbToHex(rgb) { // 将 RGB 字符串分割成三个数字 const [r, g, b] = rgb.match(/\d+/g).map(Number); // 将每个数字转换为十六进制,并补零到两位 const hexR = r.toString(16).pa 阅读全文
posted @ 2024-08-15 21:37 joken1310 阅读(4) 评论(0) 推荐(0) 编辑

摘要: 代码 <template> <div class="page-box"> <!-- colgroup 使用方式1 --> <table> <colgroup> <col span="2" style="width: 100px" /> <col style="width: 50px" /> <col 阅读全文
posted @ 2024-08-15 21:29 joken1310 阅读(13) 评论(0) 推荐(0) 编辑

摘要: 代码 <template> <div> <span class="myColor">sdfsdfs</span> <br /> <span style="color: var(--my-color)">沙发斯蒂芬斯蒂芬</span> </div> </template> <script setup 阅读全文
posted @ 2024-08-15 21:18 joken1310 阅读(4) 评论(0) 推荐(0) 编辑

2024年8月14日

摘要: 父组件 <template> <div class="page-box"> <!-- <child> <template v-slot:default="scope"> <div>slot</div> <div>{{ scope.data1 }}</div> </template> </child> 阅读全文
posted @ 2024-08-14 21:19 joken1310 阅读(82) 评论(0) 推荐(0) 编辑

2024年8月13日

摘要: 文档 中文文档 https://github.com/exceljs/exceljs/blob/master/README_zh.md git 地址 https://github.com/exceljs/exceljs/tree/master 表格属性 批量设置表格列宽度 worksheet.col 阅读全文
posted @ 2024-08-13 22:34 joken1310 阅读(20) 评论(0) 推荐(0) 编辑

2024年8月8日

摘要: 代码 onst worksheet = "Sheet1"; const tableHTML = "<tr><td>数据1</td><td>数据2</td></tr>"; const excelHTML = ` <html xmlns:o="urn:schemas-microsoft-com:offi 阅读全文
posted @ 2024-08-08 22:43 joken1310 阅读(10) 评论(0) 推荐(0) 编辑

2024年8月7日

摘要: 在 Vue 3 项目中将包含图片的 HTML 表格转换为 Excel 文件,你可以使用 exceljs 库,并结合前端技术来处理图片和表格数据。下面是一个在 Vue 3 项目中实现的示例: 安装依赖 首先,确保你已经安装了 exceljs 库。你可以通过 npm 安装它: npm install e 阅读全文
posted @ 2024-08-07 20:51 joken1310 阅读(51) 评论(0) 推荐(0) 编辑

2024年8月6日

摘要: 表格选定范围设置边框 当需要设置特定范围(如 A6 到 E19)的边框时,可以使用 XLSX.utils.decode_range 和 XLSX.utils.encode_cell 方法来处理。以下是如何使用 decode_range 解析范围并设置边框样式的示例: import XLSX from 阅读全文
posted @ 2024-08-06 21:44 joken1310 阅读(47) 评论(0) 推荐(0) 编辑

摘要: xlsx-js-style 是一个用于处理 Excel 文件的 JavaScript 库,基于 xlsx 库并添加了对样式的支持。通过 xlsx-js-style,你可以设置单元格的字体、背景、边框等样式。下面是如何使用 xlsx-js-style 库配置表格样式的步骤。 1. 安装库 首先,确保你 阅读全文
posted @ 2024-08-06 21:27 joken1310 阅读(227) 评论(0) 推荐(0) 编辑

摘要: .npmrc 文件用于配置 npm 的行为和设置。可以在项目根目录、用户目录(~/.npmrc),甚至全局配置目录下(/etc/npmrc)创建或编辑此文件来设置各种 npm 配置选项。 下面是一些常见的 .npmrc 配置选项及其用途: 设置注册表(registry): registry=http 阅读全文
posted @ 2024-08-06 21:14 joken1310 阅读(30) 评论(0) 推荐(0) 编辑

2024年8月5日

摘要: 解决方式 设置哪些依赖需要预构建,避免运行中才构建依赖。 优化插件 https://www.npmjs.com/package/vite-plugin-optimize-persist 参考文章 https://blog.csdn.net/qq_51368103/article/details/13 阅读全文
posted @ 2024-08-05 22:12 joken1310 阅读(17) 评论(0) 推荐(0) 编辑

摘要: 内核区别 最明显区别是及时编译和打包编译,开发编译速度上的区别。 配置区别 主要区别就是webpack有loader和plugins配置,vite直接是plugins为主体。 vite plugins 中配置编译器和插件: 其他json配置大同小异。 参考文章 https://zxuqian.cn/ 阅读全文
posted @ 2024-08-05 21:58 joken1310 阅读(2) 评论(0) 推荐(0) 编辑

2024年8月1日

摘要: 概述 ref是通过一个中间对象RefImpl持有数据,并通过重写它的set和get方法实现数据劫持的,本质上依旧是通过Object.defineProperty 对RefImpl的value属性进行劫持。 reactive则是通过Proxy进行劫持的。Proxy无法对基本数据类型进行操作,进而导致r 阅读全文
posted @ 2024-08-01 21:57 joken1310 阅读(4) 评论(0) 推荐(0) 编辑

摘要: splice 是 JavaScript 数组对象的一个方法,用于增删数组中的元素。它的基本语法如下: array.splice(start, deleteCount, item1, item2, ...) start:指定开始修改的位置索引。 deleteCount:可选,指定要删除的元素个数。如果 阅读全文
posted @ 2024-08-01 21:45 joken1310 阅读(12) 评论(0) 推荐(0) 编辑

摘要: slice() 是 JavaScript 中用于提取数组的一部分或字符串的一部分的方法。slice() 不会修改原始数组或字符串,而是返回一个新数组或字符串。 对于数组 语法: array.slice(begin, end) begin:要提取的起始索引(包含)。如果省略,默认从索引 0 开始。 e 阅读全文
posted @ 2024-08-01 21:43 joken1310 阅读(5) 评论(0) 推荐(0) 编辑

摘要: 如何使用 JavaScript 中的 reduce 函数来生成 SKU 属性的 SKU。SKU(Stock Keeping Unit)通常用于唯一标识商品或库存。 假设你有一个包含商品属性的数组,例如: const properties = [ { name: '颜色', value: '红色' } 阅读全文
posted @ 2024-08-01 21:42 joken1310 阅读(4) 评论(0) 推荐(0) 编辑

摘要: lodash get lodash 的 get 方法,它主要用于安全地访问对象的属性,避免因为中间属性不存在而导致的异常。这个方法可以按照指定的路径获取对象的属性值。比如,假设有一个对象 user,包含了 name 和 address 属性,你可以这样使用 get 方法: const _ = req 阅读全文
posted @ 2024-08-01 21:39 joken1310 阅读(24) 评论(0) 推荐(0) 编辑

摘要: 在 JavaScript 中,你可以使用递归或一些现成的库来实现对象的扁平化。如果你希望手动实现,可以考虑以下方法之一: 递归方法: function flattenObject(obj, prefix = '') { return Object.keys(obj).reduce((acc, key 阅读全文
posted @ 2024-08-01 21:35 joken1310 阅读(21) 评论(0) 推荐(0) 编辑

摘要: const inventory = [ { name: "芦笋", type: "蔬菜", quantity: 5 }, { name: "香蕉", type: "水果", quantity: 0 }, { name: "山羊", type: "肉", quantity: 23 }, { name: 阅读全文
posted @ 2024-08-01 21:12 joken1310 阅读(3) 评论(0) 推荐(0) 编辑

摘要: 字符比较排序,原理是根据字符编码比较大小排序 // var abc=[1,3,6,2,5] var abc=['c','a','d','b'] var sorted=abc.sort((a,b)=>{ console.log(a,b,"slfjslkfjslkf") //通过返回正数或者负数来判断排 阅读全文
posted @ 2024-08-01 21:05 joken1310 阅读(3) 评论(0) 推荐(0) 编辑

2024年7月31日

摘要: 代码 父组件 <template> <div class="component-name"> <!-- 全局自动的icon --> <Extend :render="render" /> </div> </template> <script setup lang="ts"> import { ref 阅读全文
posted @ 2024-07-31 22:36 joken1310 阅读(20) 评论(0) 推荐(0) 编辑

摘要: Element icons 全局引入方式参考 import type { App } from "vue"; import * as ElementPlusIconsVue from "@element-plus/icons-vue"; // 注册所有图标 export function setup 阅读全文
posted @ 2024-07-31 22:13 joken1310 阅读(11) 评论(0) 推荐(0) 编辑