- 博客(68)
- 收藏
- 关注
RSS订阅原创 vue3+elementPlus el-calendar如何标出多个时间
【代码】vue3+elementPlus el-calendar如何标出多个时间。
2024-03-25 15:34:42
213
原创 vue3+elementPlus el-input禁止输入中文
这种写法会自动去掉输入的中文，如果是其他规则，可以将正则替换成自己需要的就可以。这里有比较常用的正则，可以作为参考。
2024-03-22 11:21:08
425
原创 vue3+element-plus中dialog对话框组件去掉遮罩层后可以操作底层页面，以及弹窗嵌套弹窗如何去掉遮罩层且可以操作底层页面
三、如果是弹窗嵌套弹窗，以上方法可能不会去掉遮罩层，这时就需要添加官网给出的另一个属性：append-to-body，具体解释可以查看官网。是自定义类名，和下面代码中的类名相同即可。
2024-03-18 17:28:02
663
原创 vue3+Echarts实现中国地图
3、如果引入的是china.json，那么需要配置echarts.registerMap('china', china)，如果引入的是china.js文件就不需要了。4、如果出险加载后的数据没有颜色（如下图所示）可能是china.json文件里的name名字与数据上的name名字不对应，检查一下，name名字是否一致。全选复制，在项目文件src文件下创建一个json文件，并在里面创建一个vue文件命名为china.vue。2、引入顺序是china.json，然后是echarts。1、地图要设置宽和高。
2024-03-13 11:34:59
785
1
原创 VUE3上传功能本地上传正常，打包上传后报错TypeError: ***.upload.addEventListener is not a function和文件上传请求地址
/这样就拿到了参数中的数据。//获取#/之前的字符串。一、erer这个错误很可能是因为在打包后，文件的路径或者名称发生了变化，导致代码中的某些方法无法正确找到。二、使用element-plus文件上传时，后端使用的时代理路径导致上传的url需要前端自己处理。1、文件node_modules/mockjs/dist/mock.js。
2024-03-04 17:01:35
550
转载 Vue3中div自由拖拽宽度和高度
Vue3中我们会遇到自由拖拽宽度和高度的页面需求，查看很多方法都无法满足当前需求。下面是我们Vue3版本的代码，非常简单主要构想说粗发拖拽方法，把所需要的div的高宽进行拖拽位置进行监听来加减自身div的px值。直接复制粘贴就可以实现效果。根据自己需求更改即可投入使用，非常方便快捷。
2024-02-22 17:34:16
124
原创 vue3顶部内容固定定位，下面内容可以向上滚动
功能要求：一个div里有两个模块儿，顶部按钮模块儿和下面的内容区域模块儿，顶部按钮模块儿固定在顶部不随滚动条滚动，下面内容区域可以滚动。1、顶部按钮固定定位，会脱离文档流，下面内容区域需要加一个margin-top，margin-top的值是上面顶部按钮模块儿的高度。第一步：在utils文件里创建directive文件夹，在directive文件夹下创建一个resizeObserver.js文件。第二步：在directive文件夹再创建一个index.js文件，目的是为了集中注册自定义指令。
2024-01-03 14:24:48
620
原创 el-select如何去掉placeholder属性
注意：这种方式有时候会不生效可能会受其他文件样式影响如样式覆盖，组件属性继承等，所以可以通过修改样式来实现。找到项目里设置全局样式的文件，使用伪类选择器将placeholder属性文字颜色透明度设置成0。功能要求是：当el-select的disabled属性为true的时候不展示“请选择”字样。元素的 placeholder 属性，可以在代码中将其设置为空字符串。2、如果想要全局修改的话，可以使用css修改。
2023-12-20 11:02:10
694
原创 vue3父组件提交校验多个子组件
1、子组件中的form要添加ref属性，并使用defineExpose暴露出去，这样父组件才能获取到子组件中的ref，才能进行校验。2、当对表格输入内容做校验时prop和v-model绑定的是同一个才能校验通过。3、当发现校验一直不通过时可以查看控制台打印的的结果，看哪个校验没通过。实现功能：在父组件提交事件中校验多个子组件中的form。这个是表格可以增删改的情况，对表格添加输入校验。这个是普通的form表单情况。
2023-11-20 16:04:31
355
原创 vue3+elementPlus el-select组件同时支持label和value模糊查询
element ui的select组件设置filterable后, 默认支持的是通过label来进行过滤搜索,注意：遍历的时候的key值不要用index，因为数组是事实变换的会无法找到对应的项，最好是用value值。功能要求：下拉框数据展示label+value，选中后的数据只展示label。visible-change(下拉框出现/隐藏时触发)的事件来实现功能.想要下拉框数据里同时显示label和value可以用插槽的方式。官方文档上提供了filter-method来自定义搜索方法。
2023-10-17 17:38:26
1126
1
原创 JWT授权为啥要在 Authorization标头里加个Bearer 呢
Digest MD5 哈希的 http-basic 认证 (已弃用)Bearer 常见于 OAuth 和 JWT 授权；Basic 用于 http-basic 认证；AWS4-HMAC-SHA256 AWS 授权。这是因为 W3C 的。
2023-10-08 17:15:21
1377
原创 vue3+Element Plus，实现输入身份证号计算出出生日期、年龄和性别
【代码】vue3+Element Plus，实现输入身份证号计算出出生日期、年龄和性别。
2023-10-08 15:08:48
411
原创 vue3+elementPlus el-input的type=“number“时去除右边的上下箭头
【代码】vue3+elementPlus el-input的type="number"时去除右边的上下箭头。
2023-10-07 17:16:39
822
1
原创 vue3+elementPlus ElMessageBox消息框取消按钮位置调整
项目里修改element里的样式有些需要添加deep，小编也是试了很多都行不通，只有重新写一个且不加任何属性信息，将上面的样式放在里面才会生效，不清楚为什么，有知道原因的欢迎留言分享。该方法是通过给取消按钮添加class然后修改样式，也可以给确定按钮添加class修改样式。要求所有的ElMessageBox消息弹出框的取消按钮放在右边，如图。确定按钮的class属性名是confirmButtonClass。
2023-10-07 16:57:18
1104
原创 vue3+elementPlus el-select 增加全选和取消全选
要求el-select支持多选，并增加全选和取消全选功能，缺点是提交的数据中会有全选这个字段。multiple是实现下拉框多选的属性。
2023-10-07 16:35:57
788
原创 vue3路由传参获取不到params，获取到为空
注意：从Vue Router的2022-8-22 更新后，我们使用param传参在新页面无法获取数据。
2023-08-17 16:23:48
2887
原创 vue3+elementPlus table里添加输入框并提交校验
【代码】vue3+elementPlus table里添加输入框并提交校验。
2023-08-17 09:55:47
2442
原创 Vue3+Vite+Pinia
Vite是一种新型前端构建工具，能够显著提升前端开发体验Vite 意在提供开箱即用的配置，同时它的和带来了高度的可扩展性，并有完整的类型支持。搭建Vite项目相关命令：Vite解决@问题修改项目中的vite.config.js文件。
2023-07-22 15:10:25
199
原创 TypeScript初体验（三）
DefinitelyTyped是一个GitHub仓库，用来提高质量TypeScript类型声明，可以通过npm/yarn来下载TS类型声明包，这些包的名称格式为：@type/*，例如：@type/react等。4、Record：构造一个对象类型，属性键为Keys表示对象有哪些属性，属性类型为Type表示对象属性的类型，1、Partial：将Type的所有属性设置为可选，不会改变传入类型的本身，而是创建一个新的类型。表示只要是string类型的属性名称，都可以出现在对象中。
2023-07-03 14:49:57
583
原创 TypeScript初体验（二）
2、protected：表示受保护的，仅对其声明所在类和子类中（非实例对象）可见，子类的内部可以通过this来访问父类中受保护的成员，但是，对实例不可见。3、枚举成员的值都是字符串的枚举称为字符串枚举，需要注意的是字符串枚举没有自增长的行为，因此，字符串枚举的每个成员必须有初始值。枚举：定义一组命名常量，枚举的功能类似于字面量类型+联合类型组合的功能，也可以表示一组明确的可选值。1、参数个数，参数多的兼容参数少的（或者说：参数少的可以赋值给参数多的）
2023-06-19 18:54:41
915
原创 TypeScript初体验（一）
原理：ts-node命令在内部偷偷的将TS->JS，然后，再运行JS，此命令不会生成JS文件，也不会修改对应的JS文件里的内容。3、查看元素的类型：在浏览器控制台，通过console.dir($0)打印DOM元素，在属性列表的最后面可以看到该元素的类型。类型别名，不仅可以为对象指定类型，实际上可以为任意类型指定别名。元组类型是另一种类型的数组，他确切的知道包含多少个元素，以及特定索引对应的类型。为变量添加约束，约定了什么类型，就只能给变量赋值该类型的值，否则就会报错。类型别名可以是任意合法的变量名称。
2023-05-13 15:19:15
528
1
原创 修改node版本，项目起不来
在自己电脑上找到之前的node版本安装包，重新安装，把项目里的node_modules文件夹先删掉，重新在控制台运行。实在不行的话可以试试项目重新从git上获取。卸载当前版本node sass。如果你已经下载了node-那么可能是node的版本和。重新启动项目应该就可以了。的版本不匹配导致的。
2023-03-09 17:32:55
760
原创 数组对象的深拷贝
2、当复杂一点数组，比如数组里面是对象的时候就不能使用结构语法了，可以使用JSON.parse(JSON.stringify(a))来实现。深拷贝不但对指针进行拷贝，并对指针指向的内容进行拷贝，经过深拷贝后的指针是指向两个不同地址的指针。浅拷贝主要是对指针的拷贝，拷贝后两个指针指向同一个内存空间，1、一维数组使用解构语法可以实现深拷贝。当a改变时，b不会变。
2022-10-08 11:22:12
3068
原创 React通过jsonp获取高德在线天气数据
使用jsonp请求，首先安装一下 jsonpyarn add jsonp在项目里的api文件夹下的index.js文件里写一下代码import { message } from "antd"; //这个是引用的antd前端组件库import jsonp from "jsonp";//请求高德天气export const reqWeather = (city)=>{ return new Promise((resolve,reject)=>{ c
2022-05-17 15:07:21
694
转载 JavaScript中用到的方法总汇
参考地址JavaScript中常用的方法汇总，全部整理好了，一定要收藏！ - zhang305 - 博客园https://www.cnblogs.com/PotatosMe/p/13751420.htmlhttps://www.cnblogs.com/PotatosMe/p/13751420.html
2022-04-11 15:14:35
67
转载 postMessage - 跨域消息传递
window.postMessage()方法可以安全地实现跨源通信。通常，对于两个不同页面的脚本，只有当执行它们的页面位于具有相同的协议（通常为https），端口号（443为https的默认值），以及主机 (两个页面的模数Document.domain设置为相同的值) 时，这两个脚本才能相互通信。window.postMessage()方法提供了一种受控机制来规避此限制，只要正确的使用，这种方法就很安全。...
2022-03-30 10:15:33
350
转载 vue数组对象根据某个属性值排序
methods: { getsort() { const arr = [{name: '苹果',num: 10},{name: '柚子',num: 6}] arr.sort(this.sortBy("num")) // [{name: '柚子',num: 6},{name: '苹果',num: 10}] }sortBy(i) { return function(a,b) { return a[i] - b[i] // a[i] - b[i]为正序，倒叙为 b.
2022-03-29 15:49:42
1611
原创 如何在git上创建项目
把最近使用git的体验记录一下，以免忘记1、创建项目将项目添加到git仓库创建一个项目，打开cmd输入create-react-app react-admin_app，创建一个react项目对本代代码生成本地仓库，打开创建的文件，按着shift+鼠标右击打开power shell，输入git status，查看状态，这种是没有改动过的如果是改动过的需要重新提交这种情况输入------git add . （后面的点不能不要忘记）然后提交-------git...
2022-01-10 20:31:56
13020
1
原创 字符串截取最后一个“/“前面或后面的全部字符串
const http = 'https://www.baidu.com/?tn=40020637_5_oem_dg' const str = http.substring(http.lastIndexOf("/")+1) console.log(str); //?tn=40020637_5_oem_dg const str2 = http.substring(0,http.lastIndexOf("/")) console.log(str2); //https://...
2021-05-20 11:04:42
1996
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人