joken1310 - 博客园

vue3 tsx 测试几种使用方式

摘要：总论 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 阅读(283) 评论(0) 推荐(0)

vue3.2 v-model 双向数据绑定实现

摘要：代码实现示例子组件实现双向绑定 <template> <div class="component-name"> <input type="text" :value="modelValue" @input="handleChange" /> </div> </template> <script s 阅读全文

posted @ 2024-09-04 22:25 joken1310 阅读(54) 评论(0) 推荐(0)

在 Vue 3 中，使用 `PropType` 定义复杂类型的 props

摘要：在 Vue 3 中，使用 PropType 可以定义复杂类型的 props。这对于确保组件 props 接收到的值符合预期的结构非常有用。下面是一些定义复杂类型的常见方法。 1. 定义对象类型你可以使用 TypeScript 的接口或类型别名来定义复杂对象类型。 import { defineCo 阅读全文

posted @ 2024-09-04 21:35 joken1310 阅读(1866) 评论(0) 推荐(0)

前端vue项目 git commit msg 文字校验实现，利用husky 和 commitlint实现

摘要： husky 安装使用说明 husky 作用是创建git钩子，然后触发命令执行安装 yarn add husky 初始化 npx husky init 会出现下面文件夹 commitlint 安装和使用安装 commitlint yarn add commitlint 安装校验规则库 @comm 阅读全文

posted @ 2024-09-04 21:31 joken1310 阅读(106) 评论(0) 推荐(0)

vue项目利用git commit 触发执行 eslint检查，使用husky 和 lint-staged

摘要： lint-staged 安装和使用说明 lint-staged 是一个插件，为了方便触发eslint，配置哪些文件触发eslint stylelint等安装 yarn add lint-staged 创建 .lintstagedrc 在根目录 { "*.vue": "eslint", "*.ts 阅读全文

posted @ 2024-09-03 22:44 joken1310 阅读(124) 评论(0) 推荐(0)

window cmd或git bash 或powershell修改临时变量方式，以nodejs为例

摘要： window cmd 修改临时环境变量 set path=D:\node\node20 powershell 修改临时环境变量直接一个新的环境变量，不需要关心旧的，那就： $env:path="D:\node\node20" 如果需要依赖旧的环境变量，那： $env:path+="D:\node\ 阅读全文

posted @ 2024-08-31 09:10 joken1310 阅读(365) 评论(0) 推荐(0)

js indexOf 用法

摘要： 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 阅读(20) 评论(0) 推荐(0)

table-layout css 作用

摘要：官方说明 https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout 默认是auto 自动根据单元格内容自适应 fixed 表格和列的宽度是由 table 和 col 元素的宽度或第一行单元格的宽度来设置的。后续行中的单元格不会影响列的阅读全文

posted @ 2024-08-19 22:18 joken1310 阅读(12) 评论(0) 推荐(0)

JavaScript 中，`'10' < '1'` 的结果为 `false`，原因

摘要：在 JavaScript 中，'10' < '1' 的结果为 false，这是因为 JavaScript 在进行比较操作时，会将字符串按照字符编码进行比较，而不是将它们转换为数字。字符编码比较：字符串 '10' 的第一个字符是 '1'，而字符串 '1' 的第一个字符也是 '1'。由于两个字符串阅读全文

posted @ 2024-08-15 22:01 joken1310 阅读(56) 评论(0) 推荐(0)

Vue 项目中，设置的 `color` 样式为 Hex 代码，但最终显示为 RGB 代码情况原因

摘要：在 Vue 项目中，设置的 color 样式为 Hex 代码，但最终显示为 RGB 代码，这通常是由于以下几种情况导致： 1. CSS 预处理器 (Sass, Less) 的影响: 当你使用 Sass 或 Less 等 CSS 预处理器时，它们会将 Hex 颜色代码转换为 RGB 颜色代码，以便更好阅读全文

posted @ 2024-08-15 21:54 joken1310 阅读(159) 评论(0) 推荐(0)

js 字符操作startswidth 方法使用

摘要： startswidth 用于检查字符串是否以指定的子字符串开头。 startsWith(searchString, position) searchString: 要搜索的子字符串。 position: 可选参数，指定搜索开始的位置（默认值为 0）。用法： const str = "hello w 阅读全文

posted @ 2024-08-15 21:44 joken1310 阅读(254) 评论(0) 推荐(0)

js 字符操作 padStart padEnd 使用教程

摘要： padStart 和 padEnd 是 JavaScript 中字符串方法，用于在字符串的开头或结尾添加填充字符，直到达到指定的长度。 padStart(targetLength, padString) targetLength: 目标字符串长度。 padString: 用于填充的字符串。用法：阅读全文

posted @ 2024-08-15 21:42 joken1310 阅读(343) 评论(0) 推荐(0)

js颜色 rgb()转hex

摘要：代码 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 阅读(189) 评论(0) 推荐(0)

html table colgroup col 使用、功能测试

摘要：代码 <template> <div class="page-box">  <table> <colgroup> <col span="2" style="width: 100px" /> <col style="width: 50px" /> <col 阅读全文

posted @ 2024-08-15 21:29 joken1310 阅读(750) 评论(0) 推荐(0)

js 动态写入css变量，css读取js动态变量方式

摘要：代码 <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 阅读(129) 评论(0) 推荐(0)

vue 组件调用组件自身，递归调用组件自身

摘要：父组件 <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 阅读(779) 评论(0) 推荐(0)

excel.js 实现前端html 表格导出，rowpan、colspan实现，图片插入实现

摘要：文档中文文档 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 阅读(522) 评论(0) 推荐(1)

纯js 导出excel表格,xmlns 方式，导出格式只能是xls

摘要：代码 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 阅读(309) 评论(0) 推荐(0)

Exceljs 实现html table转Excel

摘要：在 Vue 3 项目中将包含图片的 HTML 表格转换为 Excel 文件，你可以使用 exceljs 库，并结合前端技术来处理图片和表格数据。下面是一个在 Vue 3 项目中实现的示例：安装依赖首先，确保你已经安装了 exceljs 库。你可以通过 npm 安装它： npm install e 阅读全文

posted @ 2024-08-07 20:51 joken1310 阅读(528) 评论(0) 推荐(0)

XLSX.utils.decode_range 使用，选定表格范围

摘要：表格选定范围设置边框当需要设置特定范围（如 A6 到 E19）的边框时，可以使用 XLSX.utils.decode_range 和 XLSX.utils.encode_cell 方法来处理。以下是如何使用 decode_range 解析范围并设置边框样式的示例： import XLSX from 阅读全文

posted @ 2024-08-06 21:44 joken1310 阅读(561) 评论(0) 推荐(0)

xlsx-js-style 如何配置表格样式

摘要： xlsx-js-style 是一个用于处理 Excel 文件的 JavaScript 库，基于 xlsx 库并添加了对样式的支持。通过 xlsx-js-style，你可以设置单元格的字体、背景、边框等样式。下面是如何使用 xlsx-js-style 库配置表格样式的步骤。 1. 安装库首先，确保你阅读全文

posted @ 2024-08-06 21:27 joken1310 阅读(3651) 评论(0) 推荐(0)

.npmrc 如何配置

摘要： .npmrc 文件用于配置 npm 的行为和设置。可以在项目根目录、用户目录（~/.npmrc），甚至全局配置目录下（/etc/npmrc）创建或编辑此文件来设置各种 npm 配置选项。下面是一些常见的 .npmrc 配置选项及其用途：设置注册表（registry）： registry=http 阅读全文

posted @ 2024-08-06 21:14 joken1310 阅读(1545) 评论(0) 推荐(0)

window 关闭自动更新系统

摘要：关闭服务我的电脑-管理-计划任务关闭window更新任务阅读全文

posted @ 2024-08-06 20:56 joken1310 阅读(11) 评论(0) 推荐(0)

vite 首次启动慢原因

摘要：解决方式设置哪些依赖需要预构建，避免运行中才构建依赖。优化插件 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 阅读(204) 评论(0) 推荐(0)

vite和webpack的区别

摘要：内核区别最明显区别是及时编译和打包编译，开发编译速度上的区别。配置区别主要区别就是webpack有loader和plugins配置，vite直接是plugins为主体。 vite plugins 中配置编译器和插件：其他json配置大同小异。参考文章 https://zxuqian.cn/ 阅读全文

posted @ 2024-08-05 21:58 joken1310 阅读(39) 评论(0) 推荐(0)

vue3 ref和reactive原理区别

摘要：概述 ref是通过一个中间对象RefImpl持有数据，并通过重写它的set和get方法实现数据劫持的，本质上依旧是通过Object.defineProperty 对RefImpl的value属性进行劫持。 reactive则是通过Proxy进行劫持的。Proxy无法对基本数据类型进行操作，进而导致r 阅读全文

posted @ 2024-08-01 21:57 joken1310 阅读(60) 评论(0) 推荐(0)

js splice使用，增删数组操作方式

摘要： splice 是 JavaScript 数组对象的一个方法，用于增删数组中的元素。它的基本语法如下： array.splice(start, deleteCount, item1, item2, ...) start：指定开始修改的位置索引。 deleteCount：可选，指定要删除的元素个数。如果阅读全文

posted @ 2024-08-01 21:45 joken1310 阅读(47) 评论(0) 推荐(0)

js slice 截取数组使用

摘要： slice() 是 JavaScript 中用于提取数组的一部分或字符串的一部分的方法。slice() 不会修改原始数组或字符串，而是返回一个新数组或字符串。对于数组语法： array.slice(begin, end) begin：要提取的起始索引（包含）。如果省略，默认从索引 0 开始。 e 阅读全文

posted @ 2024-08-01 21:43 joken1310 阅读(239) 评论(0) 推荐(0)

js reduce 根据sku属性生成sku

摘要：如何使用 JavaScript 中的 reduce 函数来生成 SKU 属性的 SKU。SKU（Stock Keeping Unit）通常用于唯一标识商品或库存。假设你有一个包含商品属性的数组，例如： const properties = [ { name: '颜色', value: '红色' } 阅读全文

posted @ 2024-08-01 21:42 joken1310 阅读(82) 评论(0) 推荐(0)

lodash get 使用，js如何实现lodash get

摘要： lodash get lodash 的 get 方法，它主要用于安全地访问对象的属性，避免因为中间属性不存在而导致的异常。这个方法可以按照指定的路径获取对象的属性值。比如，假设有一个对象 user，包含了 name 和 address 属性，你可以这样使用 get 方法： const _ = req 阅读全文

posted @ 2024-08-01 21:39 joken1310 阅读(461) 评论(0) 推荐(0)

js 如何拍平一个对象

摘要：在 JavaScript 中，你可以使用递归或一些现成的库来实现对象的扁平化。如果你希望手动实现，可以考虑以下方法之一：递归方法： function flattenObject(obj, prefix = '') { return Object.keys(obj).reduce((acc, key 阅读全文

posted @ 2024-08-01 21:35 joken1310 阅读(258) 评论(0) 推荐(0)

Object.groupBy 使用示例

摘要： const inventory = [ { name: "芦笋", type: "蔬菜", quantity: 5 }, { name: "香蕉", type: "水果", quantity: 0 }, { name: "山羊", type: "肉", quantity: 23 }, { name: 阅读全文

posted @ 2024-08-01 21:12 joken1310 阅读(24) 评论(0) 推荐(0)

js 数组sort排序

摘要：字符比较排序，原理是根据字符编码比较大小排序 // 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 阅读(46) 评论(0) 推荐(0)

vue3 自定义渲染，渲染函数实现，配置渲染render函数,低代码配置自定义渲染函数核心实现

摘要：代码父组件 <template> <div class="component-name">  <Extend :render="render" /> </div> </template> <script setup lang="ts"> import { ref 阅读全文

posted @ 2024-07-31 22:36 joken1310 阅读(263) 评论(0) 推荐(0)

Element icons 全局引入方式参考

摘要： 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 阅读(106) 评论(0) 推荐(0)

vue模板中使用临时变量实例，for 循环中使用临时变量继承函数运行结果示例，函数运行结果保存临时变量示例

摘要：示例代码  <template> <div class="component-name">  <div v-for="item in items" :key="item.id" :data-item 阅读全文

posted @ 2024-07-30 22:32 joken1310 阅读(440) 评论(0) 推荐(0)

css 属性百分比基准—块级父元素

摘要：概论总体而言百分比的基准就是父元素的宽度高度，如果父元素有设置具体的宽高，就会以父元素的宽高为基准，没设置具体宽高的话，也就是父级width:auto;height:auto;元素宽会以父元素实际的占用宽为基准，高确不是以父元素的高为基准，此时高不生效。父元素须是块级元素。如果父元素是inlin 阅读全文

posted @ 2024-07-30 21:22 joken1310 阅读(101) 评论(0) 推荐(0)

js 一个对象有多层，都是分组对象，最后一层才是数组，怎么拍平这个对象，拍平后的格式是{a.b.c:[]}

摘要：要将一个嵌套对象拍平为 {a.b.c: []} 这种格式，可以使用递归方法遍历对象的每一层，并在最终层级构建平坦的键值对。以下是实现这一功能的示例代码： function flattenObject(obj, parentKey = '', result = {}) { for (let key i 阅读全文

posted @ 2024-07-27 11:41 joken1310 阅读(72) 评论(0) 推荐(0)

js 对数组进行任意层、n层分组

摘要：如果分组层数是动态的，即可以是 n 层，可以使用递归函数来实现。以下是一个示例代码，展示了如何实现动态层数分组： const _ = require('lodash'); // 示例数据 let data = [ { category: 'A', type: 'X', subType: 'Alpha 阅读全文

posted @ 2024-07-27 11:37 joken1310 阅读(92) 评论(0) 推荐(0)

xlsx-js-style 前端插件如何把table dom 转为表格下载

摘要：在 Vue.js 项目中使用 xlsx-js-style 来将 HTML 表格转换为 Excel 并下载，可以通过以下步骤实现：步骤安装 xlsx-js-style 库：使用 npm 安装 xlsx-js-style 库。 npm install xlsx-js-style 创建 Vue 组件阅读全文

posted @ 2024-07-24 22:04 joken1310 阅读(325) 评论(0) 推荐(0)

joken-前端工程师