- 博客(47)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 关于element-plus中el-select自定义标签及样式的问题
element-plus， el-select，自定义标签，动态更改颜色样式，更该样式
2024-06-14 10:39:01
1244
1
原创 px转rem插件postcss-plugin-px2rem使用方法（浏览器缩放页面自适应）
浏览器缩放自适应，px转rem，postcss-plugin-px2rem插件
2024-06-13 09:45:33
1372
1
原创 vue3+element plus，使用分页total修改成中文
使用element plus的的时候，total属性显示是英文这是我建的一个新项目，总数显示的Total 1000我们的需求是显示中文，共 1000 条这个就很尴尬，组件封装的东西，查了所有api都没有写怎么改官网上面有个（官网直通车）其实按照官网上写的配置，其实并不好使。那我们应该怎么办呢？一般的是不是都会去看看控制台里面有啥？细心的人会发现，这个好像就是我们引入的组件吧将这个展开，有个el对象，el对象里面会有pagination，里面的goto，total好像在哪里见过。
2023-06-07 19:10:30
3669
3
原创 el-dropdown绑定click点击事件不生效和样式修改
el-dropdown绑定click点击事件不生效和样式修改我们在开发项目的时候会用到el-dropdown，这个功能一般都会在用户上进行使用比如：修改密码，退出的情况下绑定点击事件组件直接绑定点击事件是不生效的，需要通过 @click.native=‘logout’ 这种方式来进行绑定点击事件。修改样式先看图：这个组件的DOM不在#app里面，和#app是同级关系。如果我们要修改组件样式的话，我们就不能再style上加scoped，必须全局修改，这样就会出现一个情况：我们在其他地方使
2022-04-08 16:02:43
2675
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
1109
原创 解决150%分辨率下拉框错位和echarts鼠标移入焦点错位的问题
解决150%分辨率下拉框错位和echarts鼠标移入焦点错位的问题当我们在前端开发的过程中，可能会被要求适配主流分辨率。当我们把电脑分辨率调成150%的时候，一些下拉框会发生错位现象，echarts图标同样也是会出现这个问题，鼠标移入后，出现焦点错位的现象。虽然对功能没有任何影响，但是，用户体验真的是极差。在我开发的过程，有幸这两种情况都遇到了，因此，我在这里分享一下我的解决方案。下拉框错位我们先上图：这是我们需要的效果，在100%的屏幕下的效果这是150%屏幕下的效果我们想要在150%的
2022-03-04 14:23:51
2867
1
原创 el-select中DOM不在body中的情况
el-select中DOM不在body中的情况我们在使用 el-select 组件的时候，经常性的需要改变组件默认样式。但是出现一个问题，就是我们无论怎么修改，在页面上都不显示。当我们打开控制台后，细心的人就会发现，我们需要修改的dom元素并不在body里面，这样的话，我们应该怎么进行修改呢？第一种方法（有缺陷）我们可以全局修改，在页面上<style></style> //不加scoped这样的话就是全局修改，且需要加 !important， 但是如果用到了相同的组
2022-03-02 16:45:14
622
原创 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
5635
6
原创 文本流数据转文件（word，excel，zip 等）
文本流数据转文件（word，excel，zip 等）写在前面我们在开发项目的时候，不难遇到一些导出的功能。比如说：导出excel表格等等。我在开发中就遇到了这么一个功能，将一些表格数据导出成一个excel表格，那么，这个应该怎么做呢？写这篇博客一来是为了加强自己的记忆，毕竟好记性不如烂笔头嘛，嘿嘿。。。第二个方面呢，希望能和大家一起分享这个功能，希望能帮助到那些没有接触过这个功能的小伙伴。话不多说，上菜咯功能点击导出全部数据，下载列表中的内容- 后台接口返回的内容..
2022-03-01 11:15:33
2312
原创 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
583
原创 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
4713
1
原创 uniapp carema组件图片上传需要先转为base64格式的问题
这段时间在做微信小程序ocr发票识别的功能，用到了uniapp里面的carema拍照的组件，在图片上传的时候遇到了一些坑。下面我来说一说：1. carema组件拍照之后会返回一个http的图片地址图片地址是这样的，只有一个http协议，没有域名，没有端口号，很显然，这个是只有本地才能识别的一个图片地址，当把这个地址放到浏览器上，你就会发现是这样的直接无法访问2. 如何将carema组件生成的图片让浏览器能够识别呢？这个我们就需要把图片转换为base64格式方法如下：transformBa
2021-09-03 14:37:38
353
原创 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
159
原创 解决相对路径图片不显示问题
解决相对路径图片不显示问题我们在用vue或者react中进行开发时，有时候会出现我们写 相对路径 时，图片不会在页面上显示 的问题data(){ return { imgSrc:"../../../static/banner1.png" }} // 在template里面<img :src='imgSrc' />这种情况，有时候在页面上，可能图片不会显示。我们又两种解决方法：1.直接写上域名；比如：http://www.baidu.com/xxx这种方法简单粗暴，但是
2021-07-26 14:36:36
3106
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
861
原创 el-table 获取当前索引值，并展示在表格上
el-table 获取当前索引值，并展示在表格上当我们在用el-table开发的时候，经常遇到后台返回值中没有序号，但是产品设计的原型图中需要序号。原型图后台数据我们就那个着急啊。于是乎：我们找后台大哥商量可谁知后台大哥给我的回复没办法，干不过，惹不起，只能找产品小姐姐产品小姐姐：于是我哭唧唧的跑了出去怎么办呢？辞职不干了？还有车贷、房贷、孩子奶粉钱。于是乎，自己动手，丰衣足食。<el-table-column label="序号" align="center"
2021-07-22 10:53:53
2664
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
147
原创 多个数组对象进行拼接
多个数组对象进行拼接这个多个数组对象进行拼接，是我在做echarts图表中遇到的问题，echarts图表需要通过循环遍历来进行开发的。但是后台也就只给了一些数据，echarts的一些配置，比如：Y轴单位等等都没有，所以没办法，只有自己配置。我写了一个数组对象，想把我的数组对象拼接到后台返回的数据中。这是后台返回的数据（tableData4）这是我写的数组对象（legendList）这是我需要的最终结果 (riskData)实现代码,我们使用的是map方法进行处理this.riskDat
2021-06-02 10:51:30
1027
原创 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
778
原创 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
661
原创 Echarts里面的formatter一些参数到底是什么？怎么查看？
我们在开发过程中，都是用到一些图表啊，可视化的一些问题，可视化的工具有很多，我个人用的是Echarts。在用Echarts过程中，里面给的实例很难正好满足需求，所以需要自定义在所难免。Echarts官网有API，有各种配置项说明，截个图看一下;这么多配置项，我该从什么地方找起?（这还是只截图一半）特别是对于新手来说，可能就不是查配置项，而是直接百度。因此，我选择写这篇文章。那些自定义formatter里面的参数到底是什么？1. 如何查看参数一般的都是在option里面配置的tooltip: {
2021-05-11 12:38:15
4609
原创 如何处理前端打包后样式污染问题
如何处理前端打包后样式污染问题我们在进行前端开发的时候，会用到各种各样的UI库，比如vue的element-UI库，react的antd库，又比如说是Vant库，在使用这些库的时候，难免会自定义一些样式，又或者说是修改一些样式。在之前的文章中我也说了如何自定义或者修改UI库的样式：https://editor.csdn.net/md/?articleId=113928529。但是这样修改的话，打包过后会有样式污染。我们先来说一说css打包机制吧css打包机制是这样的1.通过npm run buil
2021-05-11 11:16:20
1516
转载 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
2252
原创 有史以来最恶心的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
664
原创 清除或隐藏antd数字输入框InputNumber最右侧上下箭头
清除或隐藏antd数字输入框InputNumber最右侧上下箭头在antd里面有一个数字输入框 InputNumber ，在这个数字输入框中有一个上下箭头这个上下箭头可以调整输入框里的数字，默认是按照整数1增加或者递减。这个上下箭头在API中没有清除的参数。因此，当我们不想要这上下箭头的时候，我们就需要自己想办法了。这里有个问题就是，这InputNumber组件是antd封装好的，我们不知道这上下箭头在哪，没办法用定义className的方法清除或者隐藏。在这里呢，我想和大家分享一个办法：1.找
2021-02-22 09:35:12
7658
原创 react项目中的redux操作流程
react项目中的redux操作流程redux作为状态管理的工具，使我们每位前端必会的。redux不依赖于任何框架，不仅仅是react框架可以使用，在Vue，小程序这些都能用redux进行状态管理。在vue中已经内置了一个vuex，再用redux我觉得就没有必要了。在react框架里，有react-redux进行状态管理，但是也是依赖于redux的。因此，学习redux是必需的。使用redux可以管理状态，用于父子间的通信；也能够进行数据缓存，减少服务器压力，提高用户体验。下面我就用侧边栏的展开与合
2021-01-27 15:32:06
468
原创 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
282
原创 react项目中无法使用解构赋值的解决办法
react项目中无法使用解构赋值的解决办法最近在写react的项目，用的是create react app创建的项目，然后在项目中无法使用解构赋值，只要使用解构赋值就报错。然后找到原因：是babel配置的原因试了很多方法，在babel官网找到了原因，其实只要配置一下babel就行解决办法1在项目的根目录下，也就是跟package.json同级目录下，新增配置一个babel.config.json文件{ "presets": [ [ "@babel/
2021-01-22 10:20:58
997
原创 vue组件通信（一）--父传子--详解
vue组件通信–父传子–详解vue组件之间的通信，我相信大家都不陌生，只要是用过vue的前端都知道有几种方式：1.父传子：子组件用props接收2.子传父：用的$emit方法3.非父子间：可以用bus（中央事件总线），vuex（状态管理）今天我就和大家一起讨论一下组件之间父传子通信的详细步骤：第一步：在父组件中引入子组件，并注册子组件import showCharts from './charts/showCharts.vue';export default { components: {
2020-12-31 16:44:45
479
原创 vue的生命周期created和mounted的区别
vue的生命周期created和mounted的区别created和mounted这两个生命周期都是自动调用methods里面的方法，只要把methods里面的方法放到created和mounted里面就行。区别：1.created在模板渲染html前调用，通常就做一些数据的初始化2.mounted是在模板渲染html后调用，只要在方法里做了一些渲染页面的操作，都是在mounted里面执行。...
2020-12-31 16:20:39
807
原创 Sort()排序方法
Sort()排序方法1.在W3C里面的例子是这样的：这种是按照字母顺序进行排序的2.但是对于数字的排序，如果还是按照这种方法的话，比如说100和40，因为‘4’比‘1’大，所以40会排在100前面，如果是40，100，2000的话，这排序的顺序就变成了‘40，2000，100’，这样的话排序就是错的W3C给出的实例是这样的：这是降序排列：这是升序排列：这些仅限于这中简单的数组进行排序3.这个方法是对数组对象进行排序：数据格式：var iqyCompareData =[ {
2020-12-29 18:21:20
954
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人