- 博客(63)
- 收藏
- 关注
RSS订阅
原创 https iframe嵌套http页面
今天遇到了新的需求，我们公司协议为https的，要显示一个http的页面（必须显示这个页面），我刚开始没有关注到这个问题。就一个iframe这不是很简单吗。嵌套进去不就行了。问题从这里才真正开始本地完美运行，搞定了。打包上到测试环境。嘣，空白页面。脑子一片空白难道是需要动态设置宽高，设置之后没用。百度吧，查找解决办法。看到这样一个信息page - iframe - statush...
2019-10-18 10:29:43
30600
8
原创 vue3+echarts绘制横向柱形进度图
样式入上图，这个真是费劲啊（可能由于本人较菜），图片已经转成svg，如果有本地的图片可按照注释方式去引入option = { // backgroundColor: 'transparent', grid: { left: '0%', top: '0%', right: '85', bottom: '0%', containLabel: true }, xAxis: [ { show: false } ], yA.
2021-12-10 17:30:00
11989
原创 vue+echarts封装组件
本人可能写的 不好，如有缺点希望指出，一起进步，所有组件类似写法。/** 圆环图形 */<template> <div class="annulusContainer" ref="annulusContainer" :optionsData="optionsData" :grid="grid" ></div></template><script>import { defineComponent
2021-12-10 17:30:00
900
原创 vue3+echarts 绘制扇形进度图
实现样式为：是不是还可以。反正我自己认为so beautiful（沾沾自喜）这个实现起来就有点费劲了。代码option = { series: [ { name: 'Indicator', type: 'gauge', startAngle: 200,//扇形开始的角度 endAngle: -20,//扇形结束的角度 detail: { formatter: '{a|{value}}{b|%}',
2021-12-09 17:30:00
1092
原创 vue3+echarts 绘制3d圆柱形图
今天得到了这样一个需求，用echarts绘制一个圆柱形图，如下图经过度娘指导发现了一遍类似博客剩下的就不难了，按照这个思路去修改实现就可以了，废话少说上代码option = { grid: { left: '0', top: '15', right: '0', bottom: '10', containLabel: true }, animation: false, xAxis: { data: ['服务数', '运行Pod数', '运
2021-12-08 16:25:33
5305
3
原创 antd vue table中使用select时候修改第一条，更新后原位置值变成了刚才选中的值
antd vue table 中使用了customRender,修改第一个值为3之后，更新也页面，这条数据去了最后一条，但是轮播图2的排序值也变成了3，我查了一下数据确实是2，到底是什么原因导致了轮播图2的排序值变成了3而不是2呢，vue不是已经解决了这个问题么，为什么还是导致了这个情况的出现？答案：这里边vue根据key值对比数据是否变化更新试图，当你的select没有key的时候，他使用的是这个数据的key值，当你修改之后，他对比发现key值并没有发生变化，所以他不会去更新试图，知道了问题出现的位置
2021-11-04 17:19:11
747
原创 vue3+router4 keepalive缓存页面
需求在列表页面上点击查看详情，跳转到一个新的页面，然后返回的时候想返回到跳转时候的页面。实现思路1.vuex中存在一个保存需要缓存的页面name值，当页面跳转j进来的时候执行beforeRouteEnter中往vuex中存储这个值，当页面离开的时候也就是beforeRouteLeave中判断你进入的页面是不是详情页，如果是则保留vuex中的值，如果不是则清空值。2.还存在一种情况就是，我从列表页跳到了详情页，此时vuex中存在了这个值，但是我从详情页去另一个页面而没有回到列表页，这个时候我们就需要去
2021-08-20 17:28:55
1728
原创 vue3 keepalive 不生效问题
vue3+router4写法跟vue2的keep有所不同，vue2我就不说了，百度搜索一搜一大堆，<router-view v-slot="{ Component }"> <keep-alive> <component :is="Component" /> </keep-alive></router-view>如果这样写还是没有生效你就需要看一下，你的代码是不是这样的结构了（多层router-view嵌套），如果多层嵌套这
2021-08-20 17:05:55
6663
12
原创 antd vue Menu 缩放成三个点问题
先说一下，我也没有结局，不知道哪里的机制会触发这个。当我使用v-if就会出现这个问题，然后我尝试了v-show可以结局这个问题，但是v-show=false的时候并不是隐藏，建议自己使用Dropdown组件替代一下。antd vue Version2.2.8...
2021-08-20 16:00:34
1790
2
原创 vue3+qiankun框架初体验
项目框架基座和子项目都为vue3qiankun官网首先我们需要了解什么是微前端，他是做什么的。1.什么是微前端微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。简单来说就是就是可以把多个不同框架的项目部署在不同环境，但又可以在一个项目中访问。2.他是做什么的他可以将不同框架的多个项目组成统一项目，而组成项目的子项目又可以单独部署单独访问。可以说他们的关系是互相关联而又互不关联。说明：由于项目还并没有进行上线测试，此代码还不能保证上线没有问题，如有问题
2021-08-04 15:13:44
3025
5
原创 vue3+antd table加一列自增序号（前端实现）
首先我们这篇文章是基于我上边一篇文章增加的新的支持。传送车。当然如果你没有做成组件，直接使用下边也是可以的。需求（表单数据增加一列自增排序的序号列）实现方法：应用api 传送车const columns = [//首先我们需要添加这个支持 num为你自己定义的slot名称，可以定义成任意名称，如果不需要自增序号，需要把这个去掉即可 { title: "序号", slots: { customRender: "num" }, },
2021-05-26 09:39:14
5119
转载 vue3+echarts 多点发射
本文章借鉴改文章，传送车。本文章只为了记录。勿喷，感谢。文章成功展示首先我们需要引入echarts，现在echarts应该已经到5了，我们开发的时候建议看v5的版本npm install echarts --save 或者cnpm install echarts --save现在echarts不给提供地图了，所以需要我们自己去寻找地图json。穿梭车里边包含2个json，一个是去掉了南海诸岛，一个是保留的，加上上边的代码可以完整实现。（但是如果你想去掉南海诸岛，还需要在代码中加入）穿梭车r
2021-05-24 15:26:23
673
1
原创 vue3+echarts地图自定义图片
最近搞echarts搞的要起飞了。上边文章已经说了基本地图的功能实现，下边开始自定义图片,样式如下我们需要对已经存在的资源池进行地区的显示。百度了之后发现代码都没实现成功，应该是我的写法，或者我没抄对吧。还是看看文档自己思考吧。官网介绍传送门完整代码需要给myMap增加固定的高和宽<div id="myMap" ref="myMap" class="border"></div><script>import { defineComponent, r
2021-05-20 10:09:06
1310
原创 vue3.0+echarts去掉地图鼠标移出地图变色问题
问题复现由于有的不需要这部分内容。解决办法js绘制之后添加方法去掉这个事件。//鼠标移入地图不变黄色 chart.value.on("mouseover", function() { chart.value.dispatchAction({ type: "downplay", }); });如果代码不理解可以查看本博客传送车,页面拖到最底下。...
2021-05-19 14:41:02
1159
原创 vue3+echarts绘制中国地图
最近接到一个需求是做一个中国地图 样式大概是这样的这里我们能看到明显的去除了南海群岛。百度查阅相关资料都是说要这样，这个方法的大概意思就是：在地图中对特定的区域配置样式。穿梭车regions: [ { name: "南海诸岛", value: 0, itemStyle: { normal: { opacity: 0, l
2021-05-19 14:33:55
6388
5
原创 elementUI table组件
<template> <div class="w-data-table" v-loading="tableLoading"> <div class="dt-search" v-if="$slots.search"> <el-form ref="searchform" size="mini" class="dt-search-form-inline" :inline="true"
2021-05-12 14:31:00
727
原创 antd + vue3实现tree树增加按钮
页面显示写在前面改代码使用slot，接口返回值必须为title，key，children，不能使用API这个会导致我们按钮的slot冲突完整代码<template> <div class="department"> <a-card title="部门管理" :bordered="false"> <div> <a-row class="departmentTitle"> <
2021-05-12 14:06:17
4386
1
原创 vue3+swiper实现层叠式轮播
样式代码<div class="service-case"><swiper :autoplay="swiper_option1.autoplay" :loop="swiper_option1.loop" :speed="swiper_option1.speed" :slidesPerView="swiper_option1.slidesPerView" :loopedSlides="swiper_opt
2021-05-06 13:45:10
3343
5
原创 vue3+antd的table小组件
antdtable组件支持增加搜索栏配置。增加按钮等操作。闲话少叙，上代码<!-- 更多与收起详见用户管理页面 --><template> <div class="c-data-table"> <a-spin :spinning="spinning"> <a-card :title="title" :bordered="false"> <div class="dt-search" v-if="$s
2021-05-06 10:56:58
1672
原创 vue3+antd cannot convert object to primitive value
vue3+antd cannot convert object to primitive value最近用vue3+ antd写了一个新项目，遇到了这样一个问题大家引以为戒最近用vue3+ antd写了一个新项目，遇到了这样一个问题问题描述：我写了一个table组件，然后父组件引用的时候需要用到一些其他的比如弹框啊，tree树啊，但是页面第一次进入都不报错。每次刷新的时候就会出现这个错误这个错误我百度查了很久，告诉我类型错误，但是我没找到我哪里用到过的类型是有问题的。找了好久还是找不到问题出现的点，
2021-05-06 10:42:48
7114
7
原创 2021年面试题总结
金3银4，金9银10。每年的这几个月可以成为多数程序员的跳槽季，今年的面试刚刚开始，本人抽出了2天时间去参加了几场面试，可以说收获颇丰。其实面试既是跳槽找工作的一种手段，也是我们可以了解其他公司对于前端发展方向的一个指引吧，本人比较菜，所以并不能提供一些牛逼大厂的面试。 由于我基本没怎么出来面试，这次面试发现很多公司都有做大屏显示的产品线。需要多学习，学习了。面试题分享VUE1）vue指令以及如何自定义指令vue中如何自定义指令directive2）
2021-03-06 11:39:43
541
原创 常用JavaScript小技巧
本文章是从微信上看到的一篇文章，以后可能会用到。若有侵犯，请通知我，感谢大佬1.随机生成布尔值Math.random()会返回0到1之前随机的数字，因此可以利用是否大于0.5来判断const randomBoolean = () => Math.random() >= 0.5;2.反转字符串const reverse = str =>str.split('').reverse().join(''
2021-02-26 14:48:28
174
原创 echarts 和 vue-echarts 采坑之路
今天做app需要用到图表数据，在Echarts和Hcharts中，选择了Echarts，毕竟Hcharts是仿Echarts。以前用的Echarts是在H5中用的，这次是vue中使用。网上看了一下看到了vue-echarts，看了一下git的文档。vue-echarts 安装-使用1.安装1)官方推荐安装方式为（我采用的）npm install echarts vue-echarts2)直接文件引入依次引入 echarts 和 vue-echarts：<script src="http
2020-12-23 20:53:49
3333
原创 Vant IndexBar实现
我们要展示的内容如图：后端提供的数据为然后我们来看indexBar组件显示需要用到什么样的数据格式，这个是官网给出的样式。我们根据这个样式得出结论，任何情况下IndexAnchor一个，而IndexBar可能为多个。我们需要将数据转换成这种格式。我实现的效果代码放这里；//html<van-index-bar :index-list="indexList"> <!-- 遍历值去拿到index-cnachor --> <temp
2020-12-07 17:37:48
1560
原创 身份证校验规则方法，绝对好用，亲自尝试，赶快收藏吧，方便你我他
checkIdNo(idCard) { /*省,直辖市代码表*/ var provinceAndCitys = { 11: '北京', 12: '天津', 13: '河北', 14: '山西', 15: '内蒙古', 21: '辽宁', 22: '吉林', 23: '黑龙江', 31: '上海', 32: '江苏', 33: '浙江', 34: '安
2020-11-12 10:39:20
764
1
原创 element便利校验，this.$set用法，banner图切换位置
需求原型：主要涉及的问题：1.列表便利校验2.换位的this.$set函数；话不多说上代码，方便你我他//主要代码<el-form :model="formdata" ref="form" size="small" label-width="120px"> <div v-for="(banner, i) in formdata.BannerList" :key="i"> <el-col :span="6"> &l
2020-09-16 14:42:54
612
原创 elementUi el-table添加，修改页面不刷新。this.$set简单用法
项目场景：elementUI描述：点击+在对应的下一行增加一个空行，点击-删除当前行。看起来so eazy，实际情况相反，也可能是我的技术能力有限。主要遇到了2个问题问题描述：1.删除很简单实现了，增加的时候出现添加的数据更新，但是页面不更新的情况；2.增加的时候增加的数据总是重复我点加号的下一行数据。3.关于el-table不更新有的帖子说增加：key，实际没有作用，下边我将有问题的和解决后的代码提供给大家原因分析：1.页面不更新，el-table绑定的是数组，数组直接赋值不能被 Obj
2020-08-28 20:27:02
8255
原创 elementUI tree树和loadNode和dialog
dialog 和 tree树的一个功能小组件我们先来看一下样式这里我们对dialog进行一个封装 ，tree树也进行了封装。我们这次采用的懒加载方式。tree树遇到的最大的问题loadNode只加载一次。所以我们点击查询的时候想重置操作我查了下文档没有怎么样重置loadNode的方法，然后经过大佬解答我们需要用node.loaded = false; node.expand();重置这层树。下边为了方便将代码送给大家对dealog的封装<template> <el-di
2020-08-20 16:16:21
1837
原创 cropperjs裁剪固定尺寸图片-----已实践
最近项目又用到了cropper，但是这次需求跟之前不同的是，这次的需求裁剪出来的图片要是固定尺寸的图片，而不是长宽比尺寸的图。于是在网上搜索了半天，发现貌似没有方法，只好去看文档https://github.com/fengyuanchen/cropperjs了。在文档中看到了希望。var canvas = cropper.getCroppedCanvas({ width:236,//输出画布的目标宽度 height:146,//输出画布的目标高度。
2020-07-23 09:18:58
4844
1
原创 Angular+Bootstrap神奇小弹窗功能
好久没写博客了，可能是我懒了，emmm。。。前几天接到了一个新的需求，其中有一个弹窗挺有意思的，来这里跟大家分享一下。如果Vue的话可能直接很多框架中都是写好的，我们的框架呢是一个比较老的Angular2.几的+Bootstrap的框架。说实话呢。我对这个了解也不是特别深。闲话少叙，来看看这个有意思的小弹框功能。需求是这样的我们主要关注这个详情，需求是这样的意思：1）当文本框中的文字超过3个时候，显示*…详情*，这个详情可能在这个页面多次出现，2）当点击详情时候弹出框提示除了这3个地方之外区域名
2020-07-17 14:14:13
719
原创 从xhr到axios源码分析（四）
最近有点忙，所以很久没有更新了。今天我们来说axios的源码，既然说到源码，首先我们得先去下载一份源码.我们先看目录/dist/ --------------------------------- 项目输出目录/lib/ -----------------------------------项目源码目录/adapters/ -------------------------定义请求配置器（xhr，http）https.js ---------------------------实现http
2020-05-25 15:05:04
685
原创 从xhr到axios源码分析（三）
axios的拦截器1.请求拦截器和响应拦截器<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <m...
2020-04-13 12:45:49
210
原创 从xhr到axios源码分析（二）
1.axios的理解与使用 在我们日常的开发中大家都应该或多或少的涉及到用axios发送请求，尤其是vue框架，原因是vue主推发送请求用axios做交互。1.axios的特点： (1)基于promise的ajax请求库 (2)浏览器端/node端都能使...
2020-04-08 13:47:07
141
原创 从xhr到axios源码分析（一）
1.区分ajax与一般http请求首先我们需要先看一下xhr,当你进入页面第一句话使用 XMLHttpRequest（XHR）对象可以与服务器交互。您可以从URL获取数据，而无需让整个的页面刷新。这允许网页在不影响用户的操作的情况下更新页面的局部内容。 使用过axios我们都知道我们在请求之后看到页面并不像我们自己点击刷新的那种情况。他会自动更新需...
2020-04-07 15:25:11
343
原创 原生js中的一些常用方法
最近一直是在家办公，感觉自己要懒死了。再不整点东西，学点东西，自己又要被很多人超越了。如果有人有很好的学习方法望分享。js深度克隆方法//origin 原数据 target目标数据//第一种function deepClone(origin){ var str,target= origin instanceof Array? [] : {}; if(typeof orig...
2020-03-16 11:30:42
257
原创 简单的3字段排序算法
过了一个年人都过傻了。变的一问三不知了。博客也有一个多月没更新了。今天来更新一篇数组对象的多字段排序。加粗样式排序无非是正序或者倒序。我们先来说一个正序。然后倒序当然是将正序的1和 -1反过来就行了一般遇到排序这种情况可能大多数人都会想到**sort()**这个方法。w3chool对sort的介绍是这样的：sort里边有一个说明是我写这个的关键如果调用该方法时没有使用参数，将按字母顺序对数...
2020-02-21 13:29:29
422
原创 求大佬解答一个关于渲染页面的问题
今天遇到了一个bug，虽然解决了，但是很想知道原因是什么。想在这里请教一个大佬们。我自己写了一个组件。首先我们来看代码，然后进行解释与问题叙述<div id="d-wrp__${modalVar}" class="blureffect-dialog linkageselect-modal-wrp d-hide"> <div class="dialog-mask">...
2020-01-03 15:29:02
370
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人