- 博客(36)
- 收藏
- 关注
RSS订阅原创 可能不会有人教你的vue奇技淫巧之表单转描述列表
起源是我在工作中遇到的一个比较奇葩的需求，一般给表单做回显时，都是加个 disabled 状态做回显，省事并且数据展示都和提交时一致，但是需求方嫌丑，要求把表单做成描述列表（element-ui 的 Descriptions 组件）。
2024-09-13 11:22:45
972
原创 vue实现类似于el-table-column的当内容过长被隐藏时显示 tooltip的组件
最近这家公司的项目有很多仅作展示的类似于报告的页面，但设计稿设计的极不合理的，在小屏宽度自适应的时候经常会出现文字展示不全或换行的问题，为了优化这类的显示效果，采用了给对应元素的设置title办法解决。但title的问题在于不管文字展示全不全都会展示，而且样式不能自定义。在element-ui的table组件中，可以通过设置show-overflow-tooltip属性来实现当内容过长被隐藏时显示 tooltip的效果，我们可以参考其原理实现类似的组件。
2023-01-30 17:29:24
2021
原创 当你的代码遇到AI，笛卡尔积（商品sku）的种类计算
最近chatGPT特别火，突发奇想的想到了用ai进行代码重构的话会不会有奇效，于是拿出了一段以前写的计算所有sku组合的代码
2022-12-09 16:56:48
367
原创 记一次使用动态引入vue组件的经历
在import函数使用过程中却遇到了Cannot read property ‘range‘ of null的报错
2022-11-12 16:10:13
1370
原创 hljs和vkbeautify的xml,json代码高亮功能
最近有个需求是实现报文的一个展示，需要满足xml，json、普通字符串的展示及高亮，网上查阅资料后，使用hljs和vkbeautify组合的居多。首先是vkbeautify，他是一个做格式化的工具，可以将xml、json字符串做格式化处理，处理后的字符串直接放入pre+code的标签就会直接显示格式化好的样子，hljs是一个做代码高亮的工具，他们搭配正好可以实现报文的格式化和高亮使用方法很简单需注意的点1.vkbeautify.json方法格式化会调用JSON.parse,需考虑处理json格式不
2022-07-11 11:11:44
1945
原创 学习和使用ts的一些小记录
隐式索引签名如果对象文字中的所有已知属性都可以分配给该索引签名，则对象文字类型现在可以分配给具有索引签名的类型。这使得可以将使用对象文字初始化的变量作为参数传递给需要映射或字典的函数：function httpService(path: string, headers: { [x: string]: string }) {}const headers = {“Content-Type”: “application/x-www-form-urlencoded”,};httpService("",
2022-03-04 11:14:07
172
原创 windows复制某个文件夹并排除某些文件的方法
使用的是xcopy命令，文档地址在xcopy | Microsoft Docs在复制前端项目时，依赖过于多，多个项目尤其难受使用xcopy 要复制的文件夹路径 复制到的路径 /s /e /exclude:一个文本文档的路径如11.txt在文本文档内写入node_modules将排除目录 node_modules下的所有文件或扩展名为 .node_modules的所有文件。详细文档上文已贴出。...
2022-02-21 09:51:19
1958
原创 将react-router变的像vue-router好用
在项目使用umi进行开发的时候，umi简单的路由配置深深吸引了我，毕竟说白了也不难，也有react-router-confing这样的项目了，为了学习ts的某些用法，尝试着自己做下实现，贴代码坐下记录 未考虑到重定向等问题，不可用做项目import About from "@/pages/about";import Home from "@/pages/home";import Layout from "@/layout";import { Switch, Route } from "react
2022-02-18 17:56:15
475
原创 当umi.js(umi3)自动化部署遇到的问题
公司新的项目采用了umi3+dva+antd（antdpro-compoent）的技术栈，在开发和配置的时候开箱即用还是很爽的，但在用Jenkins自动化部署的时候，却怎么打包都失败Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory大致意思就是 堆限制分配附近的无效标记压缩失败 - JavaScript堆内存不足经过百度发现在打包数量很多的时候node内存可能会不够用
2022-02-10 11:18:26
1731
原创 el-input在对其原生input事件监听并修改双向绑定值时修改无效的问题
如题，场景为对于用户输入的空格以及分号进行监听，由于@keyup的空格监听会导致用户使用输入法输入时也会触发目标事件，所以改为input监听其输入的最后一位值。但当监听其原生事件input时会出现双向绑定的值修改了，未响应到页面的情况（目前只发现对于中文分号有此问题），解决方案是手动对event.target.value进行赋值，element-ui@2.15.0 仅作记录...
2021-09-22 16:57:44
1253
原创 vue3+element-plus的table封装
//只写了最基础的import { defineComponent, toRefs, PropType } from "vue";type slotFunction = (scope: Record<string, unknown>) => JSX.Element;interface TableConfig { props?: Record<string, unknown>; //el-table-column props header?: slotFunctio
2021-06-03 10:54:38
2424
原创 vue的异步更新机制，学习vue源码的总结
vue的双向绑定基于Object.defineProperty以及对于数组原型改变数组自身的7种方法进行增强来实现。在其值发生改变时，通过拦截数据时设置的dep实例调用dep.notify()即循环dep实例的subs数组（一个由wacher所组成的数组），调用每个watcher的update方法update将会分作三种情况执行，此处对于lazy为真情况（即computed）以及sync为真（同步直接执行watcher的run进行更新）不做深究在一般情况下，update实际是调用了queueWatc.
2021-05-17 16:10:44
181
原创 当项目使用vue.min.js的cdn开发时vue-devtools不能调试引发的一些问题
这个问题的起因时项目是采用了cdn引入来减少项目体积方式进行开发的，由于采用了vue.min.js，所以导致vue-devtools无法调试，在最开始，许多组件其实都是原来封装好的，所以并无大碍，但当我在写一个相对数据结构复杂的组件时，发现vue-devtools还是很有必要的，由此我采用了官网的满血版cdn，但还是没有用（也可能是因为浏览器没有重启的原因），最终我选择了官网的(npm满血包)，重启浏览器后生效了，但这种直接改了public/index.html的方式会让线上的环境也受到影响，.gitig.
2021-04-29 10:17:44
1068
1
原创 vue+elementUI表单提交自动定位到错误的地方
原文地址vue+elementUI表单提交自动定位到错误的地方submit(ruleForm) { this.$refs[ruleForm].validate(valid => { if (valid) { } else { setTimeout(()=>{ const isError= document.getElementsByClassName('is-error') isE
2021-04-08 14:55:01
1282
原创 elementUI的table合并
关于table的合并，官方给的案例及其简单，所以当项目遇到此类问题，踩坑是无法避免的，其合并原理类似html的table合并。
2021-04-08 14:50:57
1220
原创 当使用qiankun时vue-devtools无法观测到子应用的解决方案
原内容在[反馈]使用qiankun时，vue-devtools无法调试子项目我采用了作者推荐的第二种方案进行解决instance = new Vue({ router, store, i18n, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app') if (process.env.NODE_ENV === 'development') { // vue-d.
2021-04-08 14:36:46
2108
原创 vue-socket.io的使用
vue-socket.io其实就和vue-i18n等一样，在原版（socket.io）的基础上进行的二次封装，使其可以直接在vue里通过插件安装使用。使用版本为3.0.10，基于socket.io2.x封装，由于其文档新版进行过修改，所以百度出来的许多用法其实是过时了的//在对后台事件监听时，并非使用this.socket.on("message", data => {console.log("message:" + data) })//而是this.sockets.subscribe(.
2021-01-25 16:38:10
1767
5
原创 关于uniapp开发app的坑2（有些可能是app开发都会遇到的），ios篇
ios基于安卓代码修改的，更改的并不多，只不过是需要一台iphone来测试，更改内容主要是在登录和支付这块，登录的话如果有用到第三方登录，如微信登录，那么必须加上苹果登录，并对ios版本进行判断，只有ios12（忘了是不是了）以上版本才支持苹果登录，并且对于虚拟物品支付，需要使用苹果支付，苹果支付的话是有坑在的，登录与其他第三方登录并无区别首先，调起苹果支付前，需先对苹果支付通道验证，验证后才能调起苹果登录，不知是uniapp还是苹果方的问题，对于支付成功回调有时会进行错误返回，最坑的是，苹果的...
2020-12-19 19:31:18
1566
2
原创 uniapp的热更新（安卓），方便自己以后遇到这需求了cv改一下
好久没写博客了，最近事事不顺心…谈下uniapp热更新的实现，其实东西多百度下，在Dcloud官方论坛也能找到，但里面优劣不一，看的比较痛苦实现原理很简单，就是在app启动时即onLaunch里(首页也行，首页甚至可以写出更好的效果，也可以在onLaunch里判断跳转的路径)进行版本号校验请求（这里完全就是按需求校验了），当后台返回了下载链接时，启用下载，下载完成后进行安装 updateVersion() { // #ifdef APP-PLUS let plateform =
2020-12-07 09:55:33
755
2
原创 pc网页分享到第三方（记录）
最近有加pc端的分享的需求，百度+自己写写了个整合的函数，以备后用 var imageUrl // 分享图片链接 var title, url, description, keywords; function shareTo(types) { //获取文章标题 title = document.title; //当内容中没有图片时，设置分享图片为网站logo //获取当前网页url url = document.location.href; //获取网.
2020-10-20 11:49:53
625
原创 今天有人问了uniapp的app的webview通信，简单写一下如何实现，做个记录
思路实现是基于uniapp的一位大佬的贴子Simple nvue向网页传参，网页向nvue传参，其实看下原帖也就会了，以下纯属娱乐.<web-view :src="url" @message="handlePostMessage"></web-view>@message是webview向app通信时触发的函数，在script里面 var currentWebview； //当前页面 var wv; //webview export default { data(.
2020-10-13 17:26:21
4602
7
原创 new File的兼容性问题
今天遇到了有客户说在edge浏览器下无法上传图片的问题，寻找了个老的edge浏览器测了一下，果然不行，原因是new File在老版edge上不支持，当然ie也不用想了，解决方案是采用blob上传// base64 转 files 这是原来的写法dataURLtoFile(dataURI, fileName) { var arr = dataURI.split(','); var byteString = atob(arr[1]); var mime = arr[0].matc
2020-09-28 14:13:15
2697
1
原创 uniapp在h5开发可能会遇到的问题（个人备忘）
在打包时候，可以使用vue.config.js，但是有限制…支持情况支持情况CLI 工程HBuilderX 2.1.5 及以上版本注意事项仅vue页面生效部分配置项会被编译配置覆盖，例如：publicPath 不支持，如果需要配置，请在 manifest.json->h5->router->base 中配置，参考文档：h5-routeroutputDir 不支持assetsDir 固定 staticpages 不支持runtimeCompiler 固定 fal.
2020-08-28 17:13:10
2524
原创 forEach，map和await使用的那些事（工作记录）
酷爱for循环的我在遇见了多层嵌套时终于感受到了人力的渺小，最终选择了forEach，然而，在功能迭代添加新功能时，遇到了问题，我在uniapp使用了await竟然报了语法错误，编译后的小程序和app也gg，看了看上面函数的await，我能确定uniapp支持await，我也确定for循环支持，可这不是for循环…查了下果然forEach，map里面使用await会出错，原因是在forEach或者map的循环里，这时候的上下文就变成了array，而不是async function怎么补救呢，Prom
2020-08-26 16:27:33
452
原创 使用uniapp在微信小程序改变v-model里面的值，视图不更新的解决方案
项目需要将输入框的值做处理再显示出来，在input事件改变v-model值后视图不能更新，切换页面会显示正确值，使用this.set也无法出发更新机制，甚至使用vm.set也无法出发更新机制，甚至使用vm.set也无法出发更新机制，甚至使用vm.forceUpdate()也无法更新视图解决办法是使用了vm.$nextTick()，回调中使用vue.set，脑壳疼...
2020-08-24 17:06:37
4196
2
原创 Umeditor的图片缩放异常（个人开发记录）
我遇到的问题是图片只能缩小并且会缩成一个点，百度了一下是由于使用了bootstrap以及layui造成的css问题，解决方案是加上.edui-container *{-webkit-box-sizing: content-box;-moz-box-sizing: content-box;box-sizing: content-box;} .edui-container *:before,.edui-container *:after {-webkit-box-sizing: content-box;-m.
2020-08-11 11:59:00
314
原创 关于uniapp开发app的坑（有些可能是app开发都会遇到的），仅做个人记录，目前为安卓版本
首先第三方授权登录（如微信登录）中的签名为app证书的md5，方法按照Dcloud官方走就完事，Java可以选择下载qq的，更快，用Oracle的贼麻烦还要注册账户，然后就到了坑，再输入密码的时候会发现输入的内容不显示，一度怀疑人生，后来发现只是是隐藏了而已，为了安全…...
2020-08-05 17:02:23
7424
1
原创 The play() request was interrupted by a call to pause()的原因及解决方案（备忘）
首先说说原因，其实就是视频（音频）加载未完成进行播放所导致的（使用错误链接播放也会有相同问题）解决方案，前一种的话坐下判断加载是否完成即可//video 为jq对象，原生对象把video[0]换成原生对象即可playPromise = video[0].play(); if (playPromise) { playPromise.then(() => { // 视频频加载成功 // 视频频的播放需要耗时 setTimeout(()
2020-07-27 10:06:11
15259
1
原创 uniapp图片裁剪组件，找了好久..，这个功能不错（备忘）
uniapp插件市场 Github仓库作者：prianYu插件里自带demo，开箱即用，文档也挺详细备注：组件里面的js使用src引入，建议复制到vue页面，貌似不复制小程序会报错
2020-07-25 16:02:23
2613
1
原创 js如何通过链接下载一个视频（备忘）
downloadFile(fileurl, filename) { let _that = this; this.$http.defaults.timeout = 100 * 60 * 1000; this.$http.get( fileurl, { responseType: 'blob', onDownloadProgress(progress) { //_that.downProgress = Math.round(progre.
2020-07-25 15:52:11
4033
原创 uniapp小程序端出现v-for 暂不支持循环数据的原因
在双循环中，必须保持key值不同，起因是后端改了id为tag_id，前端使用了以前的id作为key值导致key为undefined
2020-07-25 15:48:24
4299
原创 利用a标签实现下载（备忘）
利用a标签来实现保存function download(filename, text) { var el = document.createElement('a'); //创建a标签 el.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text)); //href URL 规定...
2020-04-25 23:55:03
416
原创 vue自定义指令的二三谈
先来说说vue自定义指令的设计初衷，在官网上有这么一段话：有的情况下，你仍然需要对普通 DOM 元素进行底层操作，这时候就会用到自定义指令。虽然我们极力避免操作底层dom，但凡事总有例外，所以vue给我们留下了自定义指令这个退路。以下是几种关于自定义指令的写法：//全局定义 Vue.directive("color",function(el,binding){ ...
2020-04-18 15:14:15
86
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人