动心.-CSDN博客

原创安装elementUI

https://www.e-learn.cn/content/qita/2521763

2019-08-08 09:23:49 216

原创兼容ie10以下的base64编码与解码

var Base64 = { _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=", encode: function (e) { var t = ""; var n, r, i, s, o, u, a; var f = 0; e = Bas...

2019-07-26 15:43:17 604

原创 vue导航条去掉#

export default new Router({ mode: 'history', routes: [] }）把浏览模式换成history

2019-07-25 16:57:39 858

想要只显示某一区域的内容，超出的就禁止拖拽，但是测试了一天，也没有成功，而且如果真的禁止成功了，那往回拖拽的时候怎么开启也是一个问题，在网上参考了很多博客，想到了一个折中的解决方案，如果拖拽超出了指定的区域，就让它回到中心点位置，本想让它改变中心点为拖拽之后区域的中心点，但是那样依旧阻止不了一直拖拽出控制区域，所以改成超出便回到中心点let bmap = myChart.getModel().g...

2019-07-24 18:00:58 2677 1

原创 base64解码与转码

let Base64 = { encode(str) { // first we use encodeURIComponent to get percent-encoded UTF-8, // then we convert the percent encodings into raw bytes which // can be fed into bt...

2019-07-24 17:53:31 2861

原创 vue+vue-baidu-map

本篇博客主要写一下百度地图插件1.安装插件yarn add vue-baidu-map2.main.js中注册import BaiduMap from 'vue-baidu-map'Vue.use(BaiduMap, { ak: 申请的百度地图ak})3.在需要百度地图的页面使用<baidu-map></baidu-map>仅仅引入标签，百度地图...

2019-07-13 17:09:31 783

原创 vue+echarts+bmap绘制散点图

基于echarts的中国地图散点图在上篇博客中已经写过了，这篇博客主要写一下基于扩展的百度地图为地图绘制的方法1.在main.js注册echarts2.在页面引入bmap.jsimport 'echarts/extension/bmap/bmap.js'3.单纯的引入bmap，浏览器会报错 BMap is not defined，参考了很多博客，发现需要单独写一个js文件，进行异步操作，...

2019-07-13 17:01:02 4058 3

原创 vue+echarts+map绘制散点图

安装echarts跟vue就不写了，只要讲一下基于echarts自带的map如何绘制散点图，echarts官网上已经不允许下载了，但是在vue上安装的echarts插件上有完整的js文件和json文件，在node_modules/echarts/map文件夹里，有中国地图、世界地图和各省份地图1.首先在vue上全局注册或在需要的页面引入所需的文件，这里我用的是全局注册//main.jsim...

2019-07-13 16:49:55 2703 4

原创 van-cell宽度问题

van-cell里面的van-cell__title和van-cell__value的宽度默认是50%，而且怎么修改也没有变化，后来发现是在min-width做了限制，所以修改相应类的min-width即可

2019-07-08 18:10:36 12885 3

原创 vue-cli3 配置axios跨域及封装

在根目录上创建一个vue.config.js文件module.exports = { publicPath: './', outputDir: 'dist', lintOnSave: true, productionSourceMap: false, devServer: { host: '0.0.0.0', port:'8080', disableH...

2019-06-05 10:09:19 6137

原创 js的BOM对象

BOM对象有 screen location navigator history1.screen有width height availHeight availWidth2.location console.log(window.location);//window.location.href="http://www.baidu.com" // 可以切换网址 //window...

2019-03-29 17:05:53 157

原创 return的返回值

1.return在if else语句里面相当于whitch的break 截断 function test(num) { if(num==""){ alert('0000'); return; alert(1111)//加入return截断后，下面的alert（1111）不会再执行，会直接跳出当前的if语句 ...

2019-03-29 08:43:38 6352

原创倒序输出一个数的几种方法

var p=prompt("请输入一个正整数"); var p1=parseInt(p);1.数转成数组，然后倒序输出p=p.split('').reverse(); var result=""; console.log(p); for (var i=0;i<p.length;i++){ result+=p[i]; } ...

2019-03-29 08:36:50 3057

原创用do while 实现猜数的小游戏

var a=prompt("请输入1-100之间的数"); var math=Math.floor(Math.random()*100+1);//向下取整 // alert(math); var min=0; var max=100; do{ if(a<math){ min=a; ...

2019-03-29 08:34:52 567

原创水仙花数

for(var i=100;i<1000;i++){ var hundred=parseInt(i/100); var ten=parseInt(i/10)-hundred*10; var num=i%10; if(Math.pow(hundred,3)+Math.pow(ten,3)+Math...

2019-03-29 08:33:22 123

原创 js作用域

function add() { var a=b=10; //var a=10;b=10全局 }; add(); console.log(a);//not defined console.log(b);//10 // console.log(a);//undefined 变量提升浏览器会先声明变量var a; va...

2019-03-27 14:08:08 107

原创 js解决两个数互换的几种方法

var a=5;var b=3;1.定义一个变量来接 var c; c=a;//c=5 a=b;//a=3 b=c;//b=52.加减 a=a+b;//a=3+5 b=a-b;//b=8-3=5 a=a-b;//a=8-5=33.异或 a=a^b;//a:0101 b:0011 a=a^b=0110 b=a...

2019-03-27 10:52:17 1174

原创 vuecli路由

路由有两种安装方式1.在创建项目的时候一起安装路由2.项目创建完后再命令行里安装npm install vue-router --save-dev安装完后会发现src文件夹里多了一个名为router的文件夹，里面有一个index.js的文件,路由需要在此配置打开main.jsimport router from './router/'这时配置路由是无效的，因为main.js没有配...

2019-03-16 17:55:09 182

原创 vue cli关于mui区域滚动无效

滚动组件默认的是overflow:hidden <div class="mui-scroll-wrapper" style="height: 18.75rem; overflow: scroll;"> <div class="mui-scroll">再手动初始化滚动组件就可以了...

2019-03-16 17:43:11 849

原创 vue cli 关于mui左侧菜单栏问题

将mui组件的js引入以后发现菜单的点击联动失效(function() { var controlsElem = document.getElementById("segmentedControls"); var contentsElem = document.getElementById("segmentedControlContents"); var controlL...

2019-03-16 17:41:21 842

原创 vue cli 关于mui switch开关组件在手机上无效

需要手动初始化开关组件，在生命钩子vue渲染完成之后初始化mounted: function(){ this.$mui('.mui-switch')['switch']();}

2019-03-16 17:36:17 863

原创 vue cli图片无法显示

vue打包以后可能会出现data里动态添加的图片的路径没有自动更改，需要把图片放到项目的src/assets/文件夹内然后在data里面引用 src: require("../assets/img/xljtb.jpg"),...

2019-03-16 17:34:00 1803

原创 vue cli关于mui自定义图标无法识别问题

需要将阿里巴巴矢量库里下载的文件添加到项目的src/assets/font文件夹内，需要如下几个文件然后在main.js中引入iconfont.css就可以正常使用了import './assets/font/iconfont.css'...

2019-03-16 17:31:04 374

原创打包vue

进入项目以后命令行输入npm run build这时项目里会有一个dist的文件夹，里面有一个index.html，运行html发现控制台报错，可以通过以下方式来解决打开dist/static/css文件夹里的第一个css文件通过ctrl+F查找svg，更改第二个和第三个的url，把最外层的单引号改为双引号.mui-spinner:after { display: block; w...

2019-03-16 17:26:27 209

原创 vue cli+MUI

在static文件夹下新建一个mui目录把mui的css、 js文件引入在main.js中引入mui.min.css和mui.min.jsimport'../static/mui/css/mui.min.css'import mui from "../static/mui/js/mui.min.js"定义mui，用$mui代替mui，可以避免若vue文件的data里有定义mui的话，会...

2019-03-16 17:16:01 462

原创搭建vue脚手架

首先确认安装了node.js和npm然后在命令行输入node -v和npm -v检查是否安装成功接下来安装vue1.全局安装vue/clinpm install -g @vue/cli2.全局安装vue/cli-initnpm install -g @vue/cli-init3.新建一个空文件夹，用于存放vue项目，使用命令行进入到文件夹内，创建vue项目vue init ...

2019-03-16 17:10:24 99

原创 webpack的plugins插件

安装：cnpm i webpack-dev-server --save-dev配置文件提供一个入口和一个出口，webpack根据这个来进行js的打包和编译工作。虽然webpack提供了webpack --watch的命令来动态监听文件的改变并实时打包，输出新bundle.js文件，这样文件多了之后打包速度会很慢，此外这样的打包的方式不能做到hot replace，即每次webpack编译之后，...

2019-03-14 15:10:32 536

原创 webpack的loader Babel

与gulp一样，需要在根目录下建立一个名为webpack.config的js配置文件，将编译下下拨给放入配置文件内在使用webpack的重要功能loader之前先安装babel 和babel/coreBabel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包首先安装cn...

2019-03-14 15:06:58 252

原创 webpack四个模块简介

1.entry入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。可以通过在 webpack 配置中配置 entry 属性，来指定一个入口起点（或多个入口起点）。Entry的配置写法有三种：(1).对象，可配置多入口(2).字符串, 最简单直接方式，单...

2019-03-14 15:00:18 1598

原创 webpack安装

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。在webpack中，所有的静态资源都可以被处理为一个模块，包括js、图片、css、字体。模块化是前端开发的...

2019-03-14 14:47:48 616

原创 gulp使用

一、编译less1.命令行安装插件cnpm i gulp-less --save-dev2.打开根目录下的gulpfile.js文件，引入gulp-lessvar less = require("gulp-less");

2019-03-05 13:11:07 82

原创 gulp的方法介绍

gulp借鉴了Unix操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，gulp.src返回当前文件流至可用插件1.gulp.src（）要编译的文件的路径，采用的是绝对路径gulp.src("css/*.less") //指定源文件路径 *全部2.gulp.task(name[, deps], fn)定义一个任务deps:一个包含任务列表的数组，这些任务会在你当前...

2019-03-05 11:19:06 267

原创 gulp安装

gulp简单介绍：gulp就是用来机械化的完成重复性质（如less->css；js、css压缩；js混淆）的工作；gulp的机制就是将重复工作抽象成一个个的任务。gulp的安装：gulp是基于node.js的，因此首先要确保安装了node.js，gulp是国外的，命令行安装时需要将npm换成镜像代理源（如何更换前面的博客已经讲过了）1.首先全局安装gulpcnpm install ...

2019-03-05 10:59:08 157

原创 scss编译

1.考拉编译2.命令行编译首先安装ruby打开命令行移除原来的gem源gem sources --remove https://rubygems.org/添加新的gem源$ gem sources -a https://gems.ruby-china.com/安装sassgem install sass通过 sass -v命令确认是否安装成功进入到需要的文件夹中进行监听sa...

2018-12-27 10:43:40 647

原创 less编译的几种方法

1.考拉软件编译http://koala-app.com/index-zh.html要引入编译后的css文件考拉会在后台监听2.js在线编译 <link rel="stylesheet/less" type="text/css" href="css/less01.less" /> <script src="//cdnjs.cloudflare.com/...

2018-12-27 10:33:33 680

原创 bootStrap栅格系统

<div class="container">   <!--栅格系统把屏幕分为12列 col-lg-1 大屏幕占1列 col-md

2018-12-26 10:09:08 98

原创引入bootStrap

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name

2018-12-26 10:04:04 438

原创 echarts注释

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>eChart图表入门</title> <style> #main { w

2018-12-26 10:01:07 1034

原创静态折线图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>折线图</title> <style> </style><

2018-12-14 15:32:22 517

原创动态空心圆图

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>动态空心饼图</title> <style> </style>&l

2018-12-14 15:31:01 247

空空如也

空空如也