- 博客(64)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 前端vue实现导出pdf文件报告组件
大屏项目有一个需求，需要对展示的内容进行文件导出，但是目前后台没有相关的逻辑，所以只能前端硬上，在参考了其他许多的逻辑之后，目前我自己这边做了一套比较笨的组件，通过拼接标签这种方法来实现对你想需要的地方进行文件导出，并且呈现出比较让人接受的样式，下面以一个实例来介绍。
2023-03-26 12:56:34
1764
1
原创 nginx部署之后已经配置代理但是接口报错403
部署其实也不难，修改对应的配置文件，然后重新启动nginx文件就好了，主要遇到的问题还是代理的问题。之前看别人的博客，讲解已经很清楚了。这个哥们儿跟我遇到的几乎一摸一样。这里在代理之后增加了一部分内容。
2022-10-10 15:02:05
1768
原创 知识点小记：echarts折线图负数展示不一样的颜色
其实也很简单，就是在设置线条颜色的时候，根据你自己的需要通过方法来配置你自己的颜色，而这个回调里面会有当前echart对象对应的相关内容。所以我们判断值的大小就可以通过params.value来确定。...
2022-08-15 15:00:13
2024
原创 封装一个Notification 通知组件
1 使用场景就像下图所示，采编中心进入得时候会有一组信息提示，现在我们需要得是有一个可以服用得组件或者公用方法来一次性将需要的信息展示出来，在这里采用了封装element组件Notification （通知）的方式。element原本样式：目前的效果：2 组件位置@FilePath: \newmediacloud\src\plugins\tips.js3 参数以及回调事件参数主要是配置项的参数传递，大部分是直接采用的element Notification自带的参数，多出的有：参
2021-11-30 17:53:19
1018
原创 vue动态更改项目顶部的title
theme: fancy需求就如同标题——现在我有一个项目有几个省份都在使用这个项目，所以，页面的title对于每一个用户来说名称应该是不一样的，每次有了新的业务用户的时候，之前都是全局去查找替代区域名称来一个一个更改，所以我就考虑采用一个项目的全局变量存储区域名称。我采用的方法是在整个vue实例的data里面绑定一个区域名称然后在要使用这个省份名称得的地方采用this.$root.provinceName就可以得到变量值，绑定在需要的位置调用即可。...
2021-09-17 14:48:43
535
原创 JS一些可能会经常用到的数据处理方法
DOM处理检查一个元素是否被聚焦const hasFocus = ele => (ele === document.activeElement);检查用户是否滚动到页面底部const isAtBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;获取一个元素的所有兄弟元素const sibling
2021-09-15 17:45:07
192
原创 关于vue项目断点位置会发生错位的问题
在webpack devtool的配置中可以看到下列描述:configureWebpackType: Object | Function如果这个值是一个对象，则会通过 webpack-merge 合并到最终的配置中。如果这个值是一个函数，则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西，也可以返回一个被克隆或合并过的配置版本。更多细节可查阅：配合 webpack > 简单的配置方式devtool: ‘source-map’其中一些值适用于开发环境，一些适用于生产环
2021-09-01 14:41:57
3052
原创 关于使用Sortable来实现表格的拖拽遇到的问题
引入npm install sortablejs --save按需引入import Sortable from ‘sortablejs’;方法一：1.首先是拖拽完成之后需要重新调用列表的接口2.el-table里面绑定一个key，在刷新数据的时候取反方法二：异步再次执行一次表格数据的赋值，推荐使用这种，看似呆板，但是易懂！！！注意：这里排序会调用一个接口，我们不要忽略了接口调用失败的数据处理，不然数据的顺序会改变与后台的数据不一致代码<template>
2021-07-27 17:53:19
3710
原创 关于vue的生命周执行顺序遇到的一些问题
1.vue的生命周期vue整体的生命周期：beforeCreate -> created -> beforeMount -> mounted -> beforeUpdate -> updated -> beforeDestory -> destoryed。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RjQTjUI8-1626229955957)(https://p3-juejin.byteimg.com/tos-cn-i-k3
2021-07-14 10:33:16
273
原创 关于微信小程序打包的体积过大问题以及解决办法
最近开发微信小程序遇到一个瓶颈问题，uniapp项目打包出来的微信小程序主包的体积刚好超过要求的2M，我第一时间想到的是删除代码，删除本地图片，删除没有用到的组件，但是作用微乎其微开启压缩之前的打包文件体积：看了一下打包出来的文件，一个uni项目vue文件对应的打包出来的wxml，js，css，json之中，光是js文件大小就远远超过原来的vue文件了，此时的打包逻辑是在vue原有的代码之上增加了许多打包需要的逻辑代码，而且原来的代码格式几乎没有改变，还有许多的空白行，似乎很占用体积找到解决方
2021-07-07 11:37:43
9638
3
原创 关于element树形组件懒加载相关的注意
1.注意绑定node-key属性2.绑定动态加载的时间，以及开启lazy属性3.绑定的加载方法，将目标数组返回出来一般会默认展开某一项的节点，可以在加载方法中获取到目标的id，存入到绑定的展开数组中附上部分代码<template> <el-tree :props="defaultProps" :load="loadNode"
2021-06-10 13:25:57
259
原创 关于hbuilderx初次编译uniapp项目的微信小程序所遇到的问题
相关插件的安装预编译器错误：代码使用了less语言，但未安装相应的编译器插件，请前往插件市场安装该插件: 11:37:08.670https://ext.dcloud.net.cn/plugin?name=compile-less atwxcomponents\components\gaoyia-parse\parse.vue:1进入插件市场，导入插件到hbuilderx点击确定进行安装再跑一次微信小程序项目显示端口关闭：进入微信开发者工具进行设置；开启服务端口再次编译一次：
2021-05-23 11:44:17
4309
2
原创 关于微信小程序得提示信息组件在ios无法全部展示得问题
微信小程序官方提供了提示信息得apiwx.showToast({ title: '成功', icon: 'success', duration: 2000})但是有一个问题：安卓在超过两行的时候会正常显示提示文字，微信开发者工具显示也是正常的，但是真机调试iPhone手机不会完全显示超出的文字，这个问题目前已经存在许久了，微信之前的限制也是只有15个文字以内。如图，后面的三个字在苹果是展示不出来的(另外uniapp的toast组件也是无法全部展示的)。解决方法：目前这种问题是微信的
2021-05-14 17:02:22
2127
原创 flex布局
<ul> <li>省政府</li> <li>省政府</li> <li>省政府</li> <li>省政府</li> <li>省政府</li> <li>省政府</li> <li>省政府</li> <...
2021-04-07 14:33:12
86
原创 js各种数据类型之间的转换
数组与字符串之间的转换1.如果是以符号隔开的某个字符串转化为数组的需求，可以采用split,用法类似于倒过来的join方法ps：之前遇到了一个要把英文单词每一个隔开作为数组的需求,采用split也可以使用到...
2021-03-29 16:12:14
154
原创 关于使用map，for等遍历数组获取其中每一项的值在调用接口只取到最后一个值的问题
接上一篇文章；这里循环一个数组list，拿到其中的某些值，去做参数执行下一步的方法，需要这个参数(params)是变化的 getRights(list) { const paramsKey = this.mediaForRights[this.type].keys.value; if (list && list.length) { list.map((item, index) => {
2021-03-12 09:47:41
1492
原创 数据的双向绑定失败
如标题所述，这里有一个需求是获取到表格数据之后，要通过接口调用每一行表格数据的权限问题，所以我给相关的按钮绑定了v-if的条件，但是当满足条件的时候，相关满足权限的按钮并没有展示出来：account.delete表示从接口获得的删除权限采用v-if或者disabled来显示用户的权限操作<template> <div> <table-list v-if="ceshi" :selected.sync="opaList" :table-data="
2021-03-11 10:25:48
333
2
原创 element表格勾选获取序号
element表格勾选获取序号如图，这里有一个需求是勾选某一项为其进行排序，首先需要将原来的序号回显，所以在element的勾选表格的操作中需要获得index值？
2021-03-04 15:27:33
1548
1
原创 vue在已有传参的基础上加上一个参数
js在已有传参的基础上加上一个参数1.需求：抽离了一个公用的组件需要回调一个布尔值<template> <div> <el-switch v-model="valueBoolen" @change="changeStatus($event, valueBoolen)" > </el-switch> </div></temp
2021-03-03 15:25:35
1729
1
原创 放弃提交到远程发现最近一个已经提交的内容（commit）
git log查看提交的历史相关参数：-p按补丁格式显示每个提交引入的差异。–stat显示每次提交的文件修改统计信息。–shortstat只显示 --stat 中最后的行数修改添加移除统计。–name-only仅在提交信息后显示已修改的文件清单。–name-status显示新增、修改、删除的文件清单。–abbrev-commit仅显示 SHA-1 校验和所有 40 个字符中的前几个字符。–relative-date使用较短的相对时间而不是完整格式显示日期（比如“2 weeks
2021-02-26 18:26:30
239
原创 文件上传原生js插件说明文档
文件上传原生js插件1 使用方法（案例均在vue环境之下）1.1 引入插件初始化1.1.1 引入文件import upload from '@/plugins/upLoad/index';1.1.2 初始化实例 mounted() { const opt = { autoUpload: true,//是否自动上传 id: 'selecter',//绑定的dom元素ID onSuccess: this.onSu
2021-02-22 15:41:47
434
1
原创 this.$router.push传参
this.$router.push({name:'/xx/xx',query: {id:'1'}});this.$router.push({name:'/xx/xx',params: {id:'1'}});this.$router.push({path:'/xx/xx',query: {id:'1'}});this.$router.push({path:'/xx/xx',params: ...
2020-12-23 11:15:00
157
原创 在原生前端html项目使用less（less自动转化为css文件）
方法1.使用webstorm自带的less转css设置(1)打开项目进去webstorm的设置(2)进入File Watcher设置 ==> 点击新增选择less点击确定(3)这个时候在项目的css文件夹创建less文件，保存的时候会自动转化一个新的独立的同名css文件，html文件调用直接使用css后缀文件(4)样式生效方法2.考拉应用(http...
2020-12-04 15:39:00
1268
原创 echarts柱状图接口提供的数据是数值，要在顶部展示百分比
查阅echarts配置文档，柱状图并没有类似于饼图的直接展示百分比的参数，所以需要自己配置。window.onload = function () { var list1=[25.02,19.76, 14.71, 14.11, 14.65]; var list2= [69.04,71.66,76.76,75.78,73.51]; var option = { color:['#4e8df6','#d3e8f9','#feb870','#E87C25','#277
2020-11-27 17:08:15
1218
原创 Git无法检测到文件名大小写的更改，并且git config core.ignorecase的状态还是false
这个问题很神奇，本地仓库我已经将vue文件全部更改成为了大写驼峰，但是git远端仓库里面一直都是小写，git status也是显示没有变更操作；将本地项目删除，重新克隆项目，新的项目仍然是小写，目前还没有解决这个问题(2020-11-09)...
2020-11-09 11:17:00
1303
原创 VScode如何新建vue文件的时候快速生成骨架
进入文件、首选项、用户片段输入框输入vue，选择vue.json直接粘贴下行代码{ "Print to console": { "prefix": "vue", "body": [ "<template>", " <div>\n", " ...
2020-11-02 15:20:00
1542
4
原创 表单输入验证的时候同意可以不用输入内容，不同意必须填写原因
el-form(ref="form" :model="form" :rules="rules" class="demo-ruleForm" v-if="operObj.type === 2") el-form-item el-radio-group(v-model="radio") el-radio...
2020-10-21 09:51:00
170
原创 vue安装element
1.npm i element-ui -S2.在项目main.js引入element相关的文件importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'Vue.use(ElementUI)
2020-10-20 18:14:00
75
原创 如何垂直居中一个浮动元素？
// 方法一：已知元素的高宽#div1{background-color:#6699FF;width:200px;height:200px;position: absolute;//父元素需要相对定位top: 50%;left: 50%;margin-top:-100px ;//二分之一的 height，widthmargin-left: -100px;}//方法二...
2020-10-20 13:56:00
165
原创 微信小程序vant-search获取不到输入的搜索内容踩坑
照常回归的数据双向绑定给搜索输入框绑定一个动态的“value”变量，来获取作为参数向后发出请求，但是在这里，debugger之后显示的是value没有获取到输入的内容：template里面的代码：<view class="ser-box" :style="style"> <van-search v-model="value" :focus=...
2020-10-14 14:09:00
2814
1
原创 关于微信小程序无法使用css3过度属性transition以及微信小程序如何利用api进行画面过度的展示...
首先是css在html文件里面的浏览器支持情况：微信小程序不支持css3官方实例wxml：<view animation="{{animationData}}" style="background:red;height:100rpx;width:100rpx"></view>js：Page({ data: { animationData...
2020-09-29 13:38:00
3010
原创 微信小程序报错 Invalid attempt to destructure non-iterable instance.
根据这句话“In order to be iterable, non-array objects must have a [Symbol.iterator]() method.”应该是结构出问题了，检查一下代码发现，在v-if判断的时候，判断value.PICS的长度是否等于3，忽略掉了这个参数是否存在，所以在value.PICS.length==3之前先判断这个变量是否存在。...
2020-09-27 16:52:00
4038
原创 记录微信小程序开发的一个坑：使用textarea组件的时候，外层滚动会发生文字错位（穿透悬浮）...
问题图例：如图所示，本来应该是位于内容描述的输入内容会在页面滚动的时候固定为相对位置不随着父级元素滚动，甚至其的优先级已经超过了后台调试器，遮盖住调试器查询了很多地方最后应该是一个bug解决办法：采用一个元素在不进行输入的情况之下替代textarea的展示，两者的显示是互斥的；在点击div的时候展示textarea并且聚焦输入框，输入完收起输入框以及失焦的时候在展示为div。...
2020-09-22 17:06:00
547
原创 echarts地图根据接口数据的值显示每一块区域代表的不同颜色绘制销量热度等级地图...
预计项目的初步效果图接口提供的数据类型：在这里根据value值的不同，显示不同的颜色，分别代表不同的等级划分在绘图之前引入echarts的js文件，里面的市州名字需要与接口的数据相对应 <script type="text/javascript" src="js/echarts.js"> </script>var mapData = {};......
2020-09-17 15:51:00
47042
2
原创 对象新增键值对
this.$set(lineSeriesData[i], 'style', "line")没有引入jq的话可以：temp['type'] = 'line';
2020-09-16 11:22:00
264
原创 超出隐藏
//单行溢出省略.f-otw{overflow:hidden; text-overflow:ellipsis;white-space:nowrap;}//想要多行显示f-otw{overflow: hidden;text-overflow: ellipsis;display:-webkit-box; //作为弹性伸缩盒子模型显示。-webkit-box-orient:v...
2020-09-10 14:43:00
61
原创 js将数组拆分为两个一组的二维数组
var arr= [];for(var i=0;i<data.length;i+=2){ arr.push(data.slice(i,i+2));}
2020-09-10 11:15:00
4393
原创 正则表达式剔除标签
this.resultData.title= this.resultData.title.replace(/(<([^>]+)>)/ig,"").replace(/[\r\n]/g,"");
2020-09-09 16:15:00
434
原创 关于微信小程序scroll-view动态绑定了scroll-top值，滑动会发生抖动的案例
<scroll-view scroll-y :scroll-top="scrollTop" style="height: 100%" enable-back-to-top="true" scroll-with-animation ...
2020-09-09 11:43:00
1510
4
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人