- 博客(51)
- 收藏
- 关注
RSS订阅原创 el-image-viewer 大图预览（源码，属性讲解）
以上是组件共享出来的属性，如果我们想有一些个性化的需求，比如轮播到最后一张不能滚动等，可以使用 infinite，infinite 虽然没有共享出来，我们可以在 父组件 通过 this.$refs 的方法获取到这个组件，然后就可以改变他的 infinite 属性了，要注意的是，需要在当前组件 v-if 为真的时候通过this.$refs获取。或者我们可以自己把源码封装成一个自己的组件，方便使用。图片的urc数组，里面的每一项元素是一个图片地址。预览的初始图片在urlList的索引。
2024-09-25 14:36:22
240
原创 三元表达式的嵌套用法a ＞ 0 ? b ＞ 0 ? c : d : e；（我之前还以为是五元表达式）
c : d : e;其实就是两个三元表达式的嵌套用法，这是我看见之前的同事写的代码，当时没看出来，就研究了一下，上面的代码就等于 let test = b > 0?
2024-09-13 11:44:34
234
原创 vscode中全局代码片段怎么改名字
在使用vscode定义自己的代码片段的时候，有几个选项，如果我们选择了 vue.json 的文件定义代码片段，那么只能在 vue 文件中使用该片段，并且是 vue 文件中没有写其他代码的时候，如果 vue 文件中写了其他代码，那么 vue.json 里面定义的代码片段还还使用不了，所以我们需要定义一个全局代码片段，我下面会跟着说全局代码片段的定义以及定义了之后，怎么更改全局代码片段的名字。跳出文件来在这里定义自己的全局代码片段就好了，这里定义的代码片段，全局生效。然后会弹出文件所在位置。
2024-09-05 16:25:14
214
原创 v-bind后面不加属性和v-bind的动态属性
v-bind 平常常见的用法我们应该都知道，说一说 v-bind 的不常用的方式，第一个就是 v-bind 后面直接不添加任何属性，此时会将一个对象的所有 property 都作为 prop 传入。下面来说一下 v-bind 的动态属性，例如 v-bind:[str]="sonObj" 的 str 会自动根据 data 里面的数据来充当属性。
2024-09-04 15:28:51
2075
原创 ts函数的参数加一个_是什么意思
前缀通常是一种约定或习惯，用来表示该参数在当前函数体内是故意未使用的，需要注意的是，这种做法并不是TypeScript或Vue的强制要求，而是一种在项目中常见的最佳实践或约定，但是对于是函数参数的解构来说，这种写法没有用。先说一下总结，在TypeScript（TS）和Vue 3项目中，给函数的参数加一个下划线（
2024-09-04 10:56:41
2040
原创 TypeError: Cannot read properties of undefined (reading ‘ciphertext‘)
ciphertext 是密文的意思，可能是使用插件进行解密的时候，密文的内容是 null 空的，假如密文是 null 时我们可以把密文改成空字符串就好了。例如 使用了 CryptoJS 进行加解密，关于 CryptoJS 的介绍可以看这篇文章。
2024-08-23 16:56:37
2466
原创 vue3里面的组件实例类型（包括原生的html标签类型）
在 通过 ref（null）获取组件的时候，我们想要为 组件标注组件类型，可以通过 any 类型来进行标注，但是很明显，这些的代码很不优雅，所以我们可以利用 vue3 里面的 InstanceType 来进行类型标注。但是上面的类型是自己定义的组件的，如果想给原生的 html 标签进行类型标注，我们该写什么类型呢，来看一下代码。有关 HTMLHeadingElement 和 HTMLDivElement 类型是怎么来的，可以看这篇文章。这是官网上面有关 InstanceType 的使用方法截图。
2024-08-19 16:14:54
2679
原创 vue3里面ts报错 不能将类型“null”分配给类型“abstract new (...args: any) =＞ any”
原因是我们在写实例类型的时候，用了 vue3 里面的 InstanceType，但是把泛型里面的一个 > 写错了位置 ，来看案例。
2024-08-19 15:44:20
2322
原创 微信公众号授权流程
access_token=${obj.access_token}&openid=${obj.openid}&lang=zh_CN(通过前面获得的参数，在这一步获得用户信息，返回给前端)-------->getConfig(前端) --------> /getConfig(后端) --------> getInfo(前端)-------->getMyData(前端)，不是我录的，是我找到的视频，这是源码仓库地址。然后这是下面这个我理解的，大题代码的运行流程。
2024-08-15 17:23:32
2606
原创 vue3中 watchEffect，watchPostEffect，watchSyncEffect的区别，代码示例
其实关于watchEffect，watchPostEffect，watchSyncEffect的区别就是执行的时机不同，watchSyncEffect 是最先执行的，其次是watchEffect，最后才是watchPostEffect，先来看一下vue官网的说明（不想看说明的直接看示例代码就可以了）
2024-08-14 15:55:23
519
原创 dataOptions.call is not a function（vue3）
我在网上看了很多案例，但是好像和我项目中的 bug 都不一样，然后我自己尝试复现，也出现了这个 报错，但是我还没有对比我项目中的代码，因为是 vue2 升 vue3 的，代码量有点多，所以先记录一下目前这个报错的案例之一，后面如果发现这种情况不是我项目中的情况，我可能还会继续找其他情况的解决方法。目前我发现的原因就是当前组件的 instance 被写在了模版中。上述的情况就会报这种错误。
2024-08-01 17:00:15
1136
原创 [vite] Internal server error: v-model cannot be used on v-for or v-slot...(关于 v-slot 的)
在项目中报了这么一个错误，然后我在博客上面看了一些文章，发现写的都是关于 v-for 的，所以我自己写了一份关于 v-slot 报这个错误的案例，供大家参考。先说一下解决思路，解决思路就是 把要改变的数据放在父组件中改变，而不是子组件中就行，下面来看一下案例代码。当是这样的时候，就会报上面的错误，下面来看改正之后的代码。插槽子组件 three.vue。插槽子组件 three.vue。插槽父组件 two.vue。插槽父组件 two.vue。容器组件 one.vue。容器组件 one.vue。
2024-07-31 10:16:59
2708
原创 .main-#{$theme-name} scss(sass)选择器变量使用
今天在升级项目，从vue2升级到vue3的时候，我们项目的css预处理器也需要从 scss 升级到 less，然后项目中有一串代码我就没看明白，举例就是 .main-#{$theme-name} 这种类型。后面自己实验，原来这个就是 选择器的字符串拼接吧，看下面代码及结果。两个 scss 文件，我放在了 style 目录下。
2024-07-29 15:21:55
2709
原创 ios（苹果）在微信公众号上面复制文本和其他环境不一样
做了一个需求，真是耗了一下午的时间，需求是后端给我的一端文本，我需要复制下来，所处环境是微信公众号，前两天我以为我已经开发好了，在微信开发者工具和同事的手机上面测试都没问题，今天拿我的手机测试，结果有所不同，下面我来详细说一下过程以及解决方法。但是在后面的过程中，我就换成了 copy-to-clipboard 这个包，所以后面的解决办法，如果针对前面的两个复制方法，没有用，可以 换成 copy-to-clipboard 这个包尝试。我之前用的 复制文本 方法 是。
2024-07-23 20:24:30
1022
原创 vue给数组赋值页面没有更新渲染（和别人的不一样）
今天在项目中测试给我测出来了一个问题，但是我反复检查，感觉代码没有问题，但是页面就是不更新，最后我慢慢的尝试，找到了问题的解决方法，不过目前还不清楚为什么会出现这个问题。由于公司的代码我不能泄露，但是我重试复现，没出现那个问题，项目比较忙，我就不去细细琢磨了，以下代码 bug 没复现，只提供参考。解决方法： 给渲染数组的那个标签外面在加一层div标签就可以了。
2024-07-19 15:39:44
1126
原创 vxetable的高亮行不显示
在开发过程中，我遇到了一个需求，就是有两个表格，点击 表格1 的行 动态加载 表格2 的内容，同时，表格1 被点击的行需要高亮显示。由于有两个表格，所以我给每个表格都加了一个 key 值，但是，我按照官网的文档设置了 :row-config="{isCurrent: true, isHover: true}" 属性，可是当点击的时候，高亮行仍然不会显示。解决方法：把需要有 高亮行 的那个表格 的 key 值去掉就好了。
2024-07-17 10:34:30
1048
原创 vxe-table的序号一样
此时的这三个序号是相同的，我来说一下原因，这是在添加新的一行的时候，有的时候数据很多，我们不想一个个的写，就直接复制之前表格中的某一行，然后在改变其中的某一个属性，这个就会出现序号相同的情况。使用vxe-table的时候，有的时候会出现序号相同的现象，这种现象一般出现在我们后面自己添加的行中，就像这种。把新复制某一行的对象的 _X_ROW_KEY 赋值为 null 就可以了。
2024-07-04 11:22:56
1154
原创 下拉选择输入框(基于elment-ui)
不过我在网上看，其中有一篇的文章的，我觉得还不错，不过后面我发现有点麻烦，我懒得去细细研究他的做法，在这里我也提一下，有兴趣的可以自己去研究一下，他说的是，把 el-input 组件 和 el-select 放在一起，然后通过定位来把 el-input 放在 el-select 下拉选择的那里，其中 el-input。el-select 绑定一样的值。
2024-06-27 10:28:29
1154
4
原创 muse-ui的select下拉框没有出现在底部
说一下问题，就是当我们使用 muse-ui的下拉框的时候，他的下拉选择项总是没有出现在下拉框底部，我在官网也没有找到说明，不过官网给了案例，我对比找到了解决方法，先来看代码。如果进不去的，可以试着翻墙用外网看看，这里很奇怪，我前几天进不去，然后翻墙可以进，这两天不翻墙也能正常进去了。我对比官网的案例，其实就是加一个 tags 属性就好了。添加完之后，下拉选择项就正常在下拉框底部了。这个是muse-ui的官网文档。
2024-06-06 17:12:02
752
原创 子盒子定位右边出现滚动条，定位左边则不会
可以看到，这个时候，出现了滚动条的，但是同样的，如果我们把 right: -50px;换为 left: -50px;他则不会出现滚动条，具体原因嘛，我也不知道，不过我尝试了之后，找到解决方法，在这里分享一下。先来看一下问题，就是当我们在给子盒子设置定位是 position: absolute;并且 right 为负的时候，可能就会由于子盒子定位在右边而使底部出现可以左右滑动的滚动条。解决方法：给父盒子的css加上这两条，就可以解决了，缺一不可。
2024-06-04 15:54:37
537
原创 vfrom二开给左边添加字段或者容器
这个文件是当界面选择 English 的时候，显示的 字段组件 或者 容器组件的英文名。这个文件是当界面选择 简体中文 的时候，显示的 字段组件 或者 容器组件的中文名。例如，我在左侧加入一个 '我的公司' 字段。修改三个文件，这是文件目录。把上面写的 名字 注册一下。
2024-06-03 15:31:04
812
原创 Internal server error: [less] Unrecognised input
我之前查了资料，网上有的人说是 less 的配置不正确（这种问题引起的可以查找其他博客看），但是后面经过我慢慢的查找，还有一种可能，就是 less 的写法不对，下面我来解释一下我的错误和处理过程。那是因为在 less 中，我们使用 :deep()来控制深度选择器，以前用的是 /deep/,改成下面这个就好了。在 css 中，如果我们想深度修改第三方组件的样式，我们用 >>> 深度选择器来修改。但是如果我不用原生的css，我加上了 less 之后，他就会报错了。例如我的组件中是这样。
2024-04-28 10:42:17
1821
原创 关于ts的class创建出现：类型“xxx”上不存在属性“xxx” 或者 类型“typeof xxx”上不存在属性“xxx”。
这个是由于ts的检测比较严格，所以不能像js创建class的时候一样随意，一般就是没有事先声明属性或者静态属性，看下面代码。，那是因为我们在ts文件中没有事先声明 name 和 age 属性 已经 类的静态属性 salary。此时就会报错，报错分别为。把这里的注释解开就好了。
2024-04-24 09:43:09
1323
原创 [Vue warn]: useModel() called with prop “xxx“ which is not declared
我们在使用vue3里面的defineModel的时候可能会出现这个问题，原因是我们使用的 kebab-case 形式的属性名，我也不知道是不是vue3设定这个api的时候设置的不支持，我没找到相关文档，不过我们把 kebab-case 的形式改为 驼峰命名法 或者 只用 一个单词就好了。
2024-04-23 11:26:32
1681
1
原创 Extraneous non-props attributes (xxx) were passed to component but could not be automaticall
说明一种情况，其实挺尴尬的，就是我们单词写错的，驼峰命名法写错了，如果不是我这种情况，那么就是其他原因，可以参考一下其他博客的说明。
2024-04-19 15:30:08
1125
原创 此条件将始终返回“false”，因为 JavaScript 按引用而不是值比较对象。
当出现这个错误是因为 js 比较分两种比较方式，如果是简单数据类型，则可以直接用值来进行比较，如果是复杂数据类型，则比较的是地址。
2024-04-18 12:00:06
1353
1
原创 ts中已声明“rule”，但从未读取其值。
在TypeScript中，如果我们在函数中声明了一个参数但没有使用它，TypeScript会给出未使用参数的警告。这是为了帮助我们发现潜在的问题并提高代码质量。但有时候，可能确实存在不需要使用某个参数的情况。
2024-04-08 08:48:53
1219
原创 使用vscode前面几行被定住
当我们使用 vscode 滚动代码文档的时候，发现前面几行被定住了，想 css 的 sticky 一样，可能是之前我们不小心点到了这里，取消就好了。
2024-02-25 21:36:38
3088
3
原创 npm publish 报错
2. **切换npm registry**：有时候npm registry服务器可能出现问题，你可以尝试切换到其他的npm registry，比如使用淘宝的npm镜像。4. **重试发布**：如果以上方法都没有解决问题，可以尝试等待一段时间后重新运行`npm publish`命令，有时候问题可能是暂时性的。3. **增加超时时间**：你可以尝试增加npm的请求超时时间，以便更长时间地等待连接建立。1. **检查网络连接**：首先确保你的网络连接正常，可以尝试访问其他网站来确认网络连接没有问题。
2024-02-19 18:18:57
1467
原创 node生成短信验证码
请注意，这只是一个简单的示例，实际应用中可能需要更复杂的逻辑和安全性措施，例如对验证码进行加密、使用数据库存储、限制验证码请求频率等。对象中，以用户ID作为键。在校验验证码时，我们检查传递的验证码和存储的验证码是否一致，并且检查验证码是否过期。库生成一个4位的随机数字验证码，并将验证码存储在。在这个示例中，我们使用。
2024-02-06 17:28:08
884
3
原创 取两张数据库里面的字段
我现在数据库 record_city 有两张表，第一张表为articles，第二张表为user_info，我想查第一张表的全部数据，然后第一张里面有一个字段是aut_id，我想得到的结果是，第一张表里面的全部字段，以及根据第一张表的 aut_id 去和第二张表 user_info 里面的 id 做匹配，找到他们 aut_id == id 的这一行的 userName 这个字段。请注意，你需要将"articles"和"user_info"替换为实际的表名，"aut_id"和"id"替换为实际的字段名。
2024-02-03 17:33:00
1517
1
原创 node中使用nanoid
如果你的项目使用的是较新版本的Node.js（例如Node.js 14及以上版本），你可以尝试使用。库在版本2.0.0之后，将其代码从CommonJS模块转换为ES模块。这意味着在某些环境中，使用。如果你的项目使用的是旧版本的Node.js（例如Node.js 12及以下版本），你可以尝试使用。的旧版本（1.x.x）来解决这个问题。你可以使用以下命令安装旧版本的。请确保你的项目已经启用了ES模块的支持。库在某些情况下不支持使用。
2024-01-30 09:27:35
1237
1
原创 vite+vue3项目打包后图片不显示或者请求路径多了一个undefined
这里表示我们的 .env.development 文件，在打包的时候是不会被构建进去的，所以当我们打包后，.env.development 里面用到的路径就出错了。但是如果我们是把项目打包，然后在掉到 express 服务器里面去时，我们会发现，只显示了一张图片，另外一张图片的地址前面是 undefined。我们先来看一个简单的例子，我已经事先在本地构建了一个 express 服务器，端口是 3000，images 里面是有文件资源的，这是代码。
2024-01-24 11:31:21
3693
1
原创 vscode更改代码git没有更新
但是这样也不能实时更新，每次都要去点更新才会出现提示，我还是很不习惯，于是我就想到，我之前在网上复制了一份 vscode 的配置文件，会不会是那个影响了，结果就是的。最近我在修改文件的时候，我发现我的vscode不会像以前一样更新给我一个提示这个文件修改了，然后我上网搜。有人说是因为在项目最外层文件夹（项目名的同级目录下）git init了，产生了.git文件。可是没有修改的提示，很不方便啊，于是我到处点，发现了两个解决办法。但是我这样并没有作用，提示我。
2024-01-22 17:55:31
3370
3
原创 van-tabs的底部条位置错误，resize方法没有作用
官网所说的解决办法如图，不过我由于某些限制不能使用第一种方法，第二种方法resize使用了没有作用。方法2：在nextTick里面改变active的值，这里需要注意，赋的值和原始值必须不一样。最近在使用vant里面的组件，van-tabs是，底部条位置总是错误，页面长这样。方法3：把要赋值的函数换为 async 函数，结果换为 await 获取。后面我发现了三种解决办法（如果说明不清楚，可看代码），办法如下。方法1：在nextTick里面给要展示tab数组赋值。可是我想要的结果是这样。
2024-01-20 10:59:37
1027
2
原创 vue3子组件改变父组件的值（props）reactive和ref的区别
其实关于子组件改变父组件的值，直接改是不可以的，我们一般通过绑定事件来改变，但是如果是reactive里面的复杂数据类型，我们只要不改变其内存地址，是可以改变复杂数据类型里面的值的。下面看相关代码，父子组件的层级如图。
2024-01-19 17:24:12
2937
原创 关于css中的flex-shrink
默认情况下，项目的flex-shrink值为1，表示项目可以缩小，且所有项目的缩小比例相等。如果一个项目的flex-shrink值为2，在CSS中，flex-shrink属性用于指定弹性容器中的项目在空间不足时如何收缩。它控制项目的缩小比例。而其他项目的值为1，则前者在空间不足时会缩小的比其他项目更多。可以复制以下代码自己实验一下。
2024-01-06 21:52:25
717
1
原创 导航栏默认路由点击不会跳转
默认的首页和路由都是 path:"/",这样就会导致一个问题，当跳转到其他路由，比如 path:"/qs" 的时候, "/qs" 其实是包含 "/" 的，也就是说，跳转到其他路由，首页的路由依然被包含了，所以不会取消高亮。今天在学习新项目的时候，我发现了一个问题，就是当我点击导航栏的时候，默认进来的页面不会取消高亮，再次点击默认的导航栏，他也不会跳转到导航栏的，下面我细说一下这个问题。2，当跳转到其他页面后，再次点击首页（进来默认的页面）以上都没有报错，所以后面我找到了问题，来这里分享一下。
2023-12-29 15:59:36
1611
1
原创 postcss-pxtorem中的rootValue返回值没有生效问题
然后在重新启动，这样的话他是生效的啊，那么只有一种结果，就是 file.indexOf('vant')!== -1 一直都是为 true。按理说，.box 的 div 标签不是 vant 组件，所以他的 1rem 等于 75px，这里给他 width 定义的是 750px，应该恰好等于 10rem，恰好是整个屏幕的宽度才对。也就是说，1rem 等于十分之一的屏幕宽度，如果使用的是 vant 组件，则 1rem = 37.5px，如果使用的不是 vant 组件的样式，那么 1rem = 75px。
2023-12-26 16:51:58
1100
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人