SunnyRun！-CSDN博客

原创小程序隐私保护授权处理方式之弹窗组件

调用wx.getUserProfile进行授权时，返回错误信息：{errMsg: “getUserProfile:fail api scope is not declared in the privacy agreement”, errno: 112} 是因为微信小程序登录，增加了用户是否查看隐私协议的验证，不跳转到隐私协议，就不让用户登录。当前组件做了隐私保护指引弹窗界面，直接引用，需要授权时展示弹窗，当用户点击“拒绝”直接退出小程序，点击“同意”同步结果给微信且以后不再弹窗，之后可以正常使用隐私接口。

2023-08-30 14:35:02 13059 19

原创 vue3.x + vite4.3构建属于自己的组件库并发布npm包

在国内的项目研发过程中，使用vue框架的项目占比很大，同样延伸出了很多非常优秀的UI组件库，比如element-plus、ant-design等；优势：资源较少，快速开发，丰富的API，阅读性、性能优化更好等等。

2023-05-04 16:53:47 1041 1

原创 vue项目中element-ui的表格table的二次封装

列表数据表格的json配置；而element-ui的table主要是以template的方式进行页面的渲染，容易造成业务代码可观性并不是很友好，维护也不是很方便；element-ui的成熟度、以及使用率很大，市场上面的大多封装也很多，可扩展性也很方便。这里小编也做了一套简易版的二次封装，希望能帮到各位小编也是前端小白，代码也有不合理之处，只是在闲余时间内简单写写，提升提升能力。以上代码可根据自己的项目去做调整。

2019-08-05 15:37:56 13785 1

原创 vue实现搜索功能

前言：最近小编也是刚跳槽新的公司一个月，前端技术栈是vue+element也是市面上比较常用的框架之一了，同时也花费一点时间总结一下最近的坑，react转vue的一个过程确实是有些心累的，其主要原因还是写法的不同吧。需求：前端实现页面的筛选列表，是多条件的；what？后端不自己做页面的筛选搜索功能，怎么让前端做这样的一个功能点的实现，可能小编太老实了吧。无所谓，不纠结这些，那就分析一下需求...

2019-06-05 12:07:37 19770 6

原创【24届前端春招面试题】2024前端面试进阶指南-前端面试题总结大集合

对称加密算法使用起来简单快捷，密钥较短，且破译困难，除了数据加密标准（DES），另一个对称密钥加密系统是国际数据加密算法（IDEA），它比DES的加密性好，而且对计算机功能要求也没有那么高与对称加密算法不同，非对称加密算法需要两个密钥：公开密钥（publickey）和私有密钥（privatekey）。4、http的连接很简单，是无状态的；也就是说，通过TCP连接传送的数据，无差错，不丢失，不重复，且按序到达;3、http和https使用的是完全不同的连接方式，用的端口也不一样，前者是80，后者是443。

2019-01-17 10:48:47 22855 7

原创 ant design Table实现可编辑的单元格

需求最近接到的一个需求，在table栏中实现属性的可编辑单元格，并且table内部动态可动态删减的单元格，外部操作新增或删除一行新旧数据的操作，无交互的前端实现，这篇文章希望对你有帮助。想法或思路如何去实现这一功能，table无非是增删改查，现在只不过是从交互中抽离成前端的增删改查，增我们会想到 Array 的 push方法，删就是 slice 、splice等等。1、规则模块单独抽...

2018-12-21 21:06:09 28190 1

原创 nuxt3 Cannot find package ‘@popperis/core‘ 开发过程与踩坑记录心得

1、官网只解释了自定义路由的添加方法并未详细做出解释在哪块2、官网其实是有个文件的路径显示，在根路径下面创建app文件夹3、在app文件夹下面创建router.options.ts文件作为自定义路由4、示例: 添加后缀让我们的项目更加像html书写出来的也叫伪静态，动态路由有利于后台管理平台或者低代码生成我们的想要的界面，更加便捷与灵活，减少开发成本，只需要固定的生成方式即可；

2024-01-17 13:44:50 1063

原创【uniapp】uni-datetime-picker插件支持限制选择当前或者以后时间、禁用日期区域

欢迎点击领取 -《前端开发面试题进阶秘籍》：前端登顶之巅-最全面的前端知识点梳理总结*分享一个使用比较久的🪜目前官方文档没有可禁用日期的功能，因此我们要实现类似elementUI日期控件:picker-options="pickerOptions"的禁用功能，需要在官方文档的基础上修改了日期控件源代码，让其实现：2. 实现思路2.1 效果展示1）在业务代码中 uni-datetime-picker 组件的页面，把 disabledDate 函数参数传递给该组件，让其子组件可接收到；2）两种情况

