爱分享的Hayes小朋友-优快云博客

使用element plus的的时候，total属性显示是英文这是我建的一个新项目，总数显示的Total 1000我们的需求是显示中文，共 1000 条这个就很尴尬，组件封装的东西，查了所有api都没有写怎么改官网上面有个（官网直通车）其实按照官网上写的配置，其实并不好使。那我们应该怎么办呢？一般的是不是都会去看看控制台里面有啥？细心的人会发现，这个好像就是我们引入的组件吧将这个展开，有个el对象，el对象里面会有pagination，里面的goto，total好像在哪里见过。

2023-06-07 19:10:30 4355 3

原创 pdfh5.js的使用以及遇到的坑

pdfh5插件的使用和遇到的坑

2023-03-24 15:04:35 6387 2

原创微信小程序在双大括号{{}}里面写方法

微信小程序在双大括号{{}}里面写方法，处理数据

2023-02-25 11:29:09 3392

转载虚拟列表实现方法（vue2/vue3）

关于vue2和vue3的虚拟列表的实现

2022-11-30 21:29:03 1583

原创 v-for遍历el-check-group全选功能

v-for 遍历多选框全选、勾选和取消勾选功能

2022-07-26 09:42:19 1737

原创 el-dropdown绑定click点击事件不生效和样式修改

el-dropdown绑定click点击事件不生效和样式修改我们在开发项目的时候会用到el-dropdown，这个功能一般都会在用户上进行使用比如：修改密码，退出的情况下绑定点击事件组件直接绑定点击事件是不生效的，需要通过 @click.native=‘logout’ 这种方式来进行绑定点击事件。修改样式先看图：这个组件的DOM不在#app里面，和#app是同级关系。如果我们要修改组件样式的话，我们就不能再style上加scoped，必须全局修改，这样就会出现一个情况：我们在其他地方使

2022-04-08 16:02:43 2831 2

原创 el-table长列表进行下拉分页

el-table长列表进行下拉分页在我们开发表格的时候，一般都会用到分页，有点击页码分页和下拉分页，点击页码分页在这里就不和大家分享了，今天和大家分享一下下拉分页。下拉分页的原理就是：el-table + 无限滚动我使用的是一个插件：el-table-infinite-scroll插件地址：https://www.npmjs.com/package/el-table-infinite-scrollnpm i el-table-infinite-scroll //安装依赖// 在main.j

2022-03-07 10:33:52 1197

原创解决150%分辨率下拉框错位和echarts鼠标移入焦点错位的问题

解决150%分辨率下拉框错位和echarts鼠标移入焦点错位的问题当我们在前端开发的过程中，可能会被要求适配主流分辨率。当我们把电脑分辨率调成150%的时候，一些下拉框会发生错位现象，echarts图标同样也是会出现这个问题，鼠标移入后，出现焦点错位的现象。虽然对功能没有任何影响，但是，用户体验真的是极差。在我开发的过程，有幸这两种情况都遇到了，因此，我在这里分享一下我的解决方案。下拉框错位我们先上图：这是我们需要的效果，在100%的屏幕下的效果这是150%屏幕下的效果我们想要在150%的

2022-03-04 14:23:51 3236 2

原创 el-select中DOM不在body中的情况

el-select中DOM不在body中的情况我们在使用 el-select 组件的时候，经常性的需要改变组件默认样式。但是出现一个问题，就是我们无论怎么修改，在页面上都不显示。当我们打开控制台后，细心的人就会发现，我们需要修改的dom元素并不在body里面，这样的话，我们应该怎么进行修改呢？第一种方法（有缺陷）我们可以全局修改，在页面上<style></style> //不加scoped这样的话就是全局修改，且需要加 !important，但是如果用到了相同的组

2022-03-02 16:45:14 711

原创 el-table分页全选功能

el-table分页全选功能今天和大家一起学习一个el-table 分页全选的功能我们在用el-table组件的时候，肯定会用到分页功能，不管是长列表下拉分页还是用element-UI的el-pagination分页。但是我们在具有选择功能的el-table的时候，会遇到一个问题，在点击进行分页之后，之前选择的数据没了，这个问题真的是困扰我良久。在初期我用的办法是，在el-table中，通过 @select=“changeSelect” 和 @selection-change=“handleSele

2022-03-01 18:27:16 5825 6

原创文本流数据转文件（word，excel，zip 等）

文本流数据转文件（word，excel，zip 等）写在前面我们在开发项目的时候，不难遇到一些导出的功能。比如说：导出excel表格等等。我在开发中就遇到了这么一个功能，将一些表格数据导出成一个excel表格，那么，这个应该怎么做呢？写这篇博客一来是为了加强自己的记忆，毕竟好记性不如烂笔头嘛，嘿嘿。。。第二个方面呢，希望能和大家一起分享这个功能，希望能帮助到那些没有接触过这个功能的小伙伴。话不多说，上菜咯功能点击导出全部数据，下载列表中的内容- 后台接口返回的内容..

