- 博客(107)
- 收藏
- 关注
RSS订阅原创 10-20位随机字母数字特殊符号密码
调用方法：passData.value.password = generateRandomString(Math.floor(Math.random() *11) + 10);得到10-20位随机密码。调用方法：validatePassword(value) 为true则校验通过。需求：点击按钮，生产随机密码，同时对用户输入的密码进行规则校验。规则：10-20位密码且必须包含至少一个字母、数字、(
2023-04-24 18:24:35
2418
原创 hover显示滚动条
目标：在card-content盒子内容溢出的情况下，先隐藏滚动条，当用户将鼠标移入盒子内部后，显示滚动条，我这里只用到y轴滚动条。
2023-04-18 17:43:08
1185
1
原创 base64格式(pdf/word/ppt等)文件的下载与预览
后端返回base64格式的文件数据，前端根据接收的数据进行转换后实现对文件的下载和预览方法：
2023-04-17 09:33:09
2169
4
原创 uniapp点击生成商品海报、下载海报、分享海报
开发过程中遇到的根据商品信息生成海报，供用户下载海报 、分享海报等需求，页面结构及js完整代码如下：
2023-02-17 14:30:38
1321
原创 超详细版：HBuilderX中实现uniapp小程序动态tabBar
先在Page.json文件中tabBar/list数组内配置好所有需要展示的页面，这里只需要在list各对象中设置好。自定义tabBar组件：在根目录下创建components/myTabBar/myTabBar.vue文件。根据用户身份或登录状态匹配出需要展示的tabBar页面，建立vuex进行存储。隐藏所有tabBar页面对应的.vue页面的导航栏。最后一步：在各导航栏.vue文件中使用该组件即可。
2023-02-13 10:56:53
5725
5
原创 ECharts柱状图上方添加指定照片
ECharts柱状图上方添加指定照片：在series中添加markPoint，由图片地址、图片所在柱状图位置、图片所处y轴位置组成
2023-02-09 15:50:42
2729
原创 JS导出Echarts图标数据为Excel表格
开发需求需要在Echarts图表右上角添加一个按钮，将图表数据下载为Excel，下面获取到所有echarts数据后通过js手动对数据进行排列和换行的方式完成了需求。
2023-02-01 16:24:11
1232
原创 vite打包时通过.env在不同的模式下传递不同环境变量数据
要在打包过程中，根据不通模式获取到不同的环境变量值，需要通过--mode选项标志来覆盖命令使用的默认模式，比如开发环境/测试环境/生产环境都对应不同的标题：1. 先在项目根目录下创建三个.env文件对应三个环境变量；2. 在package.json文件中scripts内传递 --mode 选项标志来覆盖命令使用的默认模式；3. 使用const uploadFileUrl = ref(import.meta.env.VITE_APP_TITLE)
2023-01-30 15:31:53
3034
原创 Vue3报selectValue is not defined at d.onUpdate:modelValue.s.＜computed＞.s.＜computed＞
开发过程中二次封装了一个搜索的组件，子组件内使用了el-select和el-input参数分别对应父组件传入的selectValue和selectText参数子组件内部@change和@input事件来同步触发组件中数据的修改最终本地开发环境一切正常，部署到测试环境和生产环境后出现下方报错：selectValue is not defined at d.onUpdate:modelValue.s..s.报错后开始不自信，反复查看本地都是没有报错了，但是测试环境就是有问
2022-12-06 18:02:11
2473
原创 vue2/vue3 Transition+routerView实现过渡动画效果
这里涉及到两个知识点：Transition+routerView，下面先展示下vue官网相关使用说明：1.Vue 提供了Transition内置组件，可以帮助制作基于状态变化的过渡和动画；2.是基本的动态组件，所以我们可以用组件给它添加一些过渡效果
2022-12-02 09:52:14
3909
原创 前端为上传图片添加水印，可回显可存储
代码不多，可以借助于Element-ui的el-upload或者Ant-design的a-upload，在组件中使用before-upload钩子拿到file文件数据后：
2022-11-22 09:52:20
1220
原创 看一遍学会Vue结合axios使用mockjs
这意味着当mockjs匹配到‘/mock/tableDataOne’这个路径时，就会返回对象中的数据。5.在.vue文案中引入request并发送请求(这里在mouted中做了简单的测试使用)第5步在.vue文件的mounted中使用封装的request发送一个新的请求。2.在vue文件src下新建mock文件夹与内部mock.js 文件。在后端接口未开发完成情况下，前端自己模拟接口返回的数据。3.main.js文件中引入mock.js文件。第2步mock.js文件中添加mock模拟代码。
2022-09-29 16:32:29
1637
原创 npm ERR! code ERESOLVEnpm ERR! ERESOLVE could not resolvenpm ERR! npm ERR! While resolving: @vue/
legacy-peer-deps标志是在v7中引入的，目的是绕过peerDependency自动安装；它告诉 NPM 忽略项目中引入的各个modules之间的相同modules但不同版本的问题并继续安装，保证各个引入的依赖之间对自身所使用的不同版本modules共存。在NPM v7中，现在默认安装peerDependencies。在很多情况下，这会导致版本冲突，从而中断安装过程。
2022-09-29 15:18:23
8236
原创 Vue点击按钮 复制指定内容
下面提供一个方法用于实现复制指定文本。函数传入的数据即为需要复制的文本内容。创建一个文本域dom元素将dom元素textarea的值value设置为传入文本将dom元素添加到body上触发textarea的select方法判断是否支持copy复制完成复制后将dom元素从body移除避免内存泄漏
2022-09-29 09:10:48
569
原创 基于vue-croppper的组件封装
@realTime支持小图实时预览支持左右旋转支持大小缩放支持框选图片区域支持裁剪指定区域附npm示例地址(可根据需求添加功能)：https://codepen.io/xyxiao001/pen/yLooYKg
2022-09-27 09:23:24
502
原创 vue3中使用getCurrentInstance通过ref调用子组件属性与方法
1.setup语法糖中导入子组件2.在子组件标签上绑定ref值3.setup内部从vue中按需导出 getCurrentInstance 方法4.调用getCurrentInstance方法导出proxy5.通过proxy.$refs.子组件ref名.子组件内属性/方法 实现调用子组件中：js内需要通过defineExpose导出父组件需要使用的属性和方法即可
2022-09-19 10:42:38
3974
原创 Failed to parse source for import analysis. Install @vitejs/plugin-vue to handle .vue files.
[vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. Install @vitejs/plugin-vue tohandle .vue files.再次npm i@vitejs/plugin-vue后仍然无效可以看下vite.config.js文件中的plugins配置项中是否添加了vue()，如：...
2022-08-29 17:11:36
3533
原创 vite-plugin-vue-setup-extend和unplugin-auto-import让v3开发更丝滑
1.vite-plugin-vue-setup-extend让v3的setup语法糖增强；2.unplugin-auto-import让API自动导入，可以让vue-router中的createRouter，createWebHashHistory，createWebHistory等API直接写在setup内。可以让vueAPI里面的ref,reactive,watch,watchEffect等等api直接写在setup内，也可以让pinia中的createPinia直接写在setup.........
2022-08-29 10:27:12
6875
4
原创 getBoundingClientRect、offset、page、client、screen相关API及释义合集
dom.getBoundingClientRect().top距离可视区顶部dom.getBoundingClientRect().right距离可视区顶部dom.getBoundingClientRect().bottom距离可视区顶部dom.getBoundingClientRect().left距离可视区顶部dom.getBoundingClientRect().width宽度(返回小数)= dom.offsetWidth(返回整数)dom.getBoundingClientRect()等.
2022-08-26 17:52:54
993
原创 js拼接页面元素，v-html多个指定位置文本高亮，为v-html拼接的字符串绑定onclick事件
vue3中使用v-html实现多个指定位置文本高亮，并在js拼接页面元素过程中为v-html拼接的字符串绑定onclick事件，解决直接绑定setup中函数的报错Uncaught ReferenceError: checkedBtn is not defined at HTMLSpanElement.onclick (nel:1:1)
2022-08-24 16:18:40
2319
原创 Vue3中的VueX持久化
1.下载持久化插件2.将store模块化，在src/store文件夹下新建modules文件，在modules下新建多个js文件3.使用vuex-persistedstate插件来进行持久化在vue3中以上使用到了modules分模块，在此补充：即使改模块未带命名空间namespaced:true，在使用store获取数据的时候仍然要加上模块名($store.state.mode1.name)，其他gettersmutationsactions都在全局。带命名空间names
2022-08-23 14:25:15
1773
原创 vue拖动缩放组件(vue-drag-zoom) 增加禁止缩放拖拽功能
前段时间写了一个类似于百度ICOR，可拖拽缩放图片并在图片上框选文字的功能，这里的拖拽缩放功能就用到了vue-drag-zoom组件，组件是从npm下载的VUE2代码，放在VUE3+vite项目里面也是可以兼容的，但是组件仅提供了禁止缩放的API且存在一定问题。3.解决了频繁禁止与恢复拖拽缩放时，图片回到初始位置的问题。1.新增禁止拖拽API，与禁止缩放API整合。2.解决了缩放后图片不固定在中心点问题。
2022-08-22 16:00:12
2012
原创 Expected a JavaScript module script but the server responded with a MIME type of “text/html“.Strict
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.vue3+vite项目中，在.vue文件内部引入了.js文件后报错
2022-08-22 13:06:21
16320
2
原创 Vite/Vue 配置路径别名 @表示根路径，点击实现快捷跳转
配置别名路径在.vue文件中点击下方路径可跳转至对应文件中，如果使用Vue : 在vue.config.js文件中进行如下配置，如果使用Vite : 在vite.config.js文件中进行如下配置。。。
2022-08-12 16:38:05
6123
2
原创 svg+js实现描点成框，并获取相对图片的坐标位置
获取图片中的相对位置，通过js或svg来完成在图片四个点后形成矩形框，并记录坐标，以及不同情况下获取到x轴与y轴坐标的方法：e.offsetX、e.clientX、e.pageX等
2022-08-04 13:28:24
2343
原创 Vue/React 展示JSON 可拷贝可展开
Vue/React在页面展示JSON格式数据可拷贝可展开，并附修改vue-json-viewer中my-awesome-json-theme样式代码
2022-08-01 10:39:04
2448
原创 解决Echarts中折线图多条线的x轴不一样
在做折线图的过程中遇到了后端返回多条x轴数据与series中的data对应，这里我需要分离出data数组内每个对象的createTime日期作为x轴数据。1.在遍历数组每一项后拿到所有x轴数据合并为一个数组。2.通过newSet去重后得到无重复的x轴数据。3.使用sort为数组排序。...
2022-07-27 13:56:15
5460
原创 vue中使用echarts折线图配置总结
最后附重点：如何添加一个平行于x轴的标线？1.取消鼠标移入折线图时的虚线指示器、2.改变legend形状及颜色样式、3. 为Y轴设置最大值与最小值的同时避免Y轴轴线消失、4.取消平行于X轴的Y轴横线与刻度线、6.取消折线图线段上面的圆点、7.让数据一样的折线段从同一起点出发：取消 stack: 'Total' 这一行...8.解决部分线段内部数据为空时，页面折线中断的问题......
2022-07-22 17:51:15
4036
原创 运用span-method巧妙实现多层table数据的行合并
vue中使用对elementUI的table数据进行合并行，给大家总结了十分简易的合并一层数据与两层数据的综合写法，解释充分，代码通俗易懂
2022-06-11 19:40:18
4102
原创 JS跟踪用户keyDown事件，实现点击单选，Ctrl多选效果
JS跟踪用户keyDown事件，鼠标点击tag标签后高亮显示，按下Ctrl键单击实现多选，在选中情况下再次单击后取消选择
2022-04-19 22:23:07
2169
原创 Vue+Element实现多个checkbox的全选与联动选择
Vue+Element实现多个checkbox之间的联动选择以及isIndeterminate全选状态的调整
2022-04-18 19:49:16
4111
1
原创 vue中数据滚动显示 实现Element-UI中el-table内数据的懒加载
1.挂在阶段监听el-table的scroll滚动事件2. 当table表格滚动条的位置+调试的固定高度+要显示数据的高度>=el-table-body(当前加载出的table数据总高度)时就可以向table数据源中push进新的数据了
2022-03-29 23:01:05
7246
原创 移动端如何实现Vant组件与rem适配?
大多数设计稿的原型都是以 iphone6 为原型，iphone6 设备的宽是 750，我们的设计稿也是这样. 但是 Vant 是基于 375 写的，所以如果你设置为 75 的话，Vant 的样式就小了一半。
2022-03-03 22:46:08
680
1
原创 Vue3和Vue2对比，我们如何选用？
Vue3带来的新变化 性能提升（零成本：从vue2切到vue3就享受到） 首次渲染更快，diff算法更快，内存占用更少，打包体积更小，.... 更好的Typescript支持（在vue下写TS更方便了） 提供新的写代码的方式：Composition API （需要学习成本） 这些Vue2.0的语法不能用了vue3.0对于2.0版本的大部分语法都是可以兼容的（之前是怎么写的，现在也正常写），但是也有一些破坏性的语法更新，这个大家要格外注意 1.移除了vu...
2022-01-12 22:07:49
12020
2
原创 前端高频面试题：谈谈你对原型链的理解√
要讲清楚这个问题，主要着重这几个方面：什么是原型对象、构造函数, 原型对象, 实例的三角关系图、原型链如何形成、在 JavaScript 中，每个对象中都有一个 __proto__ 属性，这个属性指向了当前对象的构造函数的原型。对象可以通过自身的 __proto__属性与它的构造函数的原型对象连接起来，而因为它的原型对象也有 __proto__，因此这样就串联形成一个链式结构，也就是我们称为的原型链。
2021-12-14 15:31:07
1875
原创 JS中的内存泄漏与垃圾回收机制
内存泄漏：就是用动态存储分配函数动态开辟的内存空间，使用完后没有及时回收，导致一直占据着内存单元，数量多了后就会造成内存泄漏。总结：垃圾回收虽然可以找到一些不再使用的局部变量回收，但是它无法对全局变量、Dom元素引用、闭包等进行回收处理，所以这也是导致内存泄漏的一个重要原因。
2021-12-14 14:52:59
1277
3
原创 Vue自定义指令 例：解决异常图片情况
全局自定义指令 v-on:keyup.enter="()=>{}" v-指令名:属性名.修饰符=’值‘ 定义 input v-xxxVue.directive('指令名',{ 自定义指令的生命周期 bind:绑定时，自定义指令绑定于相应dom时执行（类似于vue生命周期的beforeMount） bind(dom,obj,vnode){ dom:指令所在dom obj:{ 属性名
2021-12-07 16:14:56
854
原创 React的render 函数中的 this 指向详解
常见的 五种this 指向问题的解决方案。方法 1高阶函数：通过 this 来直接调用handleClick 并返回箭头函数。???? 柯里化：通过函数调用继续返回函数的形式，实现多次接收参数最后统一处理的函数编码形式。方法 2包裹一层箭头函数。箭头函数中的 this 指向“外部”，即 render 函数，而 render 函数中的 this 正是组件实例。方法 3使用 bind。扩展???? 关于 class 中的实例方法和原型方法？原型方法
2021-12-06 21:08:06
1752
1
原创 实现网站的国际化语言切换
1：安装 yarn add vue-i18n2:导入 在此路径 src/lang/index.js import VueI18n from 'vue-i18n'3:注册 import Vue from 'vue' Vue.use(VueI18n)4:实例化 const i18n=new VueI18n({ locale:'当前语言的标识'， // en:英文 zh:中文 messages:{ // 语言包 ...
2021-11-27 20:17:12
2348
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人