2023-11-16 17:47:09 2846 1

原创 vue3富文本编辑器的二次封装开发-Tinymce

1、安装：pnpm add tinymce / pnpm add @tinymce/tinymce-vue ===> Vue3 + tinymce + @tinymce/tinymce-vue2、功能实现图片上传、基金卡片插入、收益卡片插入、源代码复用、最大长度限制、自定义表情包插入、文本内容输入、预览等功能。

2023-10-07 16:01:11 1115

原创微信小程序request请求的二次封装、uni-app、Taro.request

自带的微信小程序请求及框架类请求，书写比较繁琐；为了简写方便和全局处理封装的请求，因此我们对Taro.request请求二次封装和uni.request请求二次封装；以及包含常用的工具库封装，包含路由的跳转方法等。

2023-09-20 14:01:02 400

原创 vue3对echarts图表的二次封装之按需加载，折线图、饼图等

该文件用作于处理和初始化echarts的公用逻辑，抽离出来使用vue3的hooks用来注水操作。charts是我们后台系统中最常用的数据统计图形展示，外界对它的二次封装也不计层数；在业务代码内每次的初始dom和绑定setOption导致代码量的堆积不利于维护，拓展公共echarts组件，通过不同入参开启对应的功能更利于维护和排查问题；echarts的版本5.4.x

2023-09-12 14:15:00 553

原创 element plus Message方法手动关闭，close方法使用

vue3.x setup写法是没有this的指向的；而element plus ui组件库也是没有的；近期的需求涉及到轮询接口，需要使用Message方法，Message 拥有可控的 duration，默认的关闭时间为 3000 毫秒，当把这个属性的值设置为0便表示该消息不会被自动关闭。调用 Message 或 this.$message 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 close 方法。因为没有this方法，所以需要变量去接收它，这样才能拿到它的实例方法。

2023-09-05 15:10:47 1728

原创 vue实现自定义实现树形控件treejs

说明：支持点击创建远程数据，loadDataAjax方法，需要自己研究功能小编已实现；针对多层级的列表，我们采用tree的方式，从根节点一次创建绑定子节点的方式，可以递归式的调用本身，对我们的树形结构进行展示；1、创建TreeList文件夹，其中创建：fonts文件夹、index.js文件、tools.js文件、Tree.js文件、VueTreeList.vue文件；近期的一个功能需求，实现一个树形结构：可点击，可拖拽，右侧数据可以拖拽到对应的节点内，可创建文件夹、可创建文件、编辑文件名、可删除等等；

2023-08-24 17:46:58 2295

原创微信临时文件wxfile://tmp文件处理，微信小程序最新获取头像和昵称

技术栈：taro框架 + vue3版本，原因如下：因为微信提供给我开发者的是一个本地的临时文件是会失效的所以存在服务器，时间失效就回显失败了；

2023-08-15 15:37:35 7357

原创 vue自定义穿梭框支持远程滚动加载

技术框架公司的选型(老项目)：vue2 + iview-ui方案的实现思路是共性的，展现UI样式需要你们自定义进行更改；因为iview是全局注入，基本使用原先的类名进行二次创建公共组件，修改基础js实现逻辑；

2023-08-14 18:47:50 778

原创 uni-app微信小程序开发自定义select下拉多选内容篇

uni-app微信小程序开发自定义select下拉多选内容篇;

2023-08-09 14:47:32 2154

原创 vue3实现自定义select下拉框内容之城市区域篇

需求分析：1、实现一个区域下拉选项与现有ui组件库不同，支持多选、单选需求2、支持选中区域后-全选中当前区域下的所有城市信息3、只能选中当前一个区域的内的城市其余城市禁用扩展思路：1、封装公共组件或者封装在组件库内2、出入参相关api透明好理解3、支持单选或者多选，支持只选择当前区域下的城市或者全面区域下的城市4、在原有的element plus下进行扩展延伸满足需求5、缺陷：未做maxLength-标签最大展示的api；这个按需自己修改一下就行。

2023-08-09 14:14:43 2057

原创 element plus table表格复选框实现单选效果

框架vue3 + vite4.4.2 + element plus；需求背景：数据列表展示内容-复选框支持单选；我们都知道element的table ui组件type = selection，是一个复选框多选的状态，要支持单选有多种方式选择，而我们的项目对列表组件进行了二次封装，不在是模版标签的书写；方案：1. 模版标签式的写法，添加Radio单选标签进行渲染单元格，通过数据层唯一字段控制；2. 控制原有的复选框让其变更成单选，不增加多余逻辑代码和循环。这里我们使用的是方案2，简单便捷。

2023-07-12 11:14:20 2623 4

