- 博客(136)
- 收藏
- 关注
RSS订阅转载 vue-codemirror使用教程 左侧编辑代码右侧显示页面实现代码编辑并实时预览
【代码】vue-codemirror使用教程 左侧编辑代码右侧显示页面实现代码编辑并实时预览。
2024-12-26 16:25:34
531
原创 Cesium--加载天地图
背景：vue-admin-temlate + cesium +天地图。1,天地图使用方法（点击开发资源即可看到此页面）最要为了获取key （后面使用是token）步骤一：申请成为天地图开发者，创建应用。步骤二：cesium加载天地图。2,点击控制台-登录账号。
2024-05-09 15:20:44
1520
原创 axios的跨越封装
在src文件下，创建api/_AxiosInterceptors.js文件. 在_BaseAxios中引入。在src文件下，创建api/_BaseAxios.js文件。新建config.js 在_BaseAxios中引入。store不需要可以注释掉。
2024-04-17 14:58:41
602
原创 mac uniapp谷歌跨域
uni H5在Chrome有时候请求不到数据，如果确认是跨域问题。注意：youmacname是你的mac名称，你的用户名就OK。
2024-03-18 14:22:44
208
原创 Mac node切换版本，指定版本
nvm是node版本管理工具，为解决node各版本不兼容问题，nvm是让你在同一台机器上安装和切换不同版本的node。文章来源地址:https://www.yii666.com/blog/363759.html?场景：现在电脑node安装版本是16的，启动另外前端项目的时候报错，准备降node版本试试，试过14没问题，但是node官网只能找到16的，所以考虑用brew来安装。一、Homebrew自动安装文章来源地址https://www.yii666.com/blog/363759.html?
2023-06-27 12:17:28
3715
原创 vue3与vue2共存环境搭建
添加成功后，即可在任意文件夹下，全局使用vue3的命令，可执行下面的命令验证下。进入.bin文件夹，修改vue为vue3。出现文件package.json。保存后，需要执行source生效。会报错，且文件夹中不会新增内容。通过下面的命令查看是否添加成功。显示隐藏文件，使用快捷键。
2023-05-24 14:15:07
2279
转载 reflow(减少页面的回流)
本文章向大家介绍web前端优化之reflow(减少页面的回流)，主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
2022-07-18 17:50:35
628
转载 6 款最优秀，数据最全，免费，稳定，各类场景均适合的天气 API
我挑出了 6 款最优秀，数据最全，免费，稳定，各类场景均适合的天气 API，并且一个个测了一遍，我把测试过程，怎么接 API 等所有细节都写在文章里了，希望对你有帮助。本文详细讲解以下 6 个免费天气 API 的特点及接入方法高德天气 API -免费、 稳定、极简，适合天气预报基础需求 知心天气 API - 免费、轻便、专业，适合的天气预报初级需求 和风天气 API - 免费和付费同权限，非商业无限免费，含空气质量、天文气象 OpenWeather - 免费 100 万次/月 分钟级实时预
2022-05-10 14:22:02
9716
1
原创 Echart中y轴数据超出的处理
效果：type:'value', axisLabel:{/自定义刻度格式，大于10000的时候，显示格式为value/10000+万/ formatter:function(value){ var txt=[]; if(value>=10000){ txt.push(value/10000+'万'); }else{ txt.push(value); }; return txt; }}, axisPointer:{ show:fals.
2022-04-15 10:25:28
1670
原创 Echarts 修改legend样式(正方形、矩形、圆形等等)
legend: { itemHeight: 24, itemWidth: 24, data: [ { name: '修边比例', icon: 'rect', }, { name: '平均门幅', icon: 'rect', } .
2022-04-15 10:22:22
6219
转载 Echarts tooltip提示框 自定义小圆点(颜色、形状和大小等等)
formatter: function(params) { var result = '' params.forEach(function (item) { console.log(item) result += item.axisValue + "</br>" + item.marker + item.data }) return result}效果：formatter: function(params) { var result = ''.
2022-04-15 10:17:43
4330
1
转载 Echarts 鼠标hover时柱状图设置渐变背景
效果：只需要在tooltip里设置axisPointer即可axisPointer : { type : 'shadow', shadowStyle: { color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ { offset: 0, color: 'rgba(0, 253, 255, 0.6)' }, { offset: 1, color: 'rgba(73, 201, 229, 0)' },
2022-04-14 17:04:31
1767
转载 Echarts 柱状图横向排版颜色渐变效果
效果：import echarts from 'echarts'/** * 2. 拥堵路段--carJam.vue */var option_carJam = { title: { show: false }, tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, textStyle: { // 设置提示框的对齐方式 align: 'left
2022-04-14 13:56:59
944
转载 Echarts 柱状图让y轴文字靠左显示，series上文字右对齐显示
效果：yAxis: [{ type: 'category', inverse: true, splitLine: { show: false }, axisTick: { show: false }, axisLine: { show: false }, axisLabel: {.
2022-04-14 13:50:16
6811
转载 WebSocket断开原因、心跳机制防止自动断开连接
1、断开原因WebSocket断开的原因有很多，最好在WebSocket断开时，将错误打印出来。ws.onclose = function (e) { console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean) console.log(e)}错误状态码：WebSocket断开时，会触发CloseEvent, CloseEvent会在连接关闭时发送给使用 WebSockets 的客户端. 它在
2022-03-01 16:02:06
18027
转载 window对象详解（动态获取接口路径origin）
路径http://yaoxin.test.jidecai.com:10080/h/rule/ranger.html效果图传参前边的URL：window.location.origin（可用来动态获取接口）"http://yaoxin.test.jidecai.com:10080"域名 + 端口：window.location.host"yaoxin.test.jidecai.com:10080"当前URL：window.location.href"http://yaoxin.
2021-12-22 13:42:59
2883
原创 学习webSoket （二）客户端的使用
一，客户端的简单示例var ws = new WebSocket("wss://echo.websocket.org");ws.onopen = function(evt) { console.log("Connection open ..."); ws.send("Hello WebSockets!");};ws.onmessage = function(evt) { console.log( "Received Message: " + evt.data); ws.
2021-12-06 14:49:54
1908
原创 学习webSoket（一）了解webSoket
WebSocket是一种网络通信协议，很多高级功能都需要它一，为什么需要 WebSocket？答案很简单，因为 HTTP 协议有一个缺陷：通信只能由客户端发起。举例来说，我们想了解今天的天气，只能是客户端向服务器发出请求，服务器返回查询结果。HTTP 协议做不到服务器主动向客户端推送信息。这种单向请求的特点，注定了如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"：每隔一段时候，就发出一个询问，了解服务器有没有新的信息。最典型的场景就是聊天室。轮询的效率低，非常浪.
2021-12-06 10:29:46
455
转载 BI项目第三方资料
一、效果图由于屏幕录制的原因吧。有点卡顿，实际项目不卡顿加载视频可能有点慢,可放大查看...二、开篇个人推荐可视化插件：很强大的阿里开源antv(G2、G6、F2、L7)系列，百度图表echarts和地图mapv,大屏装饰 DataV,D3.js、three.js 大屏数据可视化需求说难挺简单的，说简单挺难的；我认为选对可视化插件可以说成功了一半；不过选型期间往往挺废时间的，因为还要不断的测试看符不符合需求； 本文分享介绍我使用vue2.x开发大屏数据可视化需求的一些套...
2021-10-08 16:55:29
187
转载 datav 轮播表
<template> <div> <dv-scroll-board :config="config" style="margin-left:1rem;width:95%;height:48rem" /> </div></template><script>export default { props:['AreaData'], data(){ return { confi...
2021-10-08 16:51:56
4421
转载 如何实现大屏数字滚动效果
效果：思路：简述：将数字按数组存，比如原来数字是2655，转为数组就是[2,6,5,5],然后循环这个数组，每个数组又创建了1-9数字，再根据数组的值来移动数字的位置具体：我是用vue来写的，但实际上思路差不多的。1.原来的数字转为数组,用split('') realTime() { return `${this.realTimeNum}`.split('') || 0 },2.循环原来的四个数字，然后写好对应的样式，每个数组，对应生成竖着排序的0-9
2021-09-23 16:14:07
2048
1
原创 vue中显示当前系统时间代码
timeFormate(timeStamp) { let year = new Date(timeStamp).getFullYear(); let month =new Date(timeStamp).getMonth() + 1 < 10? "0" + (new Date(timeStamp).getMonth() + 1): new Date(timeStamp).getMonth() + 1; ...
2021-09-23 10:15:33
715
转载 echarts + 百度地图实现 地图展示（代码以vue为例）
1，引入百度地图api//index.html中<script src="http://api.map.baidu.com/api?v=2.0&ak=你的ak值"></script>2，安装echartsnpm install echarts --save3,在需要创建地图的组件中引入如下import echarts from "echarts"; require("echarts/extension/b
2021-09-09 18:19:44
1001
转载 vue使用element-resize-detector监听元素宽度变化
如图，当我们切换左侧菜单展示效果的时候，右侧内容会对应变宽，但此时的echarts并不能执行自适应效果，这是因为切换菜单展示效果并没有触发window.onresize，所以为解决类似此问题，我们可使用element-resize-detector1、引入element-resize-detector，npm install element-resize-detector --save2、在对应位置上引入即可let elementResizeDetectorMaker = ..
2021-09-08 18:06:35
1646
原创 在vue项目中封装echarts的正确姿势
为什么需要封装echarts每个开发者在制作图表时都需要从头到尾书写一遍完整的option配置，十分冗余 在同一个项目中，各类图表设计十分相似，甚至是相同，没必要一直做重复工作 可能有一些开发者忘记考虑echarts更新数据的特性，以及窗口缩放时的适应问题。这样导致数据更新了echarts视图却没有更新，窗口缩放引起echarts图形变形问题我希望这个echarts组件能设计成什么样业务数据和样式配置数据分离，我只需要传入业务数据就行了 它的大小要完全由使用者决定 不会因为缩放出现变形问题
2021-09-08 17:22:24
766
转载 6种JavaScript继承方式及优缺点(小结)
第一种：原型链继承利用原型链的特点进行继承 1 2 3 4 5 6 7 8 9 10 11 function Parent(){ this.name = 'web前端'; this.type = ['JS','HTML','CSS']; } Parent.prototype.Say=function(){ console.log(this.n...
2021-08-27 11:09:49
163
转载 Table 实现固定行列
需要用到的2个属性table-layout : fixed position : stickytable-layouttable-layout属性有两种特定值：auto（预设值）-表格的总宽度决定每一个储存格（cell）的最大值 fixed - 表格的总宽度决定于表格width的定义,以及各栏位（column）width的定义为了让表格呈现滚动效果，必须设定table-layout:fixed 并且给与表格宽度。table { table-layout: fixed; w
2021-08-25 16:43:17
932
转载 微信小程序踩坑之text、view不自动换行问题解决
最近在练习小程序，使用接口调取数据，渲染到界面的时候，发现标题过长超过了屏幕边框并没有自动换行，鉴于对css3不是很熟悉的后端人员，各种搜索，各种尝试，终于找到了答案。wxml 代码：目标：使 class 为 title 的 text 文本自动换行。<!-- 文字 --> <view class='list-content'> <text class='title'>{{index+1}}.{{item.title}}</text>...
2021-04-20 19:59:56
5003
转载 小程序使用弹窗组件Modal，阻止冒泡事件
在modal组件上加一个catchtap事件（里面不写内容都可以），亲测有效！<i-modal title="提示" visible="{{ visible }}" catchtap="stopPropagation" bind:ok="call" bind:cancel="handleClose" ok-text="是" cancel-text="否"> <view>是否拨打电话xxxxxxxxxxx？</view></i-modal>
2021-04-20 19:58:00
511
转载 小程序解决自定义弹出层滑动时下层页面滚动问题--穿透问题
一、问题描述小程序自带弹框满足不了某些需求，为此则需要设置自定义弹框，但是问题来了，在滑动弹层的时候，弹层页面会随着弹层底部的滚动条滚动二、解决办法在弹出层加上 catchtouchmove 事件- 如果弹层里的内容需要滚动则需要使用scroll-view组件原理：弹窗元素设置catchtouchmove="true"目的是为了阻止弹窗滚动的时候 会带动外层页面的滚动，但是如果弹窗元素设置了该属性，弹窗内的自己写的overflow:auto就会失效，这时不能用自己写的overflow，要改
2021-04-20 19:54:47
1456
转载 详解JS函数柯里化
第一次看到柯里化这个词的时候，还是在看一篇算法相关的博客提到把函数柯里化，那时一看这个词就感觉很高端，实际上当你了解了后才发现其实就是高阶函数的一个特殊用法。果然是不管作用怎么样都要有个高端的名字才有用。首先看看柯里化到底是什么？维基百科上说道：柯里化，英语：Currying(果然是满满的英译中的既视感)，是把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。看这个解释有一点抽象，我们就拿被做了无数次示例的add函数
2021-02-24 10:10:34
208
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人