何良语-CSDN博客

原创百度地图点聚合样式修改（BMapLib.MarkerClusterer）

找了很久都没人贴过这个，百度地图里点聚合的图标替换，官方文档也没有直接把这块贴出来，经过几番周折最终还是找到了，先上效果图（这是直接在官方的例子里做的，略丑）实现方面先看看官方怎么说的：然后找到TextIconOverlay：虽然官方是写了怎么做，可以传个数组，这个不明白啊，难不成一个点要对应一个style？不能吧，我只需要所有的点样式一样就行，干嘛要每个点一个样式，最重要...

2019-12-26 10:34:10 7505

原创 highcharts 自定义仪表盘图表

使用highchart图表框架实现一个自定义的类似下图的图表1. 原理实际上就是4个饼图叠起来（可以这么理解），中间一个完整的圆和三个大小不一的圆圈2. 技术点使用的是highchart中的Highstock图表类型是solidgauge因为饼图不支持阴影效果（可能是我没找到），所以上图中带的一点类似阴影的效果，看起来有一点点立体的感觉用的是径向渐变属性来实现的其中用到...

2019-03-08 11:06:13 1864

原创 rollup打包js代码

个人学习过程中的一个记录：1. 创建一个文件夹2. 在这个文件夹下，使用命令行输入命令，初始化一个项目 npm init -y然后根目录下会产生一个package.js文件，这个文件中包含了项目相关信息以及第三方依赖等3. 在根目录下新建一个文件rollup.config.js这个文件用来配置rollup，配置打包的规则4. 在package.js文件中script...

2018-09-05 16:34:33 2921

原创 highchart 曲线点添加值，tooltip、y轴添加单位（更改文字颜色）