原创 2023最新前端面试题进阶指南(Vue/React/taro/uniapp/webpack/vite/npm/git/hr/大厂真题)

前端市场越来越卷，前端之死是否已成定局？跳槽前做好技术进阶突击，才能稳拿offer。面试必备的八股文，前端资料整理的超级全。结合了2023年最新的面试动向，精准拿捏今年的前端面试！前端登顶之巅、前端之巅、前端知识、前端面试、前端指南、前端进阶之旅、前端笔记整理，前端面试题总结，按模块整理精心分类、Vue、React、Vite、Webpack、JavaScript、Taro、Flutter、算法、网络、计算机等方面，打造最全面的前端面试题库，为你的前端面试之旅保驾护航！

2023-07-07 18:30:21 364 2

原创 vue项目element plus table表格和form搜索条件的二次封装

table表格的二次封装和Search的二次封装。表格根据自己喜好把请求层拆出来，引用上面；form 表单，搜索条件的二次封装，常用标签；

2023-04-26 13:46:20 1748

原创前端shell脚本执行打包构建功能

环境Mac iterm2命令窗口；因项目云效流水线构建node太老，不能执行单个项目的版本升级；前端框架使用vue3.2 + vite4.0.1需要node16以上支持；需要前端本地build上传；执行shell脚本 sh publish.sh(测试环境) || sh publish.sh online(线上环境)

2022-12-19 15:12:52 776

原创 vue3 vite配置tsconfig.json文件属性相关解释

所需操作依据项目的依赖进行设定，vue-tsc --noEmit会进行build文件的强校验，校验不通过说明文件内有ts异常文件，纠正在执行操作。执行命令 vue-tsc --noEmit && vite build --mode development。“noEmit”: true, // 不生成输出文件。

2022-12-09 10:21:56 2374

原创移动端适配方案postcss-px-to-viewport-opt

第一种方案是lib-flexible+postcss-pxtorem，在相当长一段时间里，这两个插件搭配都是解决移动端布局的神器，lib-flexible是阿里手淘系开源的一个库，用于设置font-size，同时处理一些窗口缩放的问题。其中一位主要贡献者正是阿里的大神winter。移动端适配方案viewport单位越来越受到众多浏览器的支持插件postcss-px-to-viewport，将px单位自动转换成viewport单位.安装 npm install postcss-px-to-vi.

2021-11-12 14:32:29 714

原创前端js实现正则表情包内容替换、前端表情包实现

表情包实现思路：通过全局正则针对文本内容走查，匹配到[嘿哈]文本表情包，通过创建div或者img标签，包裹将文本表情包替换成我们表情包的地址链接。// 创建文件emoticon.jsimport lottie from "lottie-web"; // 动画方法const lottieWrap = {};const emoticon = new Map([ ['[大笑]', { name: 'daxiao', src: 'https://url-daxiao.json'

2021-09-08 18:24:14 1698

原创 react hooks原理实现方式

它是一个被称作为代数效应的思想。代数效应是函数式编程中的一个概念，用于将副作用从函数调用中剥离出去。函数式组件本身是一个函数，那么在函数式编程中有一个理念就叫做代数效应。

2021-05-20 15:53:06 1259 5

原创 vue实现语音旁边的音波效果

前端实现语音录制功能背景：在H5页面实现移动端的语音录制，需要实现写相关的css波纹效果。代码片段<template> <div class="sound-sonic_wave"> <div class="wave w1"></div> <div class="wave w2"></div> </div></template><style lang="less" sc

2021-05-20 14:49:19 1580

原创 Vue 里怎样在 Render 中使用 $refs

背景：使用 element-ui 组件，发现el-popover组件有一个方法: doClose(). 调用方法为 this.refs[′name′].doClose(),经过测试正常使用是没问题的。现在想要在组件内的render函数里调用，一直获取不到this.refs['name'].doClose(), 经过测试正常使用是没问题的。现在想要在组件内的 render 函数里调用，一直获取不到 this.refs[′name′].doClose(),经过测试正常使用是没问题的。现在想要在组件内的ren

2020-09-04 11:41:40 1177 1

原创 webpack配置-相关属性说明

前言：webpack是我们现代前端最常见的模块打包工具，webpack 是一个模块打包器，主要目的是在浏览器上打包 JavaScript 文件。特性：打包 CommonJs 和 AMD 模块（以及绑定），可创建单个或多个按需加载的块，以减少初始加载时间，在编译期间会解决依赖关系，减少了运行时的大小，加载器可以在编译时预处理文件，如 coffee-script 到 javascript。小编也是从闲余时间零开始搭建webpack，作为演示讲解一些常用的功能块和属性方法1. 代码示例 webpack.b.

2020-07-10 17:43:21 1281

空空如也

空空如也