前端学习笔记(HTML+CSS+JS)
前端学习笔记(HTML+CSS+JS)
David_jiahuan
做it行业需要做笔记吗?
要--好记性不如烂笔头!
展开
-
vue 父组件通过 ref 调用子组件实例
子组件代码:父组件代码:父组件中获取子组件实例的代码:this.$refs.parent.$refs.mychart前半段:this.$refs.parent 是为了获取当前父组件的实例;后半段:.$refs.mychart 是为了通过父组件内的 $ref 引用找到子组件对应的 ref,也就是mychart;...原创 2021-07-19 15:50:36 · 716 阅读 · 0 评论 -
vue-echarts的ZRender事件
首先贴出 vue-echarts 的官网连接:https://www.npmjs.com/package/vue-echarts1、vue-echarts 具体在vue中的使用方法,本文中就暂时不多介绍了;2、如何在vue中使用vue-echarts的鼠标事件:具体使用方式跟vue中使用echarts一样,都是通过 @事件名 来实现的:<v-chart class="chart" ref="mychart" :option="defaultOption" autores..原创 2021-07-19 15:31:30 · 3763 阅读 · 1 评论 -
知乎网页版免登录浏览
在浏览网页版知乎时,如果你是没有登录的状态,你将会不能滚动任何内容,并被登录窗口卡在那里。那么今天就教大家一个不登录也能浏览知乎网页版的方法!假设下面是一个打开的未登录的知乎页面具体操作步骤(以chrome浏览器为例):1、先按 F12 打开浏览器调试页面:2、然后找到最上面的那个 html 标签,并去掉右边的overflow属性:此时你应该就可以在网页上滚动鼠标了,但是中间的那个登录窗口还未去掉,下面介绍去掉登录窗口的方法;3、接着去掉中间那个登录窗口:方法1:将倒数第一个div标.原创 2020-12-03 17:53:59 · 54532 阅读 · 0 评论 -
获取实时天气的网站
中国万年历获取天气的接口:(1)通过城市名称获取天气数据:http://wthrcdn.etouch.cn/weather_mini?city=嘉定(2)通过城市代码获取天气数据:http://wthrcdn.etouch.cn/weather_mini?citykey=101020500======= 数据和中国天气网(www.weather.com.cn)一致!...原创 2018-04-11 13:44:58 · 6576 阅读 · 4 评论 -
jquery的prepend和append方法实现消息向上/向下推送
项目中的需求:要求前端把webSocket获取到的后台实时消息显示在一个固定的div中;1、把消息向上推送的方法:用到了jq的prepend方法,将后台传递过来的消息向上添加到div的ul中,向上显示最新的消息:var div = $("#div");div.prepend("推送的消息");效果图如下:2、把新消息向下推送的思路是:将固定的div的滚动条高度设置为与ul高度一致:var div...原创 2018-04-05 12:26:36 · 964 阅读 · 0 评论 -
echarts 鼠标悬停提示框超出图表范围
鼠标悬停在echarts的图表上时,提示框超出范围:解决办法: tooltip : { confine: true },主要配置 tooltip 的属性 confine 值为 true,就可以解决。...原创 2018-10-14 15:27:25 · 4554 阅读 · 0 评论 -
span标签的 width 属性不管用,如何使之有效?
因为span标签是 inline "内联标签";对内联标签设置宽度是无效的;==========================================================================可以通过属性 display : inline-block ;将span标签变为 "内联-块标签"(介于块级元素和内联元素之间),这样就可以设置其宽度了...原创 2018-08-29 14:28:55 · 2148 阅读 · 0 评论 -
js 实现音乐播放器中歌词与歌曲同步的原理
首先知道歌词文件的后缀名是 .lrc (lyric歌词的缩写);接着知道.lrc 文件的一般格式是 [** : ** . ***] 歌词内容(时间的tag标签组成):===========================================================知道上面这些后,就不难知道怎么实现歌词和歌曲同步了: 1、首先逐行解析每句歌词; 2、利用正则表达式等方...原创 2018-06-01 10:54:58 · 6839 阅读 · 0 评论 -
Echarts图表legend的排列问题
项目中现有样式:客户需求:将图例分为两列,并且每列的图例图表对齐;经过上网搜索后,修改为如下样式:==================================================具体思路:将原有的一个 legend,分成7个小 legend 显示(形容的可能不太形象,下面看代码吧):(1)原先的代码:legend: { orient: 'hori...原创 2018-04-26 17:36:06 · 48809 阅读 · 17 评论 -
webstorm中编辑vue代码时,v-bind: 指令标红出错
上网搜索了一下解决办法说要导入vue的插件(File-Settings-Plugins),结果在这里面发现是有vue.js的插件的:================= 最后又搜索了一下发现:需要在v-bind 与 :之间多一个空格 ================或者直接略写 v-bind:直接写成 :即可...原创 2019-03-20 16:30:25 · 3944 阅读 · 3 评论 -
echarts的tooltip 使用formatter后,小圆点不见了!
为了控制鼠标悬浮显示不同的内容,我使用了formatter:但是,发现之前的小圆点不见了:解决办法是使用echarts的marker属性,标注出小圆点:修改后的显示效果是:...原创 2018-12-25 14:19:42 · 16906 阅读 · 21 评论 -
React + Echarts 实现柱状图颜色渐变
一、首先导入 echarts 模块和 ReactEcharts模块:import * as echarts from 'echarts';import ReactEcharts from 'echarts-for-react';二、然后在 series的itemStyle项设置color属性:series: [ { type: 'bar', st...原创 2020-02-04 21:11:13 · 2261 阅读 · 0 评论 -
ES6中箭头函数加不加大括号的区别
之前一直没用过ES6的箭头函数,最近在学习React的相关知识的时候,发现里面用到了许多箭头函数的写法,自己在使用箭头函数的大括号的时候也遇到过问题:You are using the in-browser Babel transformer. Be sure to precompile your scripts for production !======================...原创 2019-10-28 16:24:53 · 1329 阅读 · 1 评论 -
及时吐槽一下。。。vue-awesome-swiper 的使用
今天想要在 vue 中使用 swiper 来实现一个缩略图左右切换的效果,行,干起来吧!开干:在网上找了一段代码(养成良好的白嫖习惯:https://www.jianshu.com/p/ef47983e7d90):<template> <div class="moduleSeckill"> <div class="seckill-header">今日秒杀</div> <div clas...原创 2020-06-24 16:26:50 · 512 阅读 · 1 评论 -
记录一次 vue 自定义组件
需求:每个界面中都有API接口调用文档的查看按钮,点击可以查看不同接口的接口文档!分析:1、用vue写一个子组件 component,其中API文档中的各种入参、调用示例、返回参数以及返回示例等可以作为子组件的props参数;2、然后一点需要注意的是:当子组件点击关闭查看界面的时候,如何将关闭的状态值向上传递给父组件($emit);代码示例:1、子组件部分(子组件的名称叫 ApiWord.vue):<template> <el-dialog :titl.原创 2020-06-22 22:12:52 · 250 阅读 · 0 评论 -
img图片在div中垂直居中 + 剪切 + 等比例缩放
外层div,内层img,如何让img在div内水平垂直居中展示呢?上面已经实现了图片在div中水平垂直居中展示了,那下面就是如何隐藏掉图片超出div的部分:原创 2020-06-20 10:23:03 · 1763 阅读 · 0 评论