- 博客(125)
- 资源 (2)
- 问答 (1)
- 收藏
- 关注
RSS订阅
原创 前端实用网址
1.echarts 做图（饼图，柱状图） https://echarts.apache.org/zh/option.html#legend.bottom2.ant design of vue UI库https://www.antdv.com/docs/vue/introduce-cn/3.vant 移动端Ui库https://vant-contrib.gitee.io/vant/#/zh-CN/button#dai-ma-yan-shi4.中国大学Mo...
2021-07-20 09:41:53
100
3
原创 常见知识点及bug解决方法
1.小标签不支持宽高和margin解决方案：float:left (左右排列) display:block; (上下排列）2.图片往下掉img{vertical-align:top}3.给元素加了浮动以后，不能居中4.当子元素的margin-top把父元素一起带下去给父元素添加overflow:heidden;5.padding会把盒子撑大同时设置：text-index: 几px6.text-aling:center写在父级元素上，可以让图片居中宽度的继承：可以继承腹肌的
2020-08-18 12:05:08
220
2
原创 echart 折线图处理小技巧
当数据为null时，折线图断线处理方式：在series中设置：connectNull:true折线图显示不要小圆点：处理方式：在series中设置：symbol:"none"折线图上折线的小圆点鼠标，如何做到鼠标离开时圆点不显示，鼠标放上显示处理方式：在series中设置：showsymbol:false如图：...
2022-03-01 17:21:31
582
原创 两个数组的循环遍历（合并取值）
var arr=[1,2,3,4,5]var brr=[{stepIndex: 1, title: "第一个",num: ""},{stepIndex: 2, title: "第二个",num: ""},{stepIndex: 3, title: "第三个",num: ""},{stepIndex: 4, title: "第四个",num: ""},{stepIndex: 5, title: "第五个",num: ""},]brr.map((val,index)=>{.
2022-01-12 15:24:31
1510
原创 echarts 散点图实现正负值颜色不同，方向不同
效果如图：核心代码：const { RtimeList, RList, sList, $utils } = this;series: [ { type: "scatter", data: RList.map((item) => { return { value: item, symbol: "triangle", .
2022-01-11 14:22:52
826
原创 echarts柱状图实现正负值不同颜色在上方显示数值
效果如图：核心代码：series: [ { type: "bar", barMaxWidth: 25, data: this.YList.map((item) => { // 循环 return { value: item, label: { .
2021-12-22 09:48:58
4176
1
原创 echarts实现左右滑动
1.内置滑动 dataZoom: [ { type: "inside", //slider表示有滑动块的，inside表示内置的 show: false, xAxisIndex: 0, start: 50, end: 100, }, ]2.底部有滑动块 dataZoom: [ { ...
2021-12-22 09:40:57
6912
1
原创 实现步骤条
1.效果如图：2.html结构：<template> <div class="overall"> <!-- 步骤条盒子 --> <div class="steps-box"> <!-- 步骤条 --> <div class="Article-steps" :class="stepList.length <= stepIndex ? '...
2021-12-20 11:24:47
1568
原创 TypeError: Cannot read properties of undefined (reading ‘XXX‘)
报错如图：代码部分：解决办法：1.检查你的data定义的属性是不是没有你用到的这个属性,没有的话就定义一个，如下：2.也可能是后端返回给你的数据没有这个属性 或者 返回的有的有数据 有的是 null,加个v-if判断一下，如下：3.异步处理，数据还没返回 你就开始使用这个属性 可以加个 this.$nectTick (()=>{//获取数据}) 包裹一下...
2021-12-14 18:00:36
7503
原创 函数返回值规则
1.一个函数里面没有return结果就是undefinedvar num=10function arr(num1,num2){ var result=num1+num2}var result1=arr(1,2)alert(result1) //结果为underfined 2.程序自上向下进行varnum=10;functiona(num1,num2){varresult=num1+num2;...
2021-12-01 10:25:31
305
1
原创 项目中定时刷新数据，重新渲染页面
需求: 每隔一分钟自动刷新一下当前页面，同时发送请求，重新渲染数据，以到达实时更新。首先我们知道：js有两种定时器setInterval(function(){}, milliseconds)——会不停的调用函数setTimeout(function(){}, milliseconds)——只执行函数一次这么一对比，可知：（1）setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就
2021-11-25 15:48:43
881
原创 使用sass处理多皮肤页面样式编写
1.安装sassnpm install -g sass2.提取公共部分common.scss@charset "UTF-8";//假设有白、黑、红三种皮肤（顺序要一一对应）//white, black, red$foncColor:#333 #ddd #333;//字体颜色$foncColor2:#6b6b6b #999 #6b6b6b;//字体2颜色3.在页面中使用字体颜色（1）先引入common.scss@import "common";（2）样式中写.
2021-11-25 09:00:41
345
原创 echarts配置dataZoom后，左右滑动禁止重叠，交叉滑动
如图：阻止左后滑动只需设置：dataZoom: [ { minSpan: 8, } ]minSpan：8 这个值得大小可以根据手柄的大小自由调整效果如图：
2021-11-24 13:57:14
1458
原创 echarts画折线图时，当数据为null时，折线图断线处理
如图：只需要在series中设置：connectNulls: true,效果如下：
2021-11-24 13:52:29
2427
原创 将“#”左右两边的数据拆分成数组
var arr=['123#2','123#3','123#4','123#5','123#6']let listCode = [];arr.forEach((item) => { listCode.push({ code: item.split("#")[0], sc: item.split("#")[1], });});
2021-11-22 16:44:51
204
原创 使用echarts构建图时， Y轴顶部名称显示不全，被遮挡
如图：百度了一下，尝试了以下方法：方法一：添加nameLocation属性，但是效果并非我想要的（PASS）yAxis: {nameLocation:"end",// //坐标轴名称显示位置。可选：'start','middle','end'}, 方法二：修改grid属性值（我采用的这个方法），通过调整top值达到了想要的效果grid: {top:'15%',// 组件离容器上侧的距离,百分比字符串或整型数字lef...
2021-10-13 17:11:03
3589
原创 用纯css画一个小企鹅
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>C.
2021-07-23 10:34:53
142
原创 引入谷歌字体
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS.
2021-07-23 09:19:07
175
原创 vue 移动端搜索功能（带历史搜索记录）
实现效果如图：实现的功能:1.点击搜索，把搜索的值存入本地记录，并展示2.搜索相同的值，要删除旧数据，把新数据放进数组首位3.清空历史记录html代码：<div class="searchinp"> <span @click="back" class="totrain"></span> <div class="input_box"> <img class="btn_img" src="...
2021-06-16 17:36:16
1948
2
原创 下载文件
axios({ url: this.apiUrl+'后端地址', data:{'url':data}, method: 'post', responseType: 'blob' }).then(res=>{ if (!res) { return } let url = window.URL.createObjectURL(res.data) let .
2021-05-08 10:02:14
71
2
原创 正常退出后在登录页时执行浏览器回退不进入项目内部
在登录页中mounted() { // 禁用浏览器返回键 history.pushState(null, null, document.URL); window.addEventListener('popstate', this.disableBrowserBack) },destroyed() { // 清除popstate事件 否则会影响到其他页面 window.removeEventListener("popstate", this.disableB
2021-03-31 09:30:52
158
原创 使用object-fit:cover处理图片在容器变小时不会压缩，保留原始比例进行剪切缩放
object-fit: fill|contain|cover|scale-down|none|initial|inherit;object-fit 属性指定元素的内容应该如何去适应指定容器的高度与宽度object-fit 一般用于 img 和 video 标签，一般可以对这些元素进行保留原始比例的剪切、缩放或者直接进行拉伸等。fill 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。 尝试一下 » contain 保持原有尺寸比例。内容被缩放。 尝试一下 ».
2021-03-16 09:44:21
404
2
原创 css渲染图片时放大或缩小图片变模糊处理方式
img{ image-rendering -moz-crisp-edges image-rendering -o-crisp-edges image-rendering -webkit-optimize-contrast image-rendering crisp-edges -ms-interpolation-mode nearest-neighbor }
2021-03-11 16:39:03
1829
2
原创 PC、移动两版代码，如何共用一个路径地址判断设备自动跳转到相应的页面
以pc端为主，在pc端的main.js中配置如下代码：var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win") == 0; system.mac = p.indexOf("Mac") == 0; system.x11 = (p == "X11") || (p.indexOf("Li
2021-02-20 11:01:18
401
4
原创 vue-cli4.5创建vue项目
一、环境准备1.node npm二、创建项目1.过入特定的目录，在搜索拦输入cmd过入命令行2.升级vue-cli4最新npm install @vue/cli -g //全局安装最新的脚手架3.创建项目vue create 项目名称(貌似不能含有大写字母)选择配置方式： default: 默认配置 Manually select features 手动配置选中Manually select features后，再选择功能：history mode，页...
2021-01-06 09:43:37
625
原创 vue学习经验总结（子组件高度自适应撑满整屏）
1.在app.vue页面设置高度百分百<style lang="stylus">#app{ height: 100%; margin: 0; padding: 0;}</style>2.在子组件中设置height:100%;即可具体可以参考：https://blog.csdn.net/qq_39174924/article/details/103420766...
2021-01-05 11:14:53
2941
原创 vue 学习经验总结（使用百度统计做页面统计功能）
1.登录注册百度统计账号（按提示操作）https://tongji.baidu.com/web/welcome/login?2.登录后-->点击管理—>代码管理—>代码获取3. 点击新增网站，填入对应的网站域名4.填好后，点击获取代码统计vue项目中的每个页面的访问量：5.将代码复制到项目中，在main.js中写入6.在router.js中引入...
2020-12-28 13:29:54
732
原创 css样式 禁止textarea 标签拖动
没有设置之前：给标签设置resize:none 即可textarea { width: 350px; resize: none; min-height: 200px; overflow: auto;}设置之后：
2020-12-28 10:03:05
233
转载 vue 关闭浏览器清空token （区分刷新）
知识点浏览器关闭执行的是 beforeunload ， unload 这两个事件；而浏览器刷新执行的是beforeunload， unload， load 三个事件；思路虽然刷新与关闭都会走onbeforeunload与onunload，但可能因为刷新在加载新页面前内部机制还需要做一些准备工作，所以刷新事件在执行到onunload事件时，用的时间会比关闭事件时间长。所以，通过时间差来判断浏览器是刷新还是关闭，浏览器执行beforeunload的时候给一个开始时间，执行unload的时候给一
2020-12-21 15:03:54
6941
7
原创 Vue-Socket.io的使用步骤
第一步安装依赖npm install vue-socket.io --save1第二步在main.js中引入import VueSocketIO from 'vue-socket.io'Vue.use(new VueSocketIO({ debug: true, connection: 'http://metinseylan.com:1992', vuex: { store, actionPrefix: 'SOCKET_', //
2020-12-18 10:06:54
998
5
原创 javascript 数值方法
1.JavaScript数字JavaScript只有一种数值类型。书写数值时带不带小数点均可。JavaScript数值始终是64位的浮点数与许多其他编程语言不同，JavaScript不会定义不同类型的数，比如整数、短的、长的、浮点的等等。JavaScript数值始终以双精度浮点数来存储，根据国际IEEE754标准。JavaScript数值书写JavaScript数值既可以带小数点，也可以不带：eg:varx=3.14;//带小数...
2020-12-11 11:38:33
165
2
原创 javascript 基础概述
1.为什么要学习JavaScript?JavaScript是web开发者必学的三种语言之一：(1)HTML定义网页的内容(2)CSS规定网页的布局(3)JavaScript对网页行为进行编程;2.JavaScript能够改变HTML内容(1)getElementById()是多个JavaScriptHTML方法之一。eg:document.getElementById('id名').innerHTML='hello'3.<script&...
2020-12-10 17:36:25
219
6
原创 使用sourcetree可视化工具上传代码到gitlab
1.打开sourcetree工具，点击加号2.点击clone,填写gitlab仓库地址，目标路径就是你需要把项目放在本地的那个位置3.点击远程，选中对应分支，右击检出该分支4.更新代码后，每次暂存代码，提交 在推送即可...
2020-12-04 15:28:15
1368
2
原创 react学习经验总结（style和class的处理）
一、style 可以使用对象JSX 中使用 JavaScript 表达式。表达式写在花括号{}中 包括注释声明一个对象：var headerStyle={backgroundColor:"red",color:"green"}将style对象进行引入{}不能丢失：class Header extends React.Component{render(){return (<div><h1 style={headerStyle}>{th..
2020-12-03 15:16:45
633
2
转载 实现动效星空背景
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> html, bo.
2020-12-03 09:24:10
481
1
转载 实现3D立体相册
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>纯CSS实现鼠标经过3D立体动态展示图片特效代码</title> <link type="text/css" href="css/style.css" rel="stylesheet" /> <style> @charset.
2020-12-03 09:23:58
250
3
webpack打包步骤和使用方法.txt
2020-12-03
echarts使用datazoom左右滑动后，怎么设置x轴时间刻度只显示左右两个值？
2021-11-22
TA创建的收藏夹 TA关注的收藏夹
TA关注的人