1. 改变曲线中每个点的颜色：在数据封装的时候，给每个数据点添加color属性，这个值即是点的颜色2. 给每个点上添加当前坐标点的y轴的值：plotOptions: { useHTML: true, series: { dataLabels: { enabled: true, color: 'rgba(2...

2018-08-02 14:15:58 3746

原创 hightchart 图表自适应 reflow()

在项目中遇到highchart图表在其容器盒子宽高变化时图表重绘的问题，为了体验效果，要求图表自适应容器变化，而不是图表重新加载在highchart的api文档中查找到了reflow()方法可以自适应，但是使用之后发现没有作用，因为找不到相关资料，所以自行解决了这个问题，猜测是因为图表的容器盒子宽高使用的是百分比：.chartcontanier{ width: 100%; ...

2018-07-31 11:44:04 4834

原创 react 实现可播放的进度条

实现的效果图如下：如果所示，点击播放按钮可以播放，进度条表示进度功能描述：1. 点击播放按钮可以播放，进度条表示进度2. 点击暂停，进度条停止变化3. 可点击圆点，进行进度拖拽4. 点击进度条可调节进度以下是render部分代码：<div className="play" ref={play => { this.play = play; }}> <spa...

2018-07-13 17:39:19 7593 3

首先安装highchart和vue-highchartsnpm install highchart --save--devnpm install vue-highcharts --save-dev让在main.js 中引入highchartimport Highcharts from 'highcharts';import VueHighcharts from 'vue-highcharts';...

2018-06-15 17:24:01 2614

原创 vue highchart实现图表的提示框（tooltip）

一开始本来是打算将提示框当做一个参数传入到生成图表的方法中，封装一个方法来创建提示框，但是知识有限，在封装的方法中的this是当前的vue实例，而不是highchart中的，所以外部方法目前无法实现这个功能所以将提示框的方法写在了创建图表的配置信息中tooltip中：提示框的内容是formatter这个方法实现，其中使用的getFormatDate方法是封装的Date对象转换成自己需要的时间格式...

2018-06-15 17:17:16 3491

原创 vue和iview实现Scroll 数据无限滚动

在做项目的时候因为数据比较多，一次性全部渲染的话会花费较多的时间，所以，想到每一次渲染10条数据也想过每一次获取十条数据然后显示就行了，就目前自己所知最好的方法是修改接口，一次返回10条，可是这样子太麻烦了，所以决定一次性请求所有数据，然后每次渲染十条，需要再上拉加载更多使用的是iview中的组件Scroll以下是获取数据和封装数据的方法：原理是先定义两个全局的变量，一个存储全部的数据，一个存储渲...

2018-06-15 17:10:25 16373 6

转载 react 生命周期

componentWillMount -> render -> componentDidMount shouldComponentUpdated（必须有一个返回值，返回值是布尔值，返回false可以取消组件更新） -> componentWillUpdated（此时DOM已经更新，可以在此处获取DOM元素） -> render -> componentDidUpdat...

2018-06-05 21:47:36 198

原创 react+百度地图生成覆盖物和信息弹窗

创建组件之前要先定义BMap和BMapLib：const BMap = window.BMap;const BMapLib = window.BMapLib;首先，可以将地图作为props传入到组件中，因为渲染时间问题，有可能在接收到map之前就进行了渲染，所以要在组件的生命周期内接收这个参数，并且调用创建覆盖物的方法：componentWillReceiveProps(nextProps) {...

2018-06-01 18:34:20 2511 4

原创 react+百度地图覆盖物出现动态光圈效果

首先在less文件中创建动画，将动画绑定到类上：@keyframes scale{ 0% { transform: scale(0); // background-color: rgba(255, 255, 255, 0); } 50% { transform: scale(0.5); // background-color: R...

2018-06-01 18:15:58 1360 1

原创原始多选框样式修改（纯css 很简单）

input[type=checkbox] { -webkit-appearance: none; //这个属性是将input标签变成一个可修改样式的普通标签，目前有谷歌和火狐浏览器支持 -moz-appearance: none; width: 11px; border-radius: 2px; height: 11px; ...

2018-06-01 18:08:01 5435 1

原创使用Ant Design中的多选框组件时修改其多选框样式

样式必须在全局样式中修改才能生效，位于global文件夹中的less文件或者index.less或global.less文件具体优先级自行计算当选中多选框或者label时，多选框的边框改变颜色：.ant-checkbox-wrapper:hover .ant-checkbox-inner,.ant-checkbox:hover .ant-checkbox-inner, .ant-checkbo...

2018-06-01 18:04:10 15631 3

转载 es6 函数的扩展

1. 函数参数的默认值function f(x=0, y=0){}2. 函数的参数默认值和解构赋值结合使用function ({x, y=5} = {}){} //传进的参数是一个对象，当传进的参数为空时，默认创建一个空对象{x=undefined, y=5}// 写法一function m1({x = 0, y = 0} = {}) { return [x, y];}// 写法二...

2018-05-24 17:10:46 155

原创 es6 变量的解构赋值

1. 数组的解构赋值let [a, b, c] = [1, 2, 3] // a=1 b=2 c=3只要等号两边的模式相等，就可以从数组中提取值，对变量进行赋值let [a, [b], c] = [1, [2], 3] // a=1 b=2 c=3let [ , , third] = [1, 2, 3]; // third=3let [head, ...tail] = [1, 2, 3, 4...

2018-05-18 16:41:32 147

原创 es6 let const

let声明的变量只在其声明块里有用，一个{}代表一个块

2018-05-16 22:54:20 266

原创使用vue开发一个项目（一）

在学习了vue基础之后，为了能够在vue开发项目上有一个真正的提升，所以打算用vue来做一个完整的项目，将其记录下来首先建立一个工程文件夹，在这个文件夹下打开命令行工具，在命令行中敲入以下命令安装上vue的脚手架：cnpm install -g @vue/cli //全局安装vue-clivue init webpack vuetest //创建一个基于webpack的名叫vuetest的vu...

2018-05-10 17:52:27 4861

原创 react中简单的使用localstorage

_setStorage:_setStorage(value){ localStorage.setItem('value', value);}_loadStorage_loadStorage(){ const value = localSotrage.getItem('value'); if(value){ this.setState({ value ...

2018-04-28 17:29:56 7236

原创 react使用props在多个组件之间传递数据

有三个组件，分别是app、list、comment三个组件之间的关系是comment在list中使用，list在app中使用此时有数据需要从list传到comment，然后comment传回list，list又将comment传回的数据传给app代码如下：comment：list通过props传给comment两个参数，onDelete(func) index(number) 然后commen...

2018-04-28 17:02:15 2196

原创 vue+百度地图：自定义覆盖物

// 复杂的自定义覆盖物 function ComplexCustomOverlay(point, text, tipText){ this._point = point; this._text = text; this._tipText = tipText; } ComplexCustom...

2018-04-08 17:34:30 4973

转载 loading组件开发

loading.vue:<template> <div class="loading"> <img src="./loading.gif" alt=""> <p>{{title}}</p> </div> </template>

2018-04-03 11:09:18 211

转载 vue-lazyload

先安装vue-lazyload：npm install vue-lazyload --save在main.js中使用：import VueLazyout from 'vue-lazyout'Vue.use(VueLazyout, { // 这里面都是可选的参数，如下图})使用方法：在需要懒加载的图片中的src属性：src改为v-lazy即可还有很多的用法，可以到GitHub中区查看...

2018-04-03 09:35:53 243

原创使用better-scroll时遇到已初始化但是页面无法滚动和点击的情况

这个情况是因为样式定义问题包裹滚动内容的外面一层盒子要比内容的高度高，高度正好是除掉头部高度剩下来到浏览器底部的高度scroll外面的盒子的高度可以如下定义：.wrapper-father{ position: fixed; top: 100px; //头部高度 bottom: 0; //必须设置，可以固定这个盒子在从头部到浏览器底部的高度}scroll这一个盒子的高度：.wrapp...

2018-04-02 18:04:40 4649

转载对获得的数据（数组）进行分类处理

有相同属性的对象放在同一个数组：_nomarSinger (list) { //传入一个list数组，对数组中的数据进行封装 let map = { hot: { //热门 title: HOT_NAME, items: [] } }; console.log(list); ...

2018-04-02 10:20:12 4113

原创制作tab切换时遇到的问题

在制作tab切换时，遇到了一个问题，切换时，想要实现的效果是如图的效果：在切换时，下边框一擦隐藏，上、左、右的边框显示问题：原本是在ul上添加的border-bottom，li设置为margin-bootom：-1px（注：li的宽度是a标签撑起来的）.active中的a标签的下边框添加，然后设置下边框是透明的，或者白色的，但是无论怎样设置都不行，ul的下边框都会显示解决：在ul外包一个div，然...

2018-03-30 18:01:58 474

转载 express+axios抓取其他网站上的jsonp数据作为json输出

1.首先在依赖库中添加依赖express、axios"express": "^4.16.3","axios": "^0.18.0"cnpm install2.在webpack.dev.conf.js文件中将依赖引入，然后建立一个代理去拿到其他网站的数据在其中添加以下代码：// start 使用代理来获取其他网站的数据var express = require('express')var ax...

2018-03-24 21:57:10 1762

原创在vue中使用jsonp跨域访问数据

1.首先在src目录下建立一个api目录，下面建立cofing.js和recommend.js文件，在config.js文件中是一些跨域访问的参数：export const commonParams = { source: 'wap' //访问时的公共参数}export const options = { param: 'callback'}export const ERR...

2018-03-22 10:38:55 4378 1

原创 vue-router的使用方法

在依赖中添加vue-routernpm install vue-router --save分别创建m1.vue m2.vue然后在main.js中创建以下代码：import VueRouter from 'vue-router'import m1 from './components/music/m1'import m2 from './components/music/m2'Vue.c...

2018-03-21 16:40:57 336

原创伸缩布局

2018-03-21 10:33:11 415

原创 vue 2x 学习记录（二）

1.绑定class时，里面传入对象、数组以及数据，当绑定class的数据或方法发生改变时，元素的class也会发生改变（在数组中也可以使用对象语法）2.bind:style看起来像css，其实是一个JavaScript对象，也是传入对象、数组、数据等；css属性名使用驼峰法或者-来连接，但是不要忘记使用单引号括起来；当使用需要添加浏览器引擎前缀时，Vue会自动侦测并且添加相应前缀3.Vue会尽可能...

2018-03-21 09:43:15 205

原创 Vue 2x 学习笔记（一）

今天是2018年3月19日，学习vue有一段时间了，但是都是学习的怎样去使用其中的一些技术，还没有了解过其中实现的原理，从今天开始，阅读官方文档来进行基础的学习，这个是学习过程中的一个记录：一、模板语法、计算属性和侦听器1.模板语法可以将DOM绑定到vue实例中的数据2.模板语法只能渲染文本，如果要渲染HTML标签，使用v-html属性在标签中（<div v-html=''></...

2018-03-20 14:02:51 573

原创运行vue项目时报错

一直在提示找不到模块，一直下载安装这些依赖也不行解决方法：先删除模块的目录，然后运行cnpm cache clear，然后再运行cnpm install

2018-03-14 23:08:11 1963

原创 border-bottom： 1px 在iOS端显示为2px

border-bottom： 1px 在iOS端显示为2px使用stylus创建一个函数创建一个适配，分别在不同的缩放情况下做出改变然后分别引如文件到App.vue中，并使用函数和类

2018-03-10 12:16:52 1390

原创在本地读取json数据（vue 2.5.2+基于webpack3.6.0）

本地读取json数据：在依赖中载入vue-resource然后在main.js中添加以下代码：import Vue from 'vue';import VueResource from 'vue-resource';Vue.use(VueResource);首先在webpack.dev.conf.js中添加以下代码：const express = require('express') //...

2018-03-10 12:15:48 2090

原创 git学习

可到官网直接下载安装git然后在开始中找到git bash点击出现一个命令行工具，命令行输入以下代码：git config --global user.name "Your Name"git config --global user.email "email@example.com"填写自己的名字和邮箱。接下来创建版本库（仓库）：在合适的地方新建一个文件夹，这个文件夹里的所有文件都能被git管理...

2018-03-07 21:15:17 158

原创 webpack学习（二）

创建一个dist/bundle.js文件 dist中新建一个index.html文件，这个文件中的代码如下： <html> <head> <title>Getting Started</title> </head> <body> <script src="bundle.js&quot

2018-03-05 23:09:35 130

原创 webpack学习（一）

在学习使用webpack，所以写个博客记录一下，方便以后查阅在安装webpack之前在电脑里新建一个webpack项目工程文件夹，然后在这个文件夹中打开命令行要使用webpack，必须先安装配置好nvm，然后安装npm、node在命令行中敲入这行代码,全局安装webpacknpm install -g webpack 输入命令行查看webpack是否安装成功：webpack -v使用这行命令时老是...

2018-03-05 22:28:31 402

空空如也

空空如也