公司项目相关
推开世界的门
掘金地址:https://juejin.cn/user/2963939081585479/posts
展开
-
发布订阅模式以及mitt源码实现
发布-订阅者模式(Publish-Subscribe Pattern)是一种软件设计模式,用于实现对象间的一对多通信。在该模式中,存在两种角色:发布者(Publisher)和订阅者(Subscriber)。原创 2024-04-18 15:03:11 · 518 阅读 · 0 评论 -
vue3 中 主题定制
我们在切换主题的时候,在组件内其实没有做任何处理,是在pinia 里做的监听持久化 这里用到了 persist 插件通过向外暴露setupTheme 来实现 修改主题。原创 2024-03-01 18:25:16 · 646 阅读 · 0 评论 -
查看 npm的一些命令,以及npm config set registry x x x 不生效 解决方案
其他配置文件干扰:在某些情况下,可能存在其他配置文件覆盖了 npm 的配置。你可以检查是否存在其他配置文件,如 ~/.npmrc 或项目根目录下的 .npmrc 文件,并确保其中没有覆盖 npm 源的配置。该文件通常位于 ~/.npmrc (用户级别)或项目根目录下的 .npmrc (项目级别)。这会显示 npm 的配置信息,包括当前使用的源(registry)。将 替换为你想查看的配置项的键名,比如 registry。修改完保存后,重新运行 npm 命令时应该会使用新的源。原创 2024-01-31 14:19:12 · 5907 阅读 · 0 评论 -
vue3 根据点击位置,实现一个用户头像弹框定位
最近在做直播后台,涉及到对用户的一些操作,比如关注/取关/禁言/踢出直播间。多个地方都要用,需要封装一个弹框组件。原创 2024-01-26 12:06:15 · 812 阅读 · 0 评论 -
小程序实现一个 倒计时组件
初始化时间: 如果服务度返回了时间差,这一步不用处理。时间的格式化处理,这里都是固定代码,没什么含量。tick 倒计时函数。原创 2023-09-14 17:36:09 · 1008 阅读 · 0 评论 -
【无标题】
数结构,用于处理关联数据展示,但是后端不会返回一个树结构,而是会返回一个关联id,需要我们去关联,做一个树结构。原创 2022-12-27 19:51:53 · 2758 阅读 · 0 评论 -
vue3 使用富文本
vue3 使用富文本。原创 2022-11-25 14:58:30 · 3408 阅读 · 0 评论 -
vue拖拽删除实现
自营上传图片,但是需要排序和删除功能,所以用到了h5的拖拽源元素: 即被拖拽的元素。目标元素: 即合法的可释放元素。每个事件的事件主体都是两者之一。原创 2022-11-25 14:37:44 · 5113 阅读 · 2 评论 -
Object和Map的区别
Object和Map的区别原创 2022-07-28 15:40:03 · 307 阅读 · 0 评论 -
第一次进入小程序判断
前端第一次进入小程序判断。原创 2022-07-28 14:19:33 · 1539 阅读 · 0 评论 -
h5 调起小程序
h5调起小程序原创 2022-07-14 16:53:00 · 460 阅读 · 0 评论 -
小程序 拉起企业微信进群二维码
小程序加入企业微信群聊原创 2022-07-14 16:34:42 · 2033 阅读 · 0 评论 -
js -对连续月份数据做处理拆分
需求背景积分列表,返回用户的积分数据,想做一个按月的展示。想着后端按月返回不就可以了,但是要做触底翻页,每个月的数据也不确定,不太好做拆分,那就前端来搞吧数据这里是二月和三月的分界点,我们要把数据处理成这种格式即可有一个标识,判断显示时间那条数据,并且时间那条数据也要在列表里,应为要做循环转换后数据格式这样循环的时候,判断type == ‘tag’ ,则显示月份,下一个数据,正常循环代码list.forEach((item) => { const { desc: lab原创 2022-04-22 20:09:02 · 637 阅读 · 0 评论 -
if-else 优化
if -else 优化工厂模式将逻辑单独抽离成方法构造数据表结构以上就是对if-else的优化原创 2022-04-22 16:07:24 · 149 阅读 · 0 评论 -
小程序 - canvas绘制海报
需求背景小程序不能直接分享至朋友圈,所以采用海报(最关键的就是邀请码)邀请好友。从展示层面来讲,就是几张图,通过定位放在一起即可,但是关键是要保存,这个时候,就需要canvas去进行图片合成。那么canvas绘制海报,就拆分两个部分通过css ,给用户展现的组合图片,这跟简单通过css 布局,将各个元素组合在一起。这个想必不用多说,保存时,通过canvas绘图,将图片合成一个完整的图片canvas 绘图,有两种模式新版 2d 模式(有坑,慎用)老版 canvas-id=“draw原创 2022-04-20 18:40:08 · 3531 阅读 · 1 评论 -
小程序 - wxs
wxs: 在小程序里写函数表达式,做数据处理官方文档wxsWXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。在wxs里写正则,将. 替换为 / 象需要使用 getRegExp函数。wxs 判断数据类型...原创 2022-04-20 16:11:17 · 847 阅读 · 0 评论 -
小程序 - 超过两件折叠展开逻辑
需求背景:小程序商品数据不是太多,所以无需分页,但是全部展示又太占位置。所以做一个超过两件进行展开折叠,用户自己效果图实现思路前景: 超过两件,展示展开折叠图例。点击图例,传数据,和标识进去。如果 showAll == true ,表明要全部展示,直接将传入的数据返回如果showAll == false , 表明只展示两件。循环传入数据,将其保存,并返回index.wxsvar goodsList = function (list = [], showAll) { if (showAll原创 2022-04-20 15:28:25 · 477 阅读 · 1 评论 -
PWA 我来了
PWA参考链接https://www.jianshu.com/p/06791535d0b6https://segmentfault.com/a/1190000010669126原创 2022-02-07 17:55:30 · 301 阅读 · 0 评论 -
一次敏感词检测开发记录
需求用户上传execl,前端解析excel ,解析之后,将excel的json数据,传给后端,后端通过关键字检测算法,返回你之前传的数据,并且附件敏感字。然后前端渲染数据只table。并且用户以到excel形式下载table表格数据。没看错,全程后端就是对敏感词检测,excel 解析 ,下载,都是前端来做。我们一步一步来分析步骤一 界面编写界面编写 就是element一梭子 <!-- 上传文件按钮界面 --> <div class="buttonBox">原创 2021-12-10 19:35:02 · 1389 阅读 · 0 评论 -
vue拖拽滑动分割面板
需求背景左边是列表,右边是详情。 想更大范围的查看详情,所以要拖拽滑块,进行面板的分割整体思路在布局上,采用flex布局,单位采用百分比。设置flex:1,让其自动伸缩滑动滑块,计算滑块在滑动过程中,占整个页面的百分比将百分比,通过动态样式赋值给列表页的宽度同时改变滑块的位置(也是百分比形式)其次就是在vue里对鼠标事件的使用代码实现在template里 写事件@mousedown.prevent="mousedown"在methods里写方法 /** * 按下鼠标原创 2021-11-17 15:09:04 · 1043 阅读 · 0 评论 -
vue虚拟列表
需求背景应对socket返回的大量数据,前端做展示上性能的优化,所以做了虚拟列表。附加一些其他功能虚拟列表基本实现内存释放(防止栈溢出)解决滑动快,数据未及时加载问题加锁,解锁需要做虚拟列表,需要遇到下面的知识点,所以做一个总结,具体如下需要计算文档实际内容需要计算滚动条滚动距离计算窗口可是区域虚拟列表加锁,解锁上滑加锁 (需要判断上滑 or 下滑)点击加锁 (点击事件)右侧全局控制加锁 (点击事件)触底解锁 (判断是否触底)虚拟列表主要就是这些参数...原创 2021-11-17 11:52:01 · 1471 阅读 · 0 评论 -
vue下拉触底,判断上滑下滑
下拉触底常用参数scrollHeight(文档内容实际高度,包括超出视窗的溢出部分)、scrollTop(滚动条滚动距离)、clientHeight(窗口可视范围高度)。当 clientHeight + scrollTop >= scrollHeight 时,表示已经抵达内容的底部了,可以加载更多内容。在js里scrollHeight:可以通过 document.documentElement.scrollHeight 、document.body.scrollHei原创 2021-11-16 17:08:47 · 1794 阅读 · 0 评论 -
css 动画使用以及特殊样式实现
css动画css动画比较transition的优点在于简单易用,但是它有几个很大的局限。(1)transition需要事件触发,所以没法在网页加载时自动发生。(2)transition是一次性的,不能重复发生,除非一再触发。(3)transition只能定义开始状态和结束状态,不能定义中间状态,也就是说只有两个状态。(4)一条transition规则,只能定义一个属性的变化,不能涉及多个属性。CSS Animation就是为了解决这些问题而提出的。遇到的动画demo过度 (用于和anim原创 2021-10-27 17:57:37 · 411 阅读 · 2 评论 -
js根据时间多少,计算该显示年月日
getTime() { getTime( '', (res) => { console.log('系统时间', res.data.data.time_now) this.nowTime = res.data.data.time_now this.orderData.forEach((val, index) => { let newTime = (val.expire_.原创 2021-08-27 17:10:43 · 214 阅读 · 0 评论 -
vue中keepalive的使用
App.vue写2个 router-view 出口<keep-alive> <!-- 需要缓存的视图组件 --> <router-view v-if="$route.meta.keepAlive"> </router-view></keep-alive><!-- 不需要缓存的视图组件 --><router-view v-if="!$route.meta.keepAlive"></router原创 2021-07-27 11:26:46 · 279 阅读 · 0 评论 -
vue中进行浏览器的赋值功能
getCopy() { let oInput = document.createElement('input'); // 创建一个input oInput.value = this.address;// 进行数据赋值this.address是要赋值的数据 document.body.appendChild(oInput); oInput.select(); // 选择对象; console.log(oInput.value) .原创 2021-07-27 10:45:12 · 471 阅读 · 0 评论 -
vue中关于src,class,style的三元表达式的使用
src,class中三元表达式的使用说明根据不同的路由,进行选中态的切换。并且进行图片的替换代码 <div :class="[ $route.path == '/home' ? 'header-main-li header-newclass' : 'header-main-li', ]" @click="getRoute('/home')" >原创 2021-07-27 10:39:07 · 3086 阅读 · 0 评论 -
vue 求上一周,周一,周日的日期
需求请求接口,但是必须是上一周,周一到周日的日期,比如今天是2021.7.23 ,周五。因为是周五,所以我请求接口要用上一周,周一到周日的日期。那经过计算,上周周一对应的日期是 2021.7.12。上周周日对应的日期是2021.7.18.那这两个日期就是要求的日期下面开始代码实现created() { this.getDays(); }, methods:{ getDays() { var day1 = new Date(); var day2 = new原创 2021-07-23 18:45:18 · 715 阅读 · 0 评论 -
vue项目中使用 Echarts的一些总结,包括饼图,折现图,折柱混图,年月日切换
先奉上官网地址,一切以官网为主Echrts官网Echarts的基本使用安装cnpm i echarts -S全局使用在main.js中引入,然后用变量,将其挂载到vue的原型上import echarts from 'echarts'Vue.prototype.$echarts = echarts在组件中,就可以直接使用this.$echarts.init()稍后会说按需引入下面来说一个我在项目中的总结先看这个图 折柱混合首先是对数据的处理我们首先是要在页面画原创 2021-07-23 17:49:51 · 2754 阅读 · 10 评论 -
Vue实现 bilibili移动端项目
b站看的视频,来做个总结视频地址: https://www.bilibili.com/video/BV18A411J7QT?p=21&spm_id_from=pageDriver技术选型vue + vue-router网络请求 axios样式布局: vant + less + vw/vh + flex + 百分比布局存储 locallstorage个人人为的的技术知识点路由路由赖加载const login = ()=> import ('../views/logi原创 2021-07-20 17:09:58 · 976 阅读 · 1 评论 -
vue 项目里的基本操作
一 样式class,styletab切换样式 <div class="buy-ways cursor marginRight" :class="{ activeSty: activeWay === 1 }" @click="getWay(1)"> <img src="../../assets/image/zhifubao-3.png" alt="" /> <span>支付宝</span> </div&原创 2021-02-25 19:50:31 · 253 阅读 · 1 评论 -
vue 多环境打包
package.json默认配置"scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" },改为"scripts": { "serve": "vue-cli-service serve --mode development", "build": "vue-cli-service build原创 2021-02-25 11:15:07 · 199 阅读 · 0 评论 -
vue 封装button组件
<template> <div> <div class="login-btn cursor" :class="myClass" :style="{ opacity: opacity }" @click="debounce"> <span :class="['s']">{{ text }}</span> </div> </div></template><script&原创 2021-02-24 14:33:03 · 268 阅读 · 0 评论 -
sessionStorage,localStorie,cookie的使用选择
sessionStorage,localStorage,cookie 虽然用的多,但是我现在也遇到一些问题如果登录状态,同一标签下共享数据,把网址复制粘贴到新打开的标签页里,依旧可以打开(sessionStorage不满足)如果登录的时候选了十天免登陆,那我十天之后,怎么清除账号密码,(localStorage永久有效的,除非手动改清除,但是api并没有提供时间记录)sessionStorage只能在同一标签下共享,把网址复制粘贴到新打开的标签页里面,你会惊喜的发现,what?居然不共享。原创 2021-02-06 16:55:45 · 303 阅读 · 1 评论 -
el-checkbox 三级联动实现,有图有数据
el-checkbox 三级联动实现,一层数据结构和两层数据结构的同步选中取消效果图点击获取数据,即可获取当前选中所有的id代码<template> <div style="display: flex"> <div> <el-checkbox v-model="AllChecked" @change="allHandle">全选</el-checkbox> <div v-for="(item, i原创 2021-01-14 19:11:20 · 1152 阅读 · 0 评论 -
vue element ui 弹框组件里的el-input如何自动聚焦
vue element ui中 弹框组件里的el-input如何自动聚打开弹窗时,跟上如下代码。 this.$nextTick(function(){ this.$refs['siteInput'].focus(); })this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它,然后等待 DOM 更新。...原创 2020-12-28 16:04:19 · 2208 阅读 · 0 评论 -
vue element 搜索,分页 ,优化,其他一些技巧
涉及到单个查询,联合查询,分页等功能。出一个接口,后面坠不同参数,只需要监听url参数的变化,或者本身传递的参数。将url参数的变化,作为查询的条件。出发点:通过beforeRouteUpdate,对路由变化进行监控 beforeRouteUpdate(to, from, next) { // 如果路径一样,说明才是进行搜索,或者分页的数据 if (to.path === from.path) { // 对参数对象,进行拷贝 const newQu原创 2020-12-05 15:23:10 · 573 阅读 · 0 评论 -
小程序 uniapp 实现pdf 电子合同签名 并导出功能
小程序 uniapp 实现pdf 电子合同签名 并导出功能需求流程:用户只允许上传pdf后端将上传后的pdf以base64图片的形式返回用户设置签名的位置位置设置完成,将电子签名放到设定的位置处利用canvas将两张图片合成一张图片,保存至相册实操代码实现:...原创 2020-12-04 17:16:00 · 24863 阅读 · 109 评论 -
vue基于element-ui二次封装分页组件和一些优化
先来看一下整体的需求分析有表格的地方,就有分页,怎么做到表格样式统一多个分页,代码重复,如何减少代码重复地址栏输入页码,如何去通知当前分页状态的改变刷新之后,如何保持当前页面分页数据(不回到最初)怎样更少的将数据监听,不会都挂载到data上(抽取成方法)beforeRouteUpdate ,computed, watch 的使用,提高代码的质量element-ui的分组组件提供的四个事件1.组件封装 把需要的属性提取出来<template> <div class原创 2020-11-19 20:02:44 · 533 阅读 · 0 评论 -
慕课小慕读书后台总结
登录输入框,如果没有数据自动聚焦mounted() { if (this.loginForm.username === "") { this.$refs.username.focus(); } else if (this.loginForm.password === "") { this.$refs.password.focus(); } },密码框的显示影藏切换 :icon-class="passwordType === 'passwor.原创 2020-11-17 16:09:45 · 670 阅读 · 0 评论