2022-03-01 11:15:33 2482

原创 uniapp PDF预览在线上不跳转的问题

uniapp PDF预览在线上不跳转的问题PDF预览功能我们需要用到uni.downloadFile(),uni.openDocument()uni.downloadFile({ url: this.pdfUrl,//pdf地址 success: function(res) { var filePath = res.tempFilePath; uni.openDocument({ filePath: filePath, succes

2021-11-04 10:52:55 671

原创 uniapp input框校验数据格式，只能输入汉字/数字/字母等

input框常用的正则表达式<input class="uni-input iptStyle" name="input" placeholder="未识别出信息" v-model="form.fpNum" @input="fpNumInput" maxlength='24' />fpNumInput(e) { const o = e.target; const inputRule = /^(0+)|[^\d]+/g //修改inputRule 的值 this.$n

2021-10-27 17:00:32 5150 1

原创 uniapp carema组件图片上传需要先转为base64格式的问题

这段时间在做微信小程序ocr发票识别的功能，用到了uniapp里面的carema拍照的组件，在图片上传的时候遇到了一些坑。下面我来说一说：1. carema组件拍照之后会返回一个http的图片地址图片地址是这样的，只有一个http协议，没有域名，没有端口号，很显然，这个是只有本地才能识别的一个图片地址，当把这个地址放到浏览器上，你就会发现是这样的直接无法访问2. 如何将carema组件生成的图片让浏览器能够识别呢？这个我们就需要把图片转换为base64格式方法如下：transformBa

2021-09-03 14:37:38 411

原创 animation动画效果

animation动画效果// css@keyframes dong { 0% { transform: translate(0px, 0px); } 50% { transform: translate(100px, 0px); } 100% { transform: translate(0px, 0px); }}.move-line { width: 100px; height: 13px; position: relative; border-bottom:

2021-07-27 11:10:26 208

原创解决相对路径图片不显示问题

解决相对路径图片不显示问题我们在用vue或者react中进行开发时，有时候会出现我们写相对路径时，图片不会在页面上显示的问题data(){ return { imgSrc:"../../../static/banner1.png" }} // 在template里面<img :src='imgSrc' />这种情况，有时候在页面上，可能图片不会显示。我们又两种解决方法：1.直接写上域名；比如：http://www.baidu.com/xxx这种方法简单粗暴，但是

2021-07-26 14:36:36 3313 1

原创 github CI/CD前端自动部署发版

github CI/CD前端自动部署发版1.CI文件内容，此文件放在前端项目的根目录下，创建一个.gitlab-ci.yml文件，将以下内容复制到此文件中stages: - package - deploycache: paths: - node_modules/node-package: tags: - node_14_17 stage: package script: - export PATH=/var/node_v14/bin:$PATH

2021-07-22 12:35:53 935

原创 el-table 获取当前索引值，并展示在表格上

el-table 获取当前索引值，并展示在表格上当我们在用el-table开发的时候，经常遇到后台返回值中没有序号，但是产品设计的原型图中需要序号。原型图后台数据我们就那个着急啊。于是乎：我们找后台大哥商量可谁知后台大哥给我的回复没办法，干不过，惹不起，只能找产品小姐姐产品小姐姐：于是我哭唧唧的跑了出去怎么办呢？辞职不干了？还有车贷、房贷、孩子奶粉钱。于是乎，自己动手，丰衣足食。<el-table-column label="序号" align="center"

2021-07-22 10:53:53 2804 2

原创 ES6的Generator函数详解

ES6的Generator函数详解目的：用同步的方式来解决异步问题function* helloWorldGenerator() { yield "hello"; yield "world"; return "ending";}var hw = helloWorldGenerator();console.log("hw", hw); //执行console.log(hw.next(),1);console.log(hw.next(),2);console.log(hw.n

2021-07-13 22:29:27 185

原创多个数组对象进行拼接

多个数组对象进行拼接这个多个数组对象进行拼接，是我在做echarts图表中遇到的问题，echarts图表需要通过循环遍历来进行开发的。但是后台也就只给了一些数据，echarts的一些配置，比如：Y轴单位等等都没有，所以没办法，只有自己配置。我写了一个数组对象，想把我的数组对象拼接到后台返回的数据中。这是后台返回的数据（tableData4）这是我写的数组对象（legendList）这是我需要的最终结果 (riskData)实现代码,我们使用的是map方法进行处理this.riskDat

2021-06-02 10:51:30 1071

原创 echarts图表通过遍历出来的，resize()方法只生效最后一次执行的那个

echarts图表通过遍历出来的，resize()方法只生效最后一次执行的那个1.定义一个放echarts图表的盒子//定义一个盒子<template> <div class="chartCon" ref="barLineCon" style="margin-top: 0"> </div></template>2.在data里面进行echarts图表配置blCharts: null, blChartsOption: {

2021-06-02 10:30:21 847

原创 js自定义日期格式

js获取当天日期的方法translateDate(n) { var conversion = new Date(); conversion = Date.parse(new Date(conversion)) -n * 24 * 60 * 60 * 1000; conversion = new Date(conversion); var fullYear = conversion.getFullYear(); //获取完整的年份(4位,1970-???)

2021-05-19 17:37:02 710

原创 Echarts里面的formatter一些参数到底是什么？怎么查看？

我们在开发过程中，都是用到一些图表啊，可视化的一些问题，可视化的工具有很多，我个人用的是Echarts。在用Echarts过程中，里面给的实例很难正好满足需求，所以需要自定义在所难免。Echarts官网有API，有各种配置项说明，截个图看一下;这么多配置项，我该从什么地方找起?（这还是只截图一半）特别是对于新手来说，可能就不是查配置项，而是直接百度。因此，我选择写这篇文章。那些自定义formatter里面的参数到底是什么？1. 如何查看参数一般的都是在option里面配置的tooltip: {

2021-05-11 12:38:15 4849

原创如何处理前端打包后样式污染问题

如何处理前端打包后样式污染问题我们在进行前端开发的时候，会用到各种各样的UI库，比如vue的element-UI库，react的antd库，又比如说是Vant库，在使用这些库的时候，难免会自定义一些样式，又或者说是修改一些样式。在之前的文章中我也说了如何自定义或者修改UI库的样式：https://editor.youkuaiyun.com/md/?articleId=113928529。但是这样修改的话，打包过后会有样式污染。我们先来说一说css打包机制吧css打包机制是这样的1.通过npm run buil

2021-05-11 11:16:20 1637

转载 vue中使用Promise.all发送多个请求

这里写自定义目录标题vue中使用Promise.all发送多个请求vue中使用Promise.all发送多个请求1.创建两个promise,在promise中使用axios2.调用Promise.all([p1,p2]).then(res=>{}).catch(err=>{})方法代码如下：<script>import { httpUrl } from "../../http/http.js";export default { name: "Home", dat

2021-05-10 18:16:06 2640

原创有史以来最恶心的css坑（calc函数）

有史以来最恶心的css坑（calc函数）说道calc函数，大家都不陌生，但是他是真的坑，把我给恶心的哦，话不多说，先看个例子：这是我怕要做的效果，让最下面的小蓝色方块居中，我用的是定位p { width: 120px; height: 30px; text-align: center; font-size: 20px; border: 1px solid #3f75d4; background: #3f7

2021-03-09 14:53:24 714

原创清除或隐藏antd数字输入框InputNumber最右侧上下箭头

清除或隐藏antd数字输入框InputNumber最右侧上下箭头在antd里面有一个数字输入框 InputNumber ，在这个数字输入框中有一个上下箭头这个上下箭头可以调整输入框里的数字，默认是按照整数1增加或者递减。这个上下箭头在API中没有清除的参数。因此，当我们不想要这上下箭头的时候，我们就需要自己想办法了。这里有个问题就是，这InputNumber组件是antd封装好的，我们不知道这上下箭头在哪，没办法用定义className的方法清除或者隐藏。在这里呢，我想和大家分享一个办法：1.找

2021-02-22 09:35:12 8371

原创 react项目中的redux操作流程

react项目中的redux操作流程redux作为状态管理的工具，使我们每位前端必会的。redux不依赖于任何框架，不仅仅是react框架可以使用，在Vue，小程序这些都能用redux进行状态管理。在vue中已经内置了一个vuex，再用redux我觉得就没有必要了。在react框架里，有react-redux进行状态管理，但是也是依赖于redux的。因此，学习redux是必需的。使用redux可以管理状态，用于父子间的通信；也能够进行数据缓存，减少服务器压力，提高用户体验。下面我就用侧边栏的展开与合

2021-01-27 15:32:06 510

原创 react解决跨域问题

react解决跨域问题react解决跨域，在src文件夹下创建一个 setupProxy.js 文件，特别注意：在src文件夹下，不是和package.json同目录。然后将一下代码复制到新建的setupProxy.js文件里const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function (app) { app.use( '/ajax',

2021-01-22 10:59:49 352

全国各大省市区json文件

空